From fe84ae5c6672f822bd37984692a70612e0914bc0 Mon Sep 17 00:00:00 2001 From: mfwadejr <125498560+mfwadejr@users.noreply.github.com> Date: Sat, 29 Aug 2026 20:32:32 -0400 Subject: [PATCH] Clarify account, theme, and pagination controls --- public/app.js | 2 +- public/index.html | 2 +- public/theme.css | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/public/app.js b/public/app.js index 62e4ce3..1f4f6af 100644 --- a/public/app.js +++ b/public/app.js @@ -116,7 +116,7 @@ function showPasswordChange(user){ state.user=user;document.body.className="auth-required";$("#authBody").innerHTML=`

Change your password

Your temporary password must be replaced before you can use Stockroom.

Passwords must contain at least 8 characters.
`; $("#passwordForm").onsubmit=async e=>{e.preventDefault();try{await api("/api/auth/change-password",{method:"POST",body:JSON.stringify(Object.fromEntries(new FormData(e.currentTarget)))});await enterApp({...user,mustChangePassword:false});}catch(error){toast(error.message);}};$("#changeLogout").onclick=logout; } -async function enterApp(user){state.user=user;document.body.className=user.role==="admin"?"role-admin":"role-readonly";const account=$("#currentUser"),menu=$(".user-menu");account.innerHTML=`${esc(user.username)}${user.role==="admin"?"Admin":"Read-Only"}`;account.style.width="96px";account.style.textAlign="right";menu.style.marginLeft="auto";menu.style.minWidth="210px";menu.style.justifyContent="flex-end";const adminTab=document.querySelector('[data-tab="admin"]');adminTab.hidden=user.role!=="admin";adminTab.style.display=user.role==="admin"?"":"none";document.querySelectorAll(".edit-only").forEach(el=>{el.hidden=user.role!=="admin";el.style.display=user.role==="admin"?"":"none";});if(user.role!=="admin"&&state.tab==="admin")state.tab="available";await load();} +async function enterApp(user){state.user=user;document.body.className=user.role==="admin"?"role-admin":"role-readonly";const account=$("#currentUser"),menu=$(".user-menu");account.innerHTML=`Logged in as${esc(user.username)}${user.role==="admin"?"Admin":"Read-Only"}`;account.style.width="104px";account.style.textAlign="right";menu.style.marginLeft="auto";menu.style.minWidth="280px";menu.style.justifyContent="flex-end";const adminTab=document.querySelector('[data-tab="admin"]');adminTab.hidden=user.role!=="admin";adminTab.style.display=user.role==="admin"?"":"none";document.querySelectorAll(".edit-only").forEach(el=>{el.hidden=user.role!=="admin";el.style.display=user.role==="admin"?"":"none";});if(user.role!=="admin"&&state.tab==="admin")state.tab="available";await load();} async function logout(){try{await api("/api/auth/logout",{method:"POST",body:"{}"});}catch{}showLogin();} async function initialize(){try{const response=await fetch("/api/auth/me"),data=await response.json();if(!response.ok)return showLogin();data.mustChangePassword?showPasswordChange(data):await enterApp(data);}catch{showLogin("Unable to connect to Stockroom.");}} document.querySelectorAll("[data-tab]").forEach(b=>b.onclick=()=>{state.tab=b.dataset.tab;state.page=1;render();}); diff --git a/public/index.html b/public/index.html index bf74914..882173b 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ vSeeBox Stockroom -
SStockroom
SStockroom
+
SStockroom
SStockroom

Inventory Overview

Available products0Ready to sell
Sold this month0No sales recorded
Inventory value$0Based on purchase cost
diff --git a/public/theme.css b/public/theme.css index 4a5cc10..ce56259 100644 --- a/public/theme.css +++ b/public/theme.css @@ -28,7 +28,8 @@ th{background:var(--surface-table);color:var(--muted-2)}th,td,.records nav,.back .auth-screen{background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 10%,var(--page)),var(--page))}.auth-card{box-shadow:0 22px 60px var(--shadow)} dialog{max-height:min(90dvh,900px);overflow:auto}dialog::backdrop{background:#050914aa}.close{color:var(--muted)} #toast{background:var(--text-strong);color:var(--surface);box-shadow:0 12px 30px var(--shadow)} -.user-menu select{width:118px;border:1px solid var(--border-strong);border-radius:9px;padding:9px 30px 9px 10px;font-size:12px;font-weight:650} +.theme-control{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:11px}.user-menu select{width:92px;border:1px solid var(--border-strong);border-radius:9px;padding:9px 26px 9px 9px;font-size:12px;font-weight:650} +#pagination button{background:var(--surface-soft);border-color:var(--border-strong);color:var(--text)}#pagination button:not(:disabled):hover{background:var(--blue-soft);color:var(--blue-text)}#pagination button:disabled{background:var(--surface-soft);color:var(--text);opacity:1;cursor:not-allowed} button,.button,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:2px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} @media (pointer:coarse){button,.button,.upload-backup,.user-menu select{min-height:44px}} @@ -38,7 +39,7 @@ button,.button,input,select,textarea{-webkit-tap-highlight-color:transparent}but } @media (max-width:820px){ header{position:relative;display:grid;grid-template-columns:auto 1fr auto;height:auto;padding:12px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));gap:10px} - header .brand{grid-column:1}.user-menu{grid-column:2/4;grid-row:1;margin-left:auto!important;min-width:0!important;padding-left:0;border-left:0}.user-menu #currentUser{display:grid!important;width:auto!important;min-width:70px} + header .brand{grid-column:1}.user-menu{grid-column:2/4;grid-row:1;margin-left:auto!important;min-width:0!important;padding-left:0;border-left:0}.user-menu #currentUser{display:grid!important;width:auto!important;min-width:78px}.theme-control{grid-template-columns:1fr}.theme-control>span{font-size:10px;text-align:center} header #search{grid-column:1/-1;grid-row:2;order:initial}.actions{grid-column:1/-1;grid-row:3;width:100%;margin:0}.actions button{font-size:14px!important;flex:1}.actions button::first-letter{font-size:inherit!important} main{width:min(100% - 24px,1400px);margin:14px auto 28px}.intro h1{font-size:23px}.intro>span{font-size:12px}.stats{gap:10px;margin:14px 0}.stats article{padding:16px}.stats strong{font-size:26px} .records{overflow:visible}.records nav{display:grid;grid-template-columns:1fr 1fr;overflow:visible;height:auto;padding:0 10px;gap:0}.records nav .tab{width:100%;height:50px;white-space:nowrap;padding-inline:6px;font-size:12px}.storage-status{grid-column:1/-1;min-width:100%;margin:0!important;padding:10px 4px!important;border-top:1px solid var(--border)} @@ -49,7 +50,7 @@ button,.button,input,select,textarea{-webkit-tap-highlight-color:transparent}but .auth-screen{padding:16px}.auth-card{padding:25px 20px}.auth-brand span{display:inline} } @media (max-width:430px){ - .user-menu{width:100%;justify-content:flex-end!important}.user-menu select{width:88px;max-width:88px;padding-inline:8px}.user-menu #currentUser small{font-size:10px}.user-menu #logout{padding-inline:10px} + .user-menu{width:100%;justify-content:flex-end!important}.user-menu select{width:72px;max-width:72px;padding-inline:7px}.user-menu #currentUser small{font-size:10px}.user-menu #logout{padding-inline:10px} .intro{align-items:flex-start}.intro h1{margin:8px 0}.intro>span{padding:7px 8px}.stats{grid-template-columns:1fr}.stats article{grid-template-columns:1fr auto}.stats article strong{grid-column:2;grid-row:1/3}.stats article small{grid-column:1} td{grid-template-columns:82px 1fr}.backup-list article>div:last-child,.user-list article>div:last-child{grid-template-columns:1fr} }