From f28f8e6b4f02453f30eaa2fd0fb0614ef5cd2c3d Mon Sep 17 00:00:00 2001 From: matt Date: Thu, 11 Sep 2025 14:54:35 -0700 Subject: [PATCH 1/5] web(ui): move theme controls to sidebar bottom, tighten Test Hand fan arc, set desktop to 280x392; mobile banner cleanup; bump version to 2.2.10 and update compose APP_VERSION; cache-bust CSS --- CHANGELOG.md | 12 +++ RELEASE_NOTES_TEMPLATE.md | 3 - code/web/static/styles.css | 94 +++++++++++-------- code/web/templates/base.html | 35 +++---- code/web/templates/decks/view.html | 16 ++-- code/web/templates/partials/deck_summary.html | 92 +++++++++++++++++- docker-compose.yml | 7 +- dockerhub-docker-compose.yml | 8 +- pyproject.toml | 2 +- 9 files changed, 188 insertions(+), 81 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d87ec54..07ec5d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,18 @@ This format follows Keep a Changelog principles and aims for Semantic Versioning - (placeholder) – no current unreleased land alternatives bugs logged - Step 5 card grid scroll flicker at bottom: added overscroll containment and skip virtualization for small (<80 items) grids to prevent upward jump when reaching end +## [2.2.10] - 2025-09-11 + +### Changed +- Web UI: Test Hand uses a default fanned layout on desktop with tightened arc and 40% overlap; outer cards sit lower for a full-arc look +- Desktop Test Hand card size set to 280×392; responsive sizes refined at common breakpoints +- Theme controls moved from the top banner to the bottom of the left sidebar; sidebar made a flex column with the theme block anchored at the bottom +- Mobile banner simplified to show only Menu, title; spacing and gaps tuned to prevent overflow and wrapping + +### Fixed +- Prevented mobile banner overflow by hiding non-essential items and relocating theme controls +- Ensured desktop sizing wins over previous inline styles by using global CSS overrides; cards no longer shrink due to flex + ## [2.2.9] - 2025-09-10 ### Added diff --git a/RELEASE_NOTES_TEMPLATE.md b/RELEASE_NOTES_TEMPLATE.md index e542e12..52d8845 100644 --- a/RELEASE_NOTES_TEMPLATE.md +++ b/RELEASE_NOTES_TEMPLATE.md @@ -52,6 +52,3 @@ - Deterministic toggle for land alternative randomization (e.g., `LAND_ALTS_DETERMINISTIC=1`). - Unit tests focusing on edge-case mono-color filtering and theme weighting bounds. - Potential adaptive virtualization row-height measurement per column for further smoothness (currently fixed estimate works acceptably). - ---- -Generated template ready for tagging release `${VERSION}` (update actual version number in CI/CD pipeline or tagging script). diff --git a/code/web/static/styles.css b/code/web/static/styles.css index 3cca2d8..6278a5c 100644 --- a/code/web/static/styles.css +++ b/code/web/static/styles.css @@ -83,7 +83,12 @@ body { /* Top banner */ .top-banner{ position:sticky; top:0; z-index:10; background: var(--surface-banner); color: var(--surface-banner-text); border-bottom:1px solid var(--border); } .top-banner{ min-height: var(--banner-h); } -.top-banner .top-inner{ margin:0; padding:.5rem 0; display:grid; grid-template-columns: var(--sidebar-w) 1fr; align-items:center; } +.top-banner .top-inner{ margin:0; padding:.5rem 0; display:grid; grid-template-columns: var(--sidebar-w) 1fr; align-items:center; width:100%; box-sizing:border-box; } +.top-banner .top-inner > div{ min-width:0; } +@media (max-width: 1100px){ + .top-banner .top-inner{ grid-auto-rows:auto; } + .top-banner .top-inner select{ max-width:140px; } +} .top-banner h1{ font-size: 1.1rem; margin:0; padding-left: 1rem; } .banner-status{ color: var(--muted); font-size:.9rem; text-align:left; padding-left: 1.5rem; padding-right: 1.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; min-height:1.2em; } .banner-status.busy{ color:#fbbf24; } @@ -105,6 +110,8 @@ body { width: var(--sidebar-w); z-index: 9; /* below the banner (z=10) */ box-shadow: 2px 0 10px rgba(0,0,0,.18); + display: flex; + flex-direction: column; } .content{ padding: 1.25rem 1.5rem; grid-column: 2; min-width: 0; } @@ -120,13 +127,22 @@ body.nav-collapsed .top-banner .top-inner{ padding-left: .5rem; padding-right: . /* Mobile tweaks */ @media (max-width: 900px){ :root{ --sidebar-w: 240px; } - .top-banner .top-inner{ grid-template-columns: 1fr; row-gap: .35rem; padding:.4rem .5rem; } + .top-banner .top-inner{ grid-template-columns: 1fr; row-gap: .35rem; padding:.4rem 15px !important; } .banner-status{ padding-left: .5rem; } .layout{ grid-template-columns: 0 1fr; } .sidebar{ transform: translateX(-100%); visibility: hidden; } body:not(.nav-collapsed) .layout{ grid-template-columns: var(--sidebar-w) 1fr; } body:not(.nav-collapsed) .sidebar{ transform: translateX(0); visibility: visible; } .content{ padding: .9rem .6rem; max-width: 100vw; box-sizing: border-box; overflow-x: hidden; } + .top-banner{ box-shadow:0 2px 6px rgba(0,0,0,.4); } + /* Spacing tweaks: tighter left, larger gaps between visible items */ + .top-banner .top-inner > div{ gap: 25px !important; } + .top-banner .top-inner > div:first-child{ padding-left: 0 !important; } + /* Mobile: show only Menu, Title, and Theme selector */ + #btn-open-permalink{ display:none !important; } + #banner-status{ display:none !important; } + #health-dot{ display:none !important; } + .top-banner #theme-reset{ display:none !important; } } /* Additional mobile spacing for bottom floating controls */ @@ -149,6 +165,14 @@ body.nav-collapsed .top-banner .top-inner{ padding-left: .5rem; padding-right: . .nav a{ color: var(--surface-sidebar-text); text-decoration:none; padding:.4rem .5rem; border-radius:6px; border:1px solid transparent; } .nav a:hover{ background: color-mix(in srgb, var(--surface-sidebar) 85%, var(--surface-sidebar-text) 15%); border-color: var(--border); } +/* Sidebar theme controls anchored at bottom */ +.sidebar .nav { flex: 1 1 auto; } +.sidebar-theme { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border); } +.sidebar-theme-label { display:block; color: var(--surface-sidebar-text); font-size: 12px; opacity:.8; margin: 0 0 .35rem .1rem; } +.sidebar-theme-row { display:flex; align-items:center; gap:.5rem; } +.sidebar-theme-row select { background: var(--panel); color: var(--text); border:1px solid var(--border); border-radius:6px; padding:.3rem .4rem; } +.sidebar-theme-row .btn-ghost { background: transparent; color: var(--surface-sidebar-text); border:1px solid var(--border); } + /* Simple two-column layout for inspect panel */ .two-col { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; } .two-col .grow { min-width: 0; } @@ -392,63 +416,50 @@ img.lqip.loaded { filter: blur(0); opacity: 1; } width: 100% !important; max-width: 100vw !important; } - + + /* Test hand responsive adjustments */ + #test-hand{ --card-w: 170px !important; --card-h: 238px !important; --overlap: .5 !important; } + + /* Modal & form layout fixes (original block retained inside media query) */ /* Fix modal layout on mobile */ .modal { padding: 10px !important; box-sizing: border-box; } - .modal-content { width: 100% !important; max-width: calc(100vw - 20px) !important; box-sizing: border-box !important; overflow-x: hidden !important; } - /* Force single column for include/exclude grid */ - .include-exclude-grid { - display: flex !important; - flex-direction: column !important; - gap: 1rem !important; - } - + .include-exclude-grid { display: flex !important; flex-direction: column !important; gap: 1rem !important; } /* Fix basics grid */ - .basics-grid { - grid-template-columns: 1fr !important; - gap: 1rem !important; - } - + .basics-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* Ensure all inputs and textareas fit properly */ .modal input, .modal textarea, - .modal select { - width: 100% !important; - max-width: 100% !important; - box-sizing: border-box !important; - min-width: 0 !important; - } - + .modal select { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; } /* Fix chips containers */ - .modal [id$="_chips_container"] { - max-width: 100% !important; - overflow-x: hidden !important; - word-wrap: break-word !important; - } - + .modal [id$="_chips_container"] { max-width: 100% !important; overflow-x: hidden !important; word-wrap: break-word !important; } /* Ensure fieldsets don't overflow */ - .modal fieldset { - max-width: 100% !important; - box-sizing: border-box !important; - overflow-x: hidden !important; - } - + .modal fieldset { max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* Fix any inline styles that might cause overflow */ .modal fieldset > div, - .modal fieldset > div > div { - max-width: 100% !important; - overflow-x: hidden !important; - } + .modal fieldset > div > div { max-width: 100% !important; overflow-x: hidden !important; } +} + +@media (max-width: 640px){ + #test-hand{ --card-w: 150px !important; --card-h: 210px !important; } + /* Generic stack shrink */ + .stack-wrap:not(#test-hand){ --card-w: 150px; --card-h: 210px; } +} + +@media (max-width: 560px){ + #test-hand{ --card-w: 140px !important; --card-h: 196px !important; padding-bottom:.75rem; } + #test-hand .stack-grid{ display:flex !important; gap:.5rem; grid-template-columns:none !important; overflow-x:auto; padding-bottom:.25rem; } + #test-hand .stack-card{ flex:0 0 auto; } + .stack-wrap:not(#test-hand){ --card-w: 140px; --card-h: 196px; } } @media (max-width: 480px) { @@ -508,3 +519,8 @@ img.lqip.loaded { filter: blur(0); opacity: 1; } display: none !important; /* Hide separators on mobile */ } } + +/* Desktop sizing for Test Hand */ +@media (min-width: 900px) { + #test-hand { --card-w: 280px !important; --card-h: 392px !important; } +} diff --git a/code/web/templates/base.html b/code/web/templates/base.html index 98144c4..52f4a0d 100644 --- a/code/web/templates/base.html +++ b/code/web/templates/base.html @@ -30,7 +30,7 @@ }catch(_){ } })(); - + @@ -54,23 +54,9 @@
- - {% if enable_themes %} - - - {% endif %} + {# Theme controls moved to sidebar #}
@@ -95,6 +81,21 @@ {% if show_diagnostics %}Diagnostics{% endif %} {% if show_logs %}Logs{% endif %} + {% if enable_themes %} +
+ +
+ + +
+
+ {% endif %}
{% block content %}{% endblock %} diff --git a/code/web/templates/decks/view.html b/code/web/templates/decks/view.html index 54937e1..066c171 100644 --- a/code/web/templates/decks/view.html +++ b/code/web/templates/decks/view.html @@ -8,11 +8,13 @@
Commander: {{ commander }}{% if tags and tags|length %} • Themes: {{ tags|join(', ') }}{% endif %}
This view mirrors the end-of-build summary. Use the buttons to download the CSV/TXT exports.
-
-
+
+
-
+ +
{% if summary %} {% if owned_set %} {% set ns = namespace(owned=0, total=0) %} diff --git a/code/web/templates/partials/deck_summary.html b/code/web/templates/partials/deck_summary.html index e2f492d..8a8e7bc 100644 --- a/code/web/templates/partials/deck_summary.html +++ b/code/web/templates/partials/deck_summary.html @@ -338,12 +338,13 @@
-
Test Hand
-
+
Test Hand + Draw 7 at random (no repeats except for basic lands). +
+
- Draw 7 at random (no repeats except for basic lands).
-
+
+