From 7aa54054e358db271b35d801a45f916b008cf5b9 Mon Sep 17 00:00:00 2001 From: Bakhomious Basta Date: Fri, 30 Oct 2026 04:12:08 +0100 Subject: [PATCH 1/4] refactor(web): share a page's status line in one global class The PRs, Time, Nudge and Todos pages each drew the line that takes their sections' place from a copy of the same rules, and the GitHub page would have made a fifth. They now use .page-status from styles/page.css. On phones, the Nudge page's line leaves a section's 48 px below it, since its copy lacked the phone rule (decision 206). --- apps/web/src/main.ts | 1 + apps/web/src/nudge/NudgePage.svelte | 10 +--------- apps/web/src/pulls/PullsPage.svelte | 16 +--------------- apps/web/src/styles/page.css | 14 ++++++++++++++ apps/web/src/time/TimePage.svelte | 18 +++--------------- apps/web/src/time/TimePage.test.ts | 9 ++++++--- apps/web/src/todos/TodosPage.svelte | 11 ++--------- docs/plan.md | 16 +++++++++++++--- 8 files changed, 41 insertions(+), 54 deletions(-) create mode 100644 apps/web/src/styles/page.css diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts index 4971f9a..6809e1b 100644 --- a/apps/web/src/main.ts +++ b/apps/web/src/main.ts @@ -9,6 +9,7 @@ import './styles/list.css'; import './styles/chip.css'; import './styles/icon-button.css'; import './styles/dialog.css'; +import './styles/page.css'; import App from './App.svelte'; import { applyChoice, loadChoice } from './shell/theme'; diff --git a/apps/web/src/nudge/NudgePage.svelte b/apps/web/src/nudge/NudgePage.svelte index d2ce143..b1f9dad 100644 --- a/apps/web/src/nudge/NudgePage.svelte +++ b/apps/web/src/nudge/NudgePage.svelte @@ -28,13 +28,5 @@ onMount(() => { {:else if loaded.kind === 'failed'} -

Couldn't load the questions.

+

Couldn't load the questions.

{/if} - - diff --git a/apps/web/src/pulls/PullsPage.svelte b/apps/web/src/pulls/PullsPage.svelte index d2429a5..0499a93 100644 --- a/apps/web/src/pulls/PullsPage.svelte +++ b/apps/web/src/pulls/PullsPage.svelte @@ -22,7 +22,7 @@ onMount(() => { Pull requests {#if mine.kind === 'off' && reviews.kind === 'off'} -

Bitbucket isn't set up.

+

Bitbucket isn't set up.

{:else} { failed="Couldn't load the review requests." /> {/if} - - diff --git a/apps/web/src/styles/page.css b/apps/web/src/styles/page.css new file mode 100644 index 0000000..cace676 --- /dev/null +++ b/apps/web/src/styles/page.css @@ -0,0 +1,14 @@ +/* A page's status line in place of its sections, such as "Bitbucket isn't set up." (decision 206): muted, with the + space that a section leaves under it. */ +.page-status { + margin: 0; + padding: 0 var(--page-padding) 64px; + color: var(--ink-muted); + overflow-wrap: anywhere; +} + +@media (max-width: 700px) { + .page-status { + padding-bottom: 48px; + } +} diff --git a/apps/web/src/time/TimePage.svelte b/apps/web/src/time/TimePage.svelte index d177919..4bbecee 100644 --- a/apps/web/src/time/TimePage.svelte +++ b/apps/web/src/time/TimePage.svelte @@ -29,13 +29,13 @@ onMount(() => { Time {#if report.kind === 'off'} -

Jira isn't set up.

+

Jira isn't set up.

{:else if report.kind === 'failed'} -

Couldn't load the time report.

+

Couldn't load the time report.

{:else if report.kind === 'loaded'} {@const { days, week, searched, failure } = report.snapshot} {#if failure} -

+

The last search failed: {failure}. {#if days && searched} These hours are from . @@ -59,24 +59,12 @@ onMount(() => {