fix(ui): Ueberbreite auf dem Handy beseitigen (#038)
Beim Oeffnen der Warnungen und auf der Host-Detailansicht zoomte der Browser die ganze Seite heraus. Ursache war jeweils ein Element breiter als das Fenster: die 22 rem breite Klappliste, drei Tabellen ohne table-responsive und eine 32-stellige Server-ID ohne Umbruch. Klapplisten richten sich auf dem Telefon jetzt am Fenster aus statt am Knopf, die Tabellen bekommen ihre Huelle, lange IDs duerfen umbrechen. Geprueft mit einer neuen Aufnahme in Telefonbreite (--mobil). Dabei ein eigener Fehler aus #037 aufgefallen: Die Laufzeit-Detailseite rechnete weiter mit dem Listenpreis statt mit dem Betrag nach Rabatt - Marge und Vorschlag fuer die Kundenrechnung waren um den Rabatt zu hoch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -225,62 +225,66 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
|
||||
inhalt: (
|
||||
<>
|
||||
<h3 className="h6">Keys</h3>
|
||||
<table className="table table-striped align-middle mb-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Erstmals gemeldet</th>
|
||||
<th scope="col">Zuletzt gemeldet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{host.keyHistorie.map((eintrag) => (
|
||||
<tr key={eintrag.id}>
|
||||
<td>
|
||||
<CopyableCode wert={eintrag.key} />
|
||||
</td>
|
||||
<td>{formatDatum(eintrag.ersteMeldung)}</td>
|
||||
<td>{formatDatum(eintrag.letzteMeldung)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{host.keyHistorie.length === 0 ? (
|
||||
<div className="table-responsive mb-4">
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={3} className="text-body-secondary">
|
||||
Noch kein Key gemeldet.
|
||||
</td>
|
||||
<th scope="col">Key</th>
|
||||
<th scope="col">Erstmals gemeldet</th>
|
||||
<th scope="col">Zuletzt gemeldet</th>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{host.keyHistorie.map((eintrag) => (
|
||||
<tr key={eintrag.id}>
|
||||
<td>
|
||||
<CopyableCode wert={eintrag.key} />
|
||||
</td>
|
||||
<td>{formatDatum(eintrag.ersteMeldung)}</td>
|
||||
<td>{formatDatum(eintrag.letzteMeldung)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{host.keyHistorie.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={3} className="text-body-secondary">
|
||||
Noch kein Key gemeldet.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 className="h6">Server-IDs</h3>
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Server-ID</th>
|
||||
<th scope="col">Erstmals gemeldet</th>
|
||||
<th scope="col">Zuletzt gemeldet</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{host.serverIdHistorie.map((eintrag) => (
|
||||
<tr key={eintrag.id}>
|
||||
<td>
|
||||
<CopyableCode wert={eintrag.serverId} />
|
||||
</td>
|
||||
<td>{formatDatum(eintrag.ersteMeldung)}</td>
|
||||
<td>{formatDatum(eintrag.letzteMeldung)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{host.serverIdHistorie.length === 0 ? (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={3} className="text-body-secondary">
|
||||
Noch keine Server-ID gemeldet.
|
||||
</td>
|
||||
<th scope="col">Server-ID</th>
|
||||
<th scope="col">Erstmals gemeldet</th>
|
||||
<th scope="col">Zuletzt gemeldet</th>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{host.serverIdHistorie.map((eintrag) => (
|
||||
<tr key={eintrag.id}>
|
||||
<td>
|
||||
<CopyableCode wert={eintrag.serverId} />
|
||||
</td>
|
||||
<td>{formatDatum(eintrag.ersteMeldung)}</td>
|
||||
<td>{formatDatum(eintrag.letzteMeldung)}</td>
|
||||
</tr>
|
||||
))}
|
||||
{host.serverIdHistorie.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={3} className="text-body-secondary">
|
||||
Noch keine Server-ID gemeldet.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{host.serverIdHistorie.length > 1 ? (
|
||||
<p className="small pl-text-warning mt-2 mb-0">
|
||||
Mehrere Server-IDs bedeuten Hardwaretausch oder Neuinstallation – der Key muss
|
||||
@@ -429,53 +433,55 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
|
||||
titel: "Tokens",
|
||||
icon: "bi-key-fill",
|
||||
inhalt: (
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Anfang</th>
|
||||
<th scope="col">Erstellt</th>
|
||||
<th scope="col">Zuletzt benutzt</th>
|
||||
<th scope="col">Zustand</th>
|
||||
<th scope="col" className="text-end">
|
||||
Aktion
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{host.tokens.map((token) => (
|
||||
<tr key={token.id}>
|
||||
<td className="pl-mono">{token.praefix}…</td>
|
||||
<td>{formatDatum(token.erstelltAm)}</td>
|
||||
<td>{formatDatumZeit(token.letzteNutzungAm)}</td>
|
||||
<td>
|
||||
{token.widerrufenAm ? (
|
||||
<Badge farbe="neutral">Widerrufen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">Aktiv</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
{token.widerrufenAm ? null : (
|
||||
<form action={hostTokenWiderrufen}>
|
||||
<input type="hidden" name="id" value={token.id} />
|
||||
<input type="hidden" name="hostId" value={host.id} />
|
||||
<button type="submit" className="btn btn-sm btn-outline-danger">
|
||||
Widerrufen
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{host.tokens.length === 0 ? (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-striped align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={5} className="text-body-secondary">
|
||||
Kein Token vorhanden – dieser Host stammt aus den Demo-Daten.
|
||||
</td>
|
||||
<th scope="col">Anfang</th>
|
||||
<th scope="col">Erstellt</th>
|
||||
<th scope="col">Zuletzt benutzt</th>
|
||||
<th scope="col">Zustand</th>
|
||||
<th scope="col" className="text-end">
|
||||
Aktion
|
||||
</th>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{host.tokens.map((token) => (
|
||||
<tr key={token.id}>
|
||||
<td className="pl-mono">{token.praefix}…</td>
|
||||
<td>{formatDatum(token.erstelltAm)}</td>
|
||||
<td>{formatDatumZeit(token.letzteNutzungAm)}</td>
|
||||
<td>
|
||||
{token.widerrufenAm ? (
|
||||
<Badge farbe="neutral">Widerrufen</Badge>
|
||||
) : (
|
||||
<Badge farbe="success">Aktiv</Badge>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-end">
|
||||
{token.widerrufenAm ? null : (
|
||||
<form action={hostTokenWiderrufen}>
|
||||
<input type="hidden" name="id" value={token.id} />
|
||||
<input type="hidden" name="hostId" value={host.id} />
|
||||
<button type="submit" className="btn btn-sm btn-outline-danger">
|
||||
Widerrufen
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{host.tokens.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="text-body-secondary">
|
||||
Kein Token vorhanden – dieser Host stammt aus den Demo-Daten.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -25,7 +25,10 @@ export default async function LaufzeitSeite({ params }: { params: Promise<{ id:
|
||||
|
||||
const einkauf = laufzeit.proxmoxPosition?.rechnung ?? null;
|
||||
const verkauf = laufzeit.kundenPosition?.rechnung ?? null;
|
||||
const einkaufBetrag = laufzeit.proxmoxPosition ? Number(laufzeit.proxmoxPosition.nettoBetrag) : null;
|
||||
// Gerechnet wird mit dem Betrag nach Abzug des Rabatts – das ist, was tatsächlich gezahlt wird (#037).
|
||||
const einkaufListenpreis = laufzeit.proxmoxPosition ? Number(laufzeit.proxmoxPosition.nettoBetrag) : null;
|
||||
const einkaufRabatt = Number(laufzeit.proxmoxPosition?.rabatt ?? 0);
|
||||
const einkaufBetrag = einkaufListenpreis === null ? null : einkaufListenpreis - einkaufRabatt;
|
||||
const verkaufBetrag = laufzeit.kundenPosition ? Number(laufzeit.kundenPosition.nettoBetrag) : null;
|
||||
const marge = einkaufBetrag !== null && verkaufBetrag !== null ? verkaufBetrag - einkaufBetrag : null;
|
||||
|
||||
@@ -109,7 +112,14 @@ export default async function LaufzeitSeite({ params }: { params: Promise<{ id:
|
||||
<hr />
|
||||
<dl className="row mb-0">
|
||||
<dt className="col-5 fw-normal text-body-secondary">Einkauf netto</dt>
|
||||
<dd className="col-7">{formatEuro(einkaufBetrag)}</dd>
|
||||
<dd className="col-7">
|
||||
{formatEuro(einkaufBetrag)}
|
||||
{einkaufRabatt > 0 ? (
|
||||
<span className="small text-body-secondary d-block">
|
||||
{formatEuro(einkaufListenpreis)} − {formatEuro(einkaufRabatt)} Rabatt
|
||||
</span>
|
||||
) : null}
|
||||
</dd>
|
||||
<dt className="col-5 fw-normal text-body-secondary">Verkauf netto</dt>
|
||||
<dd className="col-7">{formatEuro(verkaufBetrag)}</dd>
|
||||
<dt className="col-5 fw-normal text-body-secondary">Marge</dt>
|
||||
@@ -164,7 +174,7 @@ export default async function LaufzeitSeite({ params }: { params: Promise<{ id:
|
||||
nummer: einkauf?.nummer ?? null,
|
||||
datum: einkauf?.datum.toISOString() ?? null,
|
||||
faelligAm: einkauf?.faelligAm?.toISOString() ?? faelligVorschlag,
|
||||
nettoBetrag: einkaufBetrag,
|
||||
nettoBetrag: einkaufListenpreis,
|
||||
ustSatz: Number(einkauf?.ustSatz ?? vorgaben.steuersatz),
|
||||
rabatt:
|
||||
laufzeit.proxmoxPosition?.rabatt === null ||
|
||||
|
||||
@@ -395,6 +395,12 @@ body {
|
||||
width: 13rem;
|
||||
}
|
||||
|
||||
/* Klapplisten in der Kopfzeile (Warnungen, Benutzermenü). */
|
||||
.pl-klappliste {
|
||||
width: 22rem;
|
||||
max-width: calc(100vw - 1rem);
|
||||
}
|
||||
|
||||
/* ---------- Mobil ---------- */
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
@@ -425,6 +431,30 @@ body {
|
||||
* Zellen ohne `data-label` stehen für sich – etwa eine Zeile mit Knöpfen.
|
||||
*/
|
||||
@media (max-width: 767.98px) {
|
||||
/*
|
||||
* Auf dem Telefon ist die Klappliste breiter als das Fenster – der Browser zoomt dann die
|
||||
* **ganze Seite** heraus, damit sie hineinpasst. Deshalb hier fest am Fenster ausrichten
|
||||
* statt am Knopf (#038).
|
||||
*/
|
||||
.pl-klappliste {
|
||||
position: fixed;
|
||||
top: 3.5rem;
|
||||
right: 0.5rem;
|
||||
left: 0.5rem;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lange Schlüssel und Server-IDs dürfen umbrechen. Sonst machen sie die Seite breiter als das
|
||||
* Fenster – und der Browser zoomt die ganze Seite heraus, damit sie hineinpasst (#038).
|
||||
*/
|
||||
.pl-mono {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.pl-karten-tabelle,
|
||||
.pl-karten-tabelle tbody,
|
||||
.pl-karten-tabelle tr,
|
||||
|
||||
Reference in New Issue
Block a user