Andreas/mtg_python_deckbuilder
1
0
Fork 0
mirror of https://github.com/mwisnowski/mtg_python_deckbuilder.git synced 2025-09-22 04:50:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
matt 2025-09-11 14:54:35 -07:00
parent 07a92eb47f
commit f28f8e6b4f
9 changed files with 188 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

94
code/web/static/styles.css
View file

@ -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; }
}