Stack sidebar navigation vertically

This commit is contained in:
Dymas
2026-05-23 11:52:58 +02:00
parent fe094a7112
commit 948753fe28
8 changed files with 24 additions and 19 deletions
+4
View File
@@ -1,5 +1,9 @@
# Changelog # Changelog
## 0.35.1 - 2026-05-23
- Changed the shared sidebar navigation to a vertical one-link-per-line stack so the menu stays balanced after adding the dedicated Queue page.
## 0.35.0 - 2026-05-22 ## 0.35.0 - 2026-05-22
- Split the download queue out of the Search page into a dedicated `/queue` page so searching and queue management are separate workflows. - Split the download queue out of the Search page into a dedicated `/queue` page so searching and queue management are separate workflows.
+2 -1
View File
@@ -2,7 +2,7 @@
Small local web UI for a system-wide `ani-cli` install. Small local web UI for a system-wide `ani-cli` install.
Current version: `0.35.0` Current version: `0.35.1`
## Project Layout ## Project Layout
@@ -147,6 +147,7 @@ Highlights:
- Search stays focused on finding shows, loading episodes, and queueing new downloads. - Search stays focused on finding shows, loading episodes, and queueing new downloads.
- Added-to-queue notices now point to the dedicated Queue page for progress tracking. - Added-to-queue notices now point to the dedicated Queue page for progress tracking.
- Search request guards still avoid stale responses overwriting newer results. - Search request guards still avoid stale responses overwriting newer results.
- The shared sidebar menu now shows one navigation entry per line for cleaner balance across all pages.
### Queue Page ### Queue Page
+1 -1
View File
@@ -1 +1 @@
0.35.0 0.35.1
+4 -4
View File
@@ -169,18 +169,18 @@ CONFIG_HTML = r"""<!doctype html>
} }
.row > * { flex: 1; } .row > * { flex: 1; }
.page-links { .page-links {
display: flex; display: grid;
gap: 8px; gap: 8px;
flex-wrap: wrap;
padding: 6px; padding: 6px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 18px; border-radius: 18px;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
.page-link { .page-link {
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
width: 100%;
min-height: 40px; min-height: 40px;
border: 0; border: 0;
border-radius: 12px; border-radius: 12px;
+4 -4
View File
@@ -139,18 +139,18 @@ QUEUE_HTML = r"""<!doctype html>
} }
.row > * { flex: 1; } .row > * { flex: 1; }
.page-links { .page-links {
display: flex; display: grid;
gap: 8px; gap: 8px;
flex-wrap: wrap;
padding: 6px; padding: 6px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 18px; border-radius: 18px;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
.page-link { .page-link {
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
width: 100%;
min-height: 40px; min-height: 40px;
border: 0; border: 0;
border-radius: 12px; border-radius: 12px;
+4 -4
View File
@@ -183,18 +183,18 @@ INDEX_HTML = r"""<!doctype html>
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
} }
.page-links { .page-links {
display: flex; display: grid;
gap: 8px; gap: 8px;
flex-wrap: wrap;
padding: 6px; padding: 6px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 18px; border-radius: 18px;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
.page-link { .page-link {
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
width: 100%;
min-height: 40px; min-height: 40px;
border: 0; border: 0;
border-radius: 12px; border-radius: 12px;
+1 -1
View File
@@ -86,4 +86,4 @@ def render_page_links(active_page):
for key, label, href in PAGE_LINKS: for key, label, href in PAGE_LINKS:
class_name = "page-link active" if key == active_page else "page-link" class_name = "page-link active" if key == active_page else "page-link"
links.append(f' <a class="{class_name}" href="{href}">{label}</a>') links.append(f' <a class="{class_name}" href="{href}">{label}</a>')
return " <div class=\"page-links\">\n" + "\n".join(links) + "\n </div>\n" return " <nav class=\"page-links\" aria-label=\"Primary navigation\">\n" + "\n".join(links) + "\n </nav>\n"
+4 -4
View File
@@ -150,18 +150,18 @@ WATCHLIST_HTML = r"""<!doctype html>
max-width: 28ch; max-width: 28ch;
} }
.page-links { .page-links {
display: flex; display: grid;
gap: 8px; gap: 8px;
flex-wrap: wrap;
padding: 6px; padding: 6px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 18px; border-radius: 18px;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
.page-link { .page-link {
display: inline-flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
width: 100%;
min-height: 40px; min-height: 40px;
border: 0; border: 0;
border-radius: 12px; border-radius: 12px;