sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-03-25 09:25:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX Improvements

Browse source
This commit is contained in:
Brennan Wilkes (Text Groove) 2026-02-02 18:57:17 -08:00
parent 26fbccebc3
commit 3bcffdeb00
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
viz/app/search_page.js
View file

@ -97,9 +97,17 @@ export function renderSearch($app) {
return; return;
} }
const half = Math.ceil(stores.length / 2);
$stores.innerHTML = stores $stores.innerHTML = stores
.map((s) => `<a class="storeBtn" href="#/store/${encodeURIComponent(s)}">${esc(s)}</a>`) .map((s, i) => {
const btn = `<a class="storeBtn" href="#/store/${encodeURIComponent(s)}">${esc(s)}</a>`;
const brk = i === half - 1 && stores.length > 1 ? `<span class="storeBreak" aria-hidden="true"></span>` : "";
return btn + brk;
})
.join(""); .join("");
} }
function renderAggregates(items) { function renderAggregates(items) {

13
viz/style.css
View file

@ -310,10 +310,9 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; }
gap:8px; gap:8px;
flex-wrap:wrap; flex-wrap:wrap;
width:100%; width:100%;
justify-content:space-evenly; justify-content: space-between; /* spread each row to fill */
} }
.storeBtn { .storeBtn {
border: 1px solid var(--border); border: 1px solid var(--border);
background: #0f1318; background: #0f1318;
@ -325,6 +324,16 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; }
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.storeBreak {
flex-basis: 100%;
width: 0;
height: 0;
}
/* let mobile wrap naturally */
@media (max-width: 640px) {
.storeBreak { display: none; }
}
.storeBtn:hover { .storeBtn:hover {
border-color: #2f3a46; border-color: #2f3a46;