diff --git a/src/renderer/views/collector/CollectorView.tsx b/src/renderer/views/collector/CollectorView.tsx index 45c71ca..2082398 100644 --- a/src/renderer/views/collector/CollectorView.tsx +++ b/src/renderer/views/collector/CollectorView.tsx @@ -314,8 +314,8 @@ function CollectorPackageGroup({ row, model, actions, selected, focusIndexStart, type="button" >{row.collapsed ? "+" : "−"} {row.name} + {row.totalCount} Dateien - {row.totalCount} Dateien {packageSize(row)} {row.hosters.map(formatHosterLabel).map((hoster) => )} @@ -335,8 +335,7 @@ function CollectorPackageGroup({ row, model, actions, selected, focusIndexStart, actions.onLinkSelectionChange(link.id, event.target.checked)} tabIndex={interaction.tabIndex} type="checkbox" /> - - {link.fileName} + {link.fileName} {link.fileSizeBytes === null ? "Unbekannt" : humanSize(link.fileSizeBytes)} {linkAvailability(link.availability)} @@ -429,8 +428,7 @@ export function CollectorContent({ model, actions }: CollectorViewProps): ReactE
- Name - Datei + Name Größe Hoster Status diff --git a/src/renderer/views/collector/collector.css b/src/renderer/views/collector/collector.css index fff1740..37a5a6a 100644 --- a/src/renderer/views/collector/collector.css +++ b/src/renderer/views/collector/collector.css @@ -197,8 +197,8 @@ .collector-file-row { align-items: center; display: grid; - grid-template-columns: 48px minmax(200px, 1.4fr) minmax(300px, 2fr) minmax(110px, 0.75fr) minmax(90px, 0.65fr) minmax(115px, 0.85fr) minmax(130px, 1fr) minmax(150px, 1fr); - min-width: 1200px; + grid-template-columns: 48px minmax(260px, 2.4fr) minmax(110px, 0.8fr) minmax(90px, 0.65fr) minmax(115px, 0.9fr) minmax(130px, 1fr) minmax(150px, 1fr); + min-width: 960px; } .collector-table-header-row { @@ -217,11 +217,11 @@ padding: 0 12px; } -.collector-column-name { +.collector-table-header-row > span:nth-child(2) { padding-left: 48px; } -.collector-table-header-row > span:nth-child(n+4) { +.collector-table-header-row > span:nth-child(n+3) { display: flex; justify-content: center; text-align: center; @@ -247,7 +247,7 @@ .collector-virtual-spacer { flex: 0 0 var(--collector-virtual-total-height); height: var(--collector-virtual-total-height); - min-width: 1200px; + min-width: 960px; position: relative; } @@ -338,22 +338,20 @@ } .collector-name-cell strong, -.collector-file-cell { +.collector-name-cell.is-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.collector-file-cell { - align-items: center; - color: var(--ui-text); - display: flex; - gap: 8px; - min-width: 0; +.collector-name-cell small { + color: var(--ui-text-muted); + white-space: nowrap; } -.collector-file-cell.is-package { - color: var(--ui-text-muted); +.collector-name-cell.is-file { + color: var(--ui-text); + padding-left: 32px; } .collector-collapse-button { @@ -523,19 +521,6 @@ } } -@media (max-width: 1530px) { - .collector-table-header-row, - .collector-package-row, - .collector-file-row { - grid-template-columns: 44px minmax(180px, 1.2fr) minmax(260px, 1.7fr) minmax(98px, 0.75fr) minmax(78px, 0.65fr) minmax(100px, 0.85fr) minmax(112px, 1fr) minmax(132px, 1fr); - min-width: 1040px; - } - - .collector-virtual-spacer { - min-width: 1040px; - } -} - @media (max-width: 1366px) { .collector-view { grid-template-columns: 56px minmax(0, 1fr); @@ -557,6 +542,13 @@ .collector-action { padding: 0 9px; } + + .collector-table-header-row, + .collector-package-row, + .collector-file-row { + grid-template-columns: 44px minmax(220px, 2.2fr) minmax(98px, 0.8fr) minmax(78px, 0.65fr) minmax(100px, 0.9fr) minmax(112px, 1fr) minmax(132px, 1fr); + min-width: 820px; + } } @media (max-width: 1120px) { @@ -576,11 +568,7 @@ .collector-table-header-row, .collector-package-row, .collector-file-row { - grid-template-columns: 42px minmax(170px, 1.1fr) minmax(240px, 1.6fr) minmax(92px, 0.75fr) minmax(72px, 0.65fr) minmax(94px, 0.85fr) minmax(106px, 1fr) minmax(124px, 1fr); - min-width: 940px; - } - - .collector-virtual-spacer { - min-width: 940px; + grid-template-columns: 42px minmax(200px, 2fr) minmax(92px, 0.8fr) minmax(72px, 0.65fr) minmax(94px, 0.9fr) minmax(106px, 1fr) minmax(124px, 1fr); + min-width: 760px; } } diff --git a/tests/collector-view.test.tsx b/tests/collector-view.test.tsx index 574e5a7..78ec4a6 100644 --- a/tests/collector-view.test.tsx +++ b/tests/collector-view.test.tsx @@ -388,12 +388,10 @@ describe("CollectorView", () => { it("renders expandable package and file rows with preview columns", () => { const html = renderToStaticMarkup(); - for (const heading of ["Name", "Datei", "Größe", "Hoster", "Status", "Verfügbarkeit", "Hinzugefügt"]) expect(html).toContain(`>${heading}<`); + for (const heading of ["Name", "Größe", "Hoster", "Status", "Verfügbarkeit", "Hinzugefügt"]) expect(html).toContain(`>${heading}<`); expect(html).toContain("SBS14HD"); expect(html).toContain("SBS14HD.part01.rar"); expect(html).toContain("SBS14HD.part02.rar"); - expect(html).toMatch(/collector-package-row[\s\S]*collector-name-cell[\s\S]*]*>SBS14HD<\/strong>[\s\S]*collector-file-cell is-package[^>]*>2 Dateien<[\s\S]*collector-size-cell/); - expect(html).toMatch(/collector-file-row[\s\S]*aria-label="Paket SBS14HD" class="collector-name-cell is-empty"[^>]*><\/span>[\s\S]*collector-file-cell[^>]*>[\s\S]*SBS14HD\.part01\.rar[\s\S]*collector-size-cell/); expect(html).toContain("2/2 online"); expect(html).toContain(">Online<"); expect(html).toContain("aria-label=\"SBS14HD einklappen\""); @@ -537,15 +535,11 @@ describe("CollectorView", () => { expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.collector-virtual-spacer\.is-motion-enabled \.collector-virtual-package\s*\{[^}]*transition-duration:\s*300ms, 300ms !important;/s); expect(css).toMatch(/\.collector-package-items-frame\.is-expanding\s*\{[^}]*animation:\s*collector-items-expand/s); expect(css).not.toMatch(/\.collector-package-items-frame\.is-animated\s*\{[^}]*animation:\s*collector-items-expand/s); - expect(css).toMatch(/\.collector-column-name\s*\{[^}]*padding-left:\s*48px;/s); - expect(css).toMatch(/\.collector-name-cell strong,\s*\.collector-file-cell\s*\{[^}]*text-overflow:\s*ellipsis;/s); - expect(css).toMatch(/\.collector-file-cell\s*\{[^}]*display:\s*flex;/s); + expect(css).toMatch(/\.collector-table-header-row > span:nth-child\(2\)\s*\{[^}]*padding-left:\s*48px;/s); + expect(css).toMatch(/\.collector-name-cell\.is-file\s*\{[^}]*padding-left:\s*32px;/s); expect(css).toMatch(/\.collector-table-header,\s*\.collector-table-body\s*\{[^}]*scrollbar-gutter:\s*stable;/s); expect(css).toMatch(/\.collector-size-cell,\s*\.collector-hoster-cell,\s*\.collector-status-cell,\s*\.collector-availability-cell,\s*\.collector-added-cell\s*\{[^}]*text-align:\s*center;/s); - expect(css).toMatch(/\.collector-table-header-row > span:nth-child\(n\+4\)\s*\{[^}]*justify-content:\s*center;[^}]*text-align:\s*center;/s); - expect(css).toMatch(/@media \(max-width: 1530px\)[\s\S]*grid-template-columns:[^;]+;[\s\S]*min-width:\s*1040px;/s); - expect(css).toMatch(/@media \(max-width: 1530px\)[\s\S]*\.collector-virtual-spacer\s*\{[^}]*min-width:\s*1040px;/s); - expect(css).toMatch(/@media \(max-width: 1120px\)[\s\S]*\.collector-virtual-spacer\s*\{[^}]*min-width:\s*940px;/s); + expect(css).toMatch(/\.collector-table-header-row > span:nth-child\(n\+3\)\s*\{[^}]*justify-content:\s*center;[^}]*text-align:\s*center;/s); expect(collectorHeaderScrollStyle(37)).toEqual({ transform: "translateX(-37px)" }); });