From f73bbc7b9f4f9cda99de0c9260c48a907a2b6ceb Mon Sep 17 00:00:00 2001 From: Brad Stein Date: Wed, 17 Sep 2025 09:38:28 -0500 Subject: [PATCH] minor style look and feel tweaks --- frontend/src/Login.tsx | 2 +- frontend/src/Uploader.tsx | 37 +++++-- frontend/src/styles.css | 202 +++++++++++++++++++++----------------- 3 files changed, 142 insertions(+), 99 deletions(-) diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx index 020f24e..f7e7488 100644 --- a/frontend/src/Login.tsx +++ b/frontend/src/Login.tsx @@ -19,7 +19,7 @@ export default function Login({ onLogin }: { onLogin: () => void }) { {err &&
{err}
} -

Credentials are verified against your Jellyfin server.

+

Use your Jellyfin account.

) } diff --git a/frontend/src/Uploader.tsx b/frontend/src/Uploader.tsx index 57d4538..3e61fd7 100644 --- a/frontend/src/Uploader.tsx +++ b/frontend/src/Uploader.tsx @@ -620,8 +620,9 @@ export default function Uploader() { {sub && ( -
+
- - - + + + +
)} @@ -690,12 +705,14 @@ export default function Uploader() { Open ) : ( - <> - {sub === '' && } - - + )}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 426f58f..e5b10c9 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,104 +1,130 @@ /* frontend/src/styles.css */ @import '@picocss/pico/css/pico.classless.min.css'; -/* Container */ -main { max-width: 980px; margin: 0 auto; padding: 0 12px 24px; } -section { margin-block: 1rem; } +/* ── Container & sections ─────────────────────────────────────────────── */ +main { max-width: 980px; margin: 0 auto; padding: 0 12px 24px; } +section{ margin-block: 1rem; } -/* App bar */ -.app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 12px 0 24px; } -.brand { display:flex; align-items:center; gap:8px; font-size: 1.25rem; } -.brand .wing { font-size: 1.3em; line-height: 1; } +/* ── App bar ──────────────────────────────────────────────────────────── */ +.app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 24px; } +.brand { display:flex; align-items:center; gap:8px; font-size:1.25rem; } +.brand .wing{ font-size:1.3em; line-height:1; } -/* Layout helpers */ -.grid-3 { display: grid; gap: 12px; } -@media (min-width: 768px) { - .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } -} -.file-picker { display: grid; gap: 12px; } -.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } -.row-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } -.row-center { display: flex; align-items: center; justify-content: center; gap: 8px; } - -/* Inputs fill their line */ -label > input, label > select, label > textarea { width: 100%; } - -/* Subtle card and list rows */ -.card { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } -.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; } -.list-row:not(:last-child) { margin-bottom: 4px; } - -/* File review cards */ -.video-card { - border: 1px solid var(--muted-border-color); - border-radius: 12px; - padding: 12px; - background: var(--surface-2, rgba(255,255,255,0.02)); - display: grid; - gap: 10px; -} -.thumb-row { display:grid; place-items:center; } -.preview-thumb { box-shadow: 0 1px 0 rgba(0,0,0,.12); } -.filename { margin: 0 0 4px; } - -/* Utilities */ -.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -small.meta { color: var(--muted-color); } -.bad { color: var(--del-color); } -.stretch { width: 100%; } - -/* --- Prevent horizontal overflow / allow wrapping --- */ - -/* Never let rows outgrow the viewport */ -.list-row, -.card, -.video-card { max-width: 100%; } - -/* Left column of rows: allow wrapping and shrinking */ -.list-row .name, -.list-row .meta-wrap { - flex: 1 1 auto; - min-width: 0; /* enables flexbox text clamping */ +/* ── Layout helpers ───────────────────────────────────────────────────── */ +.grid-3 { display:grid; gap:12px; } +@media (min-width:768px){ + .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; } } -/* Right button cluster should never shrink weirdly */ -.row-right { - flex: 0 0 auto; /* keep buttons the same width */ +.file-picker { display:grid; gap:12px; } + +.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; } +.row-right { display:flex; align-items:center; justify-content:flex-end; gap:8px; } +.row-center { display:flex; align-items:center; justify-content:center; gap:8px; } + +/* Form controls fill their line */ +label>input, label>select, label>textarea { width:100%; } + +/* ── Cards & list rows ────────────────────────────────────────────────── */ +.card{ + padding:10px 12px; + border-radius:10px; + background:rgba(255,255,255,.03); + box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } -/* Generic helpers for wrapping long tokens (dots, underscores, hashes) */ -.wrap-anywhere { - overflow-wrap: anywhere; - word-break: break-word; +.list-row{ + display:flex; + align-items:center; + justify-content:space-between; + gap:12px; + padding:8px 12px; + border-radius:8px; + max-width:100%; +} +.list-row:not(:last-child){ margin-bottom:4px; } + +/* Keep the left side flexible & clamped */ +.list-row > :first-child{ flex:1 1 auto; min-width:0; } +.list-row .ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + +/* ── File review cards ────────────────────────────────────────────────── */ +.video-card{ + border:1px solid var(--muted-border-color); + border-radius:12px; + padding:12px; + background:var(--surface-2,rgba(255,255,255,.02)); + display:grid; + gap:10px; + max-width:100%; +} +.video-card > *{ min-width:0; } /* prevent horizontal overflow */ +.thumb-row{ display:grid; place-items:center; } +.preview-thumb{ box-shadow:0 1px 0 rgba(0,0,0,.12); } +.filename{ margin:0 0 4px; overflow-wrap:anywhere; word-break:break-word; } /* wrap long names */ + +/* ── Overflow guards & utilities ──────────────────────────────────────── */ +html, body { max-width:100%; overflow-x:hidden; } + +.wrap-anywhere{ overflow-wrap:anywhere; word-break:break-word; } +.mono-wrap{ + font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; + overflow-wrap:anywhere; word-break:break-word; +} +small.meta{ color:var(--muted-color); } +.bad { color:var(--del-color); } +.stretch { width:100%; } + +/* ── Current Sub‑Folder actions (3 equal columns) ─────────────────────── */ +.sub-actions{ + display:grid; + grid-template-columns:repeat(3,minmax(0,1fr)); + gap:10px; + align-items:stretch; + justify-items:stretch; + margin-top:8px; +} +.sub-actions > button{ width:100%; } + +/* ── Icon buttons (Home / Delete) ─────────────────────────────────────── */ +.icon-btn{ + display:inline-grid; + place-items:center; + padding:.35rem .45rem; + min-width:2.25rem; + height:2.25rem; + line-height:1; + font-size:1.15rem; + margin-inline:0; } -/* Mono lines that can wrap (e.g., final filenames) */ -.mono-wrap { - font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; - overflow-wrap: anywhere; - word-break: break-word; +/* Danger (red X). Keep .bad as an alias for compatibility. */ +.icon-btn.danger, +.icon-btn.bad{ + background:var(--del-color,#c0392b); + border-color:var(--del-color,#c0392b); + color:#fff; +} +.icon-btn.danger:hover, +.icon-btn.danger:focus, +.icon-btn.bad:hover, +.icon-btn.bad:focus{ + filter:brightness(1.05); } -/* Long headings / filenames on cards should wrap instead of overflow */ -.filename { overflow-wrap: anywhere; word-break: break-word; } - -/* If any native control still nudges layout, this prevents accidental sideways scroll */ -html, body { max-width: 100%; overflow-x: hidden; } - -/* Let grid children inside cards shrink; prevents horizontal overflow */ -.video-card > * { min-width: 0; } - -/* Ensure long file names wrap instead of overflowing */ -.filename { overflow-wrap: anywhere; word-break: break-word; } - -/* Center the actions row in the Current Sub‑Folder card */ -.buttons-row { - justify-content: center; /* explicit, even though row-center already centers */ - flex-wrap: wrap; /* wrap on very small screens */ +/* Equal height for Current Sub‑Folder action buttons */ +.sub-actions { --sub-action-h: 2.75rem; } /* pick a single row height */ +.sub-actions > button{ + height: var(--sub-action-h); + display: inline-flex; + align-items: center; + justify-content: center; } -/* Neutralize any framework inline margins to keep the group perfectly centered; - gap from the parent flex container provides the spacing */ -.buttons-row > button { - margin-inline: 0; +/* Make icon buttons match that height only inside this group */ +.sub-actions > .icon-btn{ + height: var(--sub-action-h); + min-height: var(--sub-action-h); + padding: 0 .6rem; /* vertical centering; modest horizontal padding */ + font-size: 1.15rem; /* same as your base icon size */ }