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:51:56 -08:00
parent 30892abed6
commit b30c8a4bae
2 changed files with 38 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
viz/app/search_page.js
View file

@ -9,17 +9,24 @@ export function renderSearch($app) {
$app.innerHTML = `
<div class="container">
<div class="header">
<div class="headerLeft">
<h1 class="h1">Brennan's Spirit Tracker</h1>
<div class="small">Search name / url / sku / store</div>
<!-- Row 1 -->
<div class="headerRow1">
<div class="headerLeft">
<h1 class="h1">Brennan's Spirit Tracker</h1>
<div class="small">Search name / url / sku / store</div>
</div>
<div class="storeBarWrap">
<div id="stores" class="storeBar"></div>
<div class="headerRight headerButtons">
<a class="btn btnWide" href="#/link" style="text-decoration:none;">Link SKUs</a>
<button class="btn btnWide" type="button" disabled>Email Notifications</button>
</div>
</div>
<div class="headerRight">
<a class="btn btnWide" href="#/link" style="text-decoration:none;">Link SKUs</a>
<!-- Row 2 -->
<div class="headerRow2">
<div class="storeBarWrap">
<div id="stores" class="storeBar"></div>
</div>
</div>
</div>
@ -30,6 +37,7 @@ export function renderSearch($app) {
</div>
`;
const $q = document.getElementById("q");
const $results = document.getElementById("results");
const $stores = document.getElementById("stores");

30
viz/style.css
View file

@ -32,24 +32,40 @@ a.skuLink:hover { text-decoration: underline; cursor: pointer; }
padding: 18px;
}
/* header becomes 2 rows */
.header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}
.headerRow1 {
display: flex;
gap: 12px;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 14px;
flex-wrap: wrap; /* keeps Link SKUs comfy on small screens */
flex-wrap: wrap;
}
.headerLeft {
flex: 1 1 520px;
min-width: 240px;
.headerRow2 {
width: 100%;
}
.headerRight {
flex: 0 0 auto;
.headerButtons {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* disabled button styling */
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.h1 {
font-size: 18px;
font-weight: 700;