diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.js | 19 | ||||
| -rw-r--r-- | src/i18n.js | 3 | ||||
| -rw-r--r-- | src/style.css | 13 |
3 files changed, 34 insertions, 1 deletions
@@ -3213,7 +3213,7 @@ function settingsTab() { // matters if the phone is lost tonight case 'wallet': if (ui.delAcct && a) return deleteAccountView(a); - return page(a ? [recoveryCard(a), walletNameCard(a), pubkeyCard(a), historyExportCard(), deleteAccountCard(a)] : []); + return page(a ? [recoveryCard(a), balanceSettingsCard(a), walletNameCard(a), pubkeyCard(a), historyExportCard(), deleteAccountCard(a)] : []); case 'payments': return page(featureAll('settingsCards').reverse()); case 'pos': return page(featureAll('posSettingsCards').reverse()); // the till's own card first, then the terminal's case 'network': return page([networkCard(), explorerCard()]); // an old bookmark of the tile; the cards live under Advanced now @@ -3906,6 +3906,23 @@ function recoveryCard(a) { ); } +// The balance cards' gears, reachable from Settings → Wallet too: "I simply +// cannot find this option" (Nils, 2026-11-12) about the Spending card's gear. +function balanceSettingsCard(a) { + if (a.id !== activeId) return null; + const views = a.kind ? [a.kind] : spendingActive() ? ['spending', 'savings'] : ['savings']; + const row = (view) => h('button', { + class: 'btn-ghost btn-block balance-settings-row', 'data-view': view, + style: 'display:flex;align-items:center;gap:10px;text-align:left;padding:10px 4px', + onClick: () => openWalletSettings(view), + }, + h('span', { style: 'display:flex;color:var(--muted)', html: GEAR_ICON(18) }), + h('span', { class: 'col', style: 'flex:1;gap:2px' }, + h('span', { style: 'font-weight:600' }, viewLabel(a, view)), + h('span', { class: 'small muted' }, t(view === 'spending' ? 'spendingSettingsDesc' : 'savingsSettingsDesc'))), + h('span', { class: 'muted' }, '›')); + return h('div', { class: 'card col', style: 'gap:4px' }, h('h3', {}, t('balanceSettingsTitle')), ...views.map(row)); +} function walletNameCard(a) { const saveName = () => { const v = (ui.editLabel || '').trim(); diff --git a/src/i18n.js b/src/i18n.js index 1d14a36..194ce40 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -1224,6 +1224,9 @@ const STR = { explorerUrlHint: 'Esplora / electrs REST base, e.g. https://mempool.space/api', walletName: 'Account name', walletSettings: 'Account settings', + balanceSettingsTitle: 'Balance settings', + spendingSettingsDesc: 'Coins, renewals, who holds them, moving them out', + savingsSettingsDesc: 'Lock, password, recovery phrase, public key', securityTitle: 'Security', walletSettingsDesc: 'Name, recovery phrase, public key, and auto-logout for this account.', autolockTitle: 'Log out automatically', diff --git a/src/style.css b/src/style.css index 803979f..ec9fd18 100644 --- a/src/style.css +++ b/src/style.css @@ -95,6 +95,8 @@ * { box-sizing: border-box; } html { + /* a post scrolled into view lands below the sticky top bar */ + scroll-padding-top: 72px; /* Reserve the scrollbar's gutter always, so it doesn't appear the instant the history list fills the page and shrink the viewport — that width change re-centered the balance carousel's snapped card, the "slight move @@ -176,6 +178,17 @@ input { scroll-margin-top: 12px; } .logo-full { height: 40px; flex: none; color: var(--ink); display: grid; place-items: center; } .logo-full svg { height: 40px; width: auto; display: block; } .brand h1 { font-size: 19px; } +/* The top bar (logo, search, settings, avatar) stays on screen while the + page scrolls under it (Adam, 2026-11-12). A frosted strip the width of the + column, padded out by the same amount it's pulled in, so the layout at + rest doesn't move; the safe-area inset keeps it clear of a notch. */ +.brand-header { + position: sticky; top: 0; z-index: 30; + margin: -8px -16px; padding: 8px 16px; + padding-top: max(8px, env(safe-area-inset-top)); + background: color-mix(in srgb, var(--bg) 84%, transparent); + -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); +} .badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; |