romfast/gomag-vending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(design): FINDING-001 — mobile segmented control uses amber accent

Browse Source 
Mobile segmented filter buttons used Bootstrap btn-primary (blue) for
active state. Per DESIGN.md two-accent system, state indicators use
amber. Added .seg-active class with --accent color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-27 11:52:15 +00:00
parent a8292c2ef2
commit aacca13b85
3 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
api/app/static/css/style.css
View File

@@ -849,6 +849,11 @@ tr.mapping-deleted td {
/* ── Mobile segmented control (hidden on desktop) ── */ /* ── Mobile segmented control (hidden on desktop) ── */
.mobile-seg { display: none; } .mobile-seg { display: none; }
.seg-active {
background: var(--accent) !important;
border-color: var(--accent) !important;
color: #fff !important;
}
/* ── Bottom nav (mobile) ─────────────────────────── */ /* ── Bottom nav (mobile) ─────────────────────────── */
.bottom-nav { .bottom-nav {

2
api/app/static/js/shared.js
View File

@@ -194,7 +194,7 @@ function renderMobileSegmented(containerId, pills, onSelect) {
const btnStyle = 'font-size:0.75rem;height:32px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;flex:1;padding:0 0.25rem'; const btnStyle = 'font-size:0.75rem;height:32px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;flex:1;padding:0 0.25rem';
container.innerHTML = `<div class="btn-group btn-group-sm w-100">${pills.map(p => { container.innerHTML = `<div class="btn-group btn-group-sm w-100">${pills.map(p => {
const cls = p.active ? 'btn btn-primary' : 'btn btn-outline-secondary'; const cls = p.active ? 'btn seg-active' : 'btn btn-outline-secondary';
const countColor = (!p.active && p.colorClass) ? ` class="${p.colorClass}"` : ''; const countColor = (!p.active && p.colorClass) ? ` class="${p.colorClass}"` : '';
return `<button type="button" class="${cls}" style="${btnStyle}" data-seg-value="${esc(p.value)}">${esc(p.label)} <b${countColor}>${p.count}</b></button>`; return `<button type="button" class="${cls}" style="${btnStyle}" data-seg-value="${esc(p.value)}">${esc(p.label)} <b${countColor}>${p.count}</b></button>`;
}).join('')}</div>`; }).join('')}</div>`;

4
api/app/templates/base.html
View File

@@ -19,7 +19,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
{% set rp = request.scope.get('root_path', '') %} {% set rp = request.scope.get('root_path', '') %}
<link href="{{ rp }}/static/css/style.css?v=18" rel="stylesheet"> <link href="{{ rp }}/static/css/style.css?v=19" rel="stylesheet">
</head> </head>
<body> <body>
<!-- Top Navbar (hidden on mobile via CSS) --> <!-- Top Navbar (hidden on mobile via CSS) -->
@@ -140,7 +140,7 @@
<script>window.ROOT_PATH = "{{ rp }}";</script> <script>window.ROOT_PATH = "{{ rp }}";</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ rp }}/static/js/shared.js?v=14"></script> <script src="{{ rp }}/static/js/shared.js?v=15"></script>
<script> <script>
// Dark mode toggle // Dark mode toggle
function toggleDarkMode() { function toggleDarkMode() {