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;
}
const half = Math.ceil(stores.length / 2);
$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("");
}
function renderAggregates(items) {

13
viz/style.css
View file

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