sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-04-27 15:07:43 +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 = ` $app.innerHTML = `
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="headerLeft"> <!-- Row 1 -->
<h1 class="h1">Brennan's Spirit Tracker</h1> <div class="headerRow1">
<div class="small">Search name / url / sku / store</div> <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 class="headerRight headerButtons">
<div id="stores" class="storeBar"></div> <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> </div>
<div class="headerRight"> <!-- Row 2 -->
<a class="btn btnWide" href="#/link" style="text-decoration:none;">Link SKUs</a> <div class="headerRow2">
<div class="storeBarWrap">
<div id="stores" class="storeBar"></div>
</div>
</div> </div>
</div> </div>
@ -30,6 +37,7 @@ export function renderSearch($app) {
</div> </div>
`; `;
const $q = document.getElementById("q"); const $q = document.getElementById("q");
const $results = document.getElementById("results"); const $results = document.getElementById("results");
const $stores = document.getElementById("stores"); 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; padding: 18px;
} }
/* header becomes 2 rows */
.header { .header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}
.headerRow1 {
display: flex; display: flex;
gap: 12px; gap: 12px;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
margin-bottom: 14px; flex-wrap: wrap;
flex-wrap: wrap; /* keeps Link SKUs comfy on small screens */
} }
.headerLeft { .headerRow2 {
flex: 1 1 520px; width: 100%;
min-width: 240px;
} }
.headerRight { .headerButtons {
flex: 0 0 auto; display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
} }
/* disabled button styling */
.btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.h1 { .h1 {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;