Projekte: CSS-Block fuer Tabelle, Dialog-Inhalte, Preview-Block und Zuordnen
Neuer Block Projekte (P5) direkt vor KOMPAT: Projekttabelle (unter 860 px zweispaltiges Raster), Aktionszeile, Dialog-Formular, Preview-Block, Projektzeile am Ticket, Zuordnen-Assistent. Die alten Regeln .ticket-projects und .ticket-projects-assign .form-control entfallen. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed
1 parent
9da42d52c3
commit
fa2a66a58f
1 file changed
+71
-5
+71
-5
@@ -500,11 +500,6 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
|
||||
|
||||
.hidden { display: none; }
|
||||
|
||||
.ticket-projects { margin-top: 16px; }
|
||||
/* Zeile unter der Projektliste: Projekt waehlen + Zuweisen + Neues Projekt */
|
||||
.ticket-projects-assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
||||
.ticket-projects-assign .form-control { flex: 1 1 220px; margin: 0; }
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
@@ -1112,6 +1107,77 @@ button.link { font-weight: 500; } /* font: inherit setzt sonst das Gewicht von .
|
||||
}
|
||||
/* ===== ENDE Kunden (P4) ===== */
|
||||
|
||||
/* ===== Projekte (P5) ===== */
|
||||
/* Projektliste als Tabelle, Dialog-Inhalte, Preview-Block, Projektzeile am Ticket und beim Kunden, Zuordnen-Assistent. Steht direkt vor */
|
||||
/* KOMPAT: gewinnt ueber die Bausteinregeln oberhalb durch die Reihenfolge, nie durch eine Erzwingung. */
|
||||
button.link { text-align: left; } /* Reset und Gewicht von button.link stehen im Block Tickets (P2) */
|
||||
|
||||
/* ---------- Projektliste (Tabelle) ---------- */
|
||||
.projects-table td:first-child { min-width: 140px; }
|
||||
.projects-table th, .projects-table td { padding-right: 8px; }
|
||||
.projects-table th:last-child, .projects-table td:last-child { padding-right: 0; }
|
||||
.projects-table .cell-title .link, .projects-table .cell-sub { overflow-wrap: anywhere; }
|
||||
.projects-table .select { width: clamp(104px, 10vw, 180px); max-width: 100%; }
|
||||
.projects-table td.cell-address code { display: block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
|
||||
.projects-table td.cell-updated { min-width: 70px; }
|
||||
.projects-table tr.is-archived td { opacity: .72; }
|
||||
.row-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
|
||||
.row-actions .link { white-space: nowrap; }
|
||||
.projects-table .row-actions { justify-content: flex-end; }
|
||||
/* Unter 860 px steht jede Zeile als zweispaltiges Raster: Projekt ueber beide Spalten, Kunde und Status nebeneinander, Aktionen darunter. */
|
||||
/* Rollen (table, row, cell) stehen im JSX, damit die Tabellensemantik beim Stapeln erhalten bleibt. */
|
||||
@media (max-width: 860px) {
|
||||
.projects-table, .projects-table tbody, .projects-table td { display: block; }
|
||||
.projects-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* nur fuer Screenreader */
|
||||
.projects-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
|
||||
.projects-table td { padding: 0; border: 0; }
|
||||
.projects-table td:first-child, .projects-table td.cell-actions { grid-column: 1 / -1; }
|
||||
.projects-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--text-2); }
|
||||
.projects-table .select { width: 100%; }
|
||||
.projects-table .row-actions { justify-content: flex-start; }
|
||||
.projects-table tr.row:hover td, .projects-table tr.row:hover td:first-child, .projects-table tr.row:hover td:last-child { background: none; box-shadow: none; }
|
||||
/* (0,2,1) schlaegt .hide-sm (0,1,0) und .projects-table td { display: block } (0,1,1) ueber die Spezifitaet, ohne Erzwingung */
|
||||
.projects-table td.hide-sm, .projects-table td.hide-md { display: none; }
|
||||
}
|
||||
.badge.wrap { white-space: normal; height: auto; min-height: 20px; padding-top: 2px; padding-bottom: 2px; overflow-wrap: anywhere; }
|
||||
|
||||
/* ---------- Dialog-Inhalte ---------- */
|
||||
.dialog-form { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
/* ---------- Preview-Block (im Projekt-Dialog, am Ticket und beim Kunden) ---------- */
|
||||
.pv-block { font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.pv-row, .pv-add, .pv-var { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
||||
.pv-var { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
|
||||
.pv-mode { width: 200px; max-width: 100%; }
|
||||
.pv-title { font-size: 13px; font-weight: 600; }
|
||||
.pv-log { background: var(--bg-subtle); max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; padding: 8px; border-radius: var(--radius); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 16px; }
|
||||
.pv-var code, .pv-var .input, .pv-add .input { flex: 1 1 140px; min-width: 0; }
|
||||
.pv-var code { overflow-wrap: anywhere; }
|
||||
|
||||
/* ---------- Projektzeile am Ticket und beim Kunden ---------- */
|
||||
/* Spalte mit Abstand statt Aussenabstaenden an den Kindern: ein offener Dialog (fest, ausserhalb des Flusses) bekaeme sonst einen Versatz */
|
||||
.proj-item { padding: 16px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
|
||||
.proj-item > button.link { align-self: flex-start; } /* sonst waere der ganze Streifen klickbar */
|
||||
.proj-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
|
||||
.proj-main { min-width: 0; overflow-wrap: anywhere; }
|
||||
.proj-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-2); }
|
||||
.ticket-projects-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
|
||||
.ticket-projects-assign .select { flex: 1 1 220px; min-width: 0; }
|
||||
.ticket-projects-assign .input { flex: 1 1 160px; min-width: 0; }
|
||||
|
||||
/* ---------- Zuordnen-Assistent ---------- */
|
||||
.seg.wrap { flex-wrap: wrap; }
|
||||
.row-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.check.top { align-items: flex-start; }
|
||||
.pick-list { max-height: 360px; overflow-y: auto; }
|
||||
.pick-empty { padding: 12px 0; }
|
||||
button.list-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: inherit; cursor: pointer; }
|
||||
button.list-row:hover, button.list-row[aria-pressed="true"] { background: var(--bg-hover); }
|
||||
button.list-row .cell-sub { display: block; }
|
||||
button.list-row:focus-visible { outline-offset: -2px; } /* in .pick-list (Scroll-Container) wuerde der Ring sonst abgeschnitten */
|
||||
.summary { list-style: none; display: flex; flex-direction: column; gap: 6px; }
|
||||
/* ===== ENDE Projekte (P5) ===== */
|
||||
|
||||
/* ===== KOMPAT (bis P10) ===== */
|
||||
/* Uebergangsschicht: alte Klassen im neuen Look, damit Seiten und Dialoge, die noch nicht umgebaut sind, weiss, kastenlos */
|
||||
/* und lesbar bleiben. Steht am Dateiende und gewinnt dort gegen die Altregeln und gegen die anderen Stylesheets (global.css */
|
||||
|
||||
Reference in new issue
Block a user