Back button: move inline-right; show on deep-linked source views; clean ?source
* Position the in-feed Back button to the right of the view title (inline with it) instead of stacked above; the accent underline moves under the title text. * Deep-linking a source feed from an article page (/?source=<id>) now seeds the back history so the Back button appears (returns to Highlights). * Strip the ?source= param after consuming it (replaceState) so it can't linger and make the browser back/forward behave oddly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -341,6 +341,10 @@
|
|||||||
const srcParam = typeof location !== 'undefined' && new URLSearchParams(location.search).get('source');
|
const srcParam = typeof location !== 'undefined' && new URLSearchParams(location.search).get('source');
|
||||||
if (srcParam && /^\d+$/.test(srcParam)) {
|
if (srcParam && /^\d+$/.test(srcParam)) {
|
||||||
await select('source:' + srcParam);
|
await select('source:' + srcParam);
|
||||||
|
// Seed the back history so the in-feed Back returns to Highlights, and
|
||||||
|
// strip the ?source= param so it can't linger and confuse browser back.
|
||||||
|
navStack = [{ key: 'today', source: null }];
|
||||||
|
if (typeof history !== 'undefined') history.replaceState(null, '', location.pathname);
|
||||||
} else {
|
} else {
|
||||||
await select('today');
|
await select('today');
|
||||||
}
|
}
|
||||||
@@ -373,14 +377,16 @@
|
|||||||
{:else}
|
{:else}
|
||||||
{#key selected}
|
{#key selected}
|
||||||
<header class="view-head rise">
|
<header class="view-head rise">
|
||||||
|
<div class="vh-text">
|
||||||
|
<h1>{viewLabel}</h1>
|
||||||
|
{#if viewSubtitle}<p class="sub">{viewSubtitle}</p>{/if}
|
||||||
|
</div>
|
||||||
{#if navStack.length}
|
{#if navStack.length}
|
||||||
<button class="viewback" onclick={goBack} aria-label="Go back">
|
<button class="viewback" onclick={goBack} aria-label="Go back">
|
||||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||||
Back
|
Back
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
<h1>{viewLabel}</h1>
|
|
||||||
{#if viewSubtitle}<p class="sub">{viewSubtitle}</p>{/if}
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{#if selected === 'today'}
|
{#if selected === 'today'}
|
||||||
@@ -448,9 +454,14 @@
|
|||||||
<style>
|
<style>
|
||||||
main.container { padding-top: 6px; padding-bottom: 40px; min-height: 60vh; }
|
main.container { padding-top: 6px; padding-bottom: 40px; min-height: 60vh; }
|
||||||
|
|
||||||
.view-head { margin: 18px 0 18px; }
|
.view-head {
|
||||||
|
margin: 18px 0 18px; display: flex; align-items: flex-start;
|
||||||
|
justify-content: space-between; gap: 16px;
|
||||||
|
}
|
||||||
|
.view-head .vh-text { flex: 1; min-width: 0; }
|
||||||
.viewback {
|
.viewback {
|
||||||
display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
|
flex-shrink: 0; margin-top: 8px;
|
||||||
|
display: inline-flex; align-items: center; gap: 5px;
|
||||||
background: none; border: 1px solid var(--line); color: var(--accent-deep);
|
background: none; border: 1px solid var(--line); color: var(--accent-deep);
|
||||||
border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer;
|
border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer;
|
||||||
transition: border-color 0.14s ease;
|
transition: border-color 0.14s ease;
|
||||||
@@ -459,7 +470,7 @@
|
|||||||
.viewback svg { width: 16px; height: 16px; display: block; }
|
.viewback svg { width: 16px; height: 16px; display: block; }
|
||||||
.view-head h1 { font-size: clamp(2.1rem, 5.5vw, 2.8rem); line-height: 1.05; text-transform: capitalize; }
|
.view-head h1 { font-size: clamp(2.1rem, 5.5vw, 2.8rem); line-height: 1.05; text-transform: capitalize; }
|
||||||
.view-head .sub { margin: 8px 0 0; color: var(--muted); font-size: 1.02rem; }
|
.view-head .sub { margin: 8px 0 0; color: var(--muted); font-size: 1.02rem; }
|
||||||
.view-head::after {
|
.view-head .vh-text::after {
|
||||||
content: ''; display: block; width: 46px; height: 3px;
|
content: ''; display: block; width: 46px; height: 3px;
|
||||||
background: var(--accent); border-radius: 2px; margin-top: 14px; opacity: 0.8;
|
background: var(--accent); border-radius: 2px; margin-top: 14px; opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user