diff --git a/CLAUDE.md b/CLAUDE.md index 56b3863..d245d48 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -69,6 +69,24 @@ tests/e2e/run.sh [--filter ...] # publishes with WasmApplicationEnvironmentNam town's report (`out/client.jsonl`). - Cards carry `data-uri` (their ActivityPub id) and the empty feed `data-feed-empty`, for the tests. The feed renders only the cards near the view, so a test looks for recent cards, and counts what is loaded by `data-feed-count`. +- **Phones** (`Mobile/`, `Category=Mobile`): `Browser.Open(state, Phone)` opens Playwright's own device presets + (shipped in its package): 360×800, iPhone SE (3rd gen), Pixel 7, and the Pixel 7 held sideways, with touch, a coarse + pointer and reduced motion; a phone session fails at once if the page doesn't see a touch screen. + `SignIn.As(browser, persona, phone)` reuses the desktop sign-in, and any saved sign-in that has expired is renewed. + - `RouteSweepTests` measures every page, one screen at a time down its main scroller (`Mobile/fit.js`). It checks: + - sideways scroll, unless the strip is marked `data-scroll-x`; + - boxes past the screen's sides; + - open menus, sheets and dialogs that are cut or outside the screen; + - targets without a 44px hit area: hit-tested at their centre and 21px around it, so a crowding neighbour fails + them too. Inline links in post text, native media controls and disabled controls are exempt, a fixed floating + control covering a target doesn't count, and `data-touch-exempt` exempts one explicitly; + - control text under 12px. + + Screenshots, findings and a contact sheet go to `tests/e2e/out/mobile//`. Cells are `client.mobile.fit.*` and + `client.mobile.touch.*`, with the phone as the ref. + - `FlowTests` drives the narrowest phone through the menu, a dialog, a new post, a reply, a reaction, a deletion, the + full-screen globe, a phone held sideways, a tap into a thread, a picture and the Back button (`client.mobile.flow.*`). + - `DesktopUnchangedTests` holds desktop's control sizes. - **Perf** (`Perf/`, `Category=Perf`, left out of the normal runs with `--filter "Category!=Perf"`): `FeedPerfTests` scrolls load0's home (thousands of posts from SocialPub's `load.sh`) to 2000 posts and writes, per step, the time, DOM nodes, JS and .NET heaps and long tasks to `perf.json`. @@ -128,6 +146,57 @@ Ionicons 4.5 (`wwwroot/vendor/ionicons.min.css`, ``) is lo - Never write `@utility collapse`. It brings back Tailwind's own `collapse` utility (`visibility: collapse`), and every collapse disappears. +## Phones + +Below `md` the app is laid out for a phone, and a touch screen gets thumb-sized targets. The rules: +- **Width and pointer are separate.** + - Layout differences between a phone and a desktop use the width variants at the call site (`max-md:`, `md:`). + - How big a thing is to a finger uses the pointer: `Styles/touch.css` under `@media (pointer: coarse)`, and + `pointer-coarse:` at a call site. + - A mouse matches none of it, so desktop keeps daisyUI's sizes (`Mobile/DesktopUnchangedTests` holds them). + - A window at most 30rem tall (a phone held sideways) is the `short:` variant. +- **`touch.css`** is plain CSS in Tailwind's utilities layer, so like `neo.css` it beats daisyUI's sublayers. It sets + daisyUI's own size variables: + - buttons, tabs, inputs and selects are 44px tall; + - extra small buttons and the badges that act are 36px, with a transparent `::after` that reaches 44 (5px around + the padding box); + - checkboxes and radios are 24px, toggles and range thumbs 28; + - field text is 16px, so iOS doesn't zoom into a focused field. + + Its `touch-target` utility gives a small link or button a 44px hit area. It can't be used on something that clips + its own overflow (a `truncate`d name takes `pointer-coarse:py-3.5` instead), nor on a daisyUI tooltip, which draws + its arrow with `::after` (NerdTip takes minimum sizes). +- **Every target has a 44px hit area on touch,** with 8px between targets in a row (`pointer-coarse:gap-2`). The + phone sweep fails anything less. +- **Overlays on a phone rise from the bottom.** + - `DModal Placement="ResponsiveBottom"` is a sheet below md and a centred dialog from md. Every DModal has a visible + close button (`ShowClose`, named by `CloseText`). + - `DDropdown SheetOnNarrow` turns its content into a bottom sheet. + - `Components/PhoneSheet.razor` shows what opens in place on a desktop (the composer, a reply, a quote, an edit) as a + sheet on a phone. + - All are capped by `dvh`, and the app itself is `h-dvh`. +- **The Back button closes the newest open overlay** instead of leaving the page. + - Overlays register through `IDOverlayHost` (`Components/Daisy`, cascaded from `MainLayout`): + - `DModal` and `DDropdown` through the cascade; + - the nav menu, `PhoneSheet` and the full-screen globe through `Services/OverlayService.cs`. + - `main.js` marks a real Back press (a capture-phase `popstate`), since Blazor can't tell it from the app's own + navigation, which closes every overlay and goes on. + - No history entries are pushed. +- **What can't be undone asks first** through `Services/ConfirmService.cs` (`Ask`, shown by `ConfirmHost` in + `MainLayout`): deleting a post, taking it off a wall, muting, blocking, leaving a group, dropping a scheduled post and + signing out. +- **On a touch screen:** + - a tap on a post opens its thread (`main.js`, `data-thread` on the card, its `data-thread-link`), and cards are + pinned to the globe with a mouse only; + - a tap on a nerd-stats trigger opens its rows in a sheet (`NerdTip`, `AppStatusService.CanHover`); + - pictures open in `Components/MediaViewer.razor`. +- **The feed on a phone:** + - a card's actions are five equal cells (Reply, Boost, Favourite, React, More). Bookmark, the thread and the nerd + stats' Details are in More, and the author's picture is in the header; + - a new post starts from a floating button; + - the globe's banner opens full screen, and a phone held sideways opens it full screen from the tabs; + - the feed tabs show their names and fade at the edge where more wait (`edge-fade-x`, `data-scroll-x`). + ## daisyUI Blazor components (`Components/Daisy/`) Every daisyUI component has a `D`-prefixed wrapper (`DButton`, `DModal`, `DDropdown`, `DInput`, ...), grouped by @@ -183,6 +252,7 @@ supplies: messages. - `Components/ErrorViewer.razor` shows in-page errors: the cascading `EditContext`'s validation messages, `AdditionalError` and `AdditionalErrors`. +- `ConfirmService` asks before what can't be undone (see **Phones**). **HTTP (`Services/IHttpService.cs`).** - Routes are constants in `Models/APIs.cs` (b2b.next naming: `GET_`/`POST_`/`DELETE_`, `_M_` for routes built from diff --git a/Components/Admin/StatisticsPanel.razor b/Components/Admin/StatisticsPanel.razor index 56265d7..8c352f8 100644 --- a/Components/Admin/StatisticsPanel.razor +++ b/Components/Admin/StatisticsPanel.razor @@ -37,7 +37,7 @@ } else { - + @Localizer["Deliveries that arrived"] @(overview.DeliverySuccess is { } success ? $"{success * 100:0.#}%" : "—") diff --git a/Components/Content.razor b/Components/Content.razor index d1df3d2..9fc8522 100644 --- a/Components/Content.razor +++ b/Components/Content.razor @@ -131,7 +131,7 @@ {

- + @Localizer["On the wall of {0}", wall.Name]

@@ -697,7 +697,7 @@ @EventTime(happening) @foreach (var venue in happening.Places) { - @(venue.Name ?? venue.Address ?? venue.Url) + @(venue.Name ?? venue.Address ?? venue.Url) } @if (IsWebLink(happening.OnlineUrl)) { diff --git a/Components/Daisy/DataDisplay/DTable.razor b/Components/Daisy/DataDisplay/DTable.razor index 84d335b..cdc95f5 100644 --- a/Components/Daisy/DataDisplay/DTable.razor +++ b/Components/Daisy/DataDisplay/DTable.razor @@ -2,10 +2,11 @@ @* daisyUI Table: https://daisyui.com/components/table/ . ChildContent is the // markup. Class and the other attributes go on the ; with Scroll (the default) it sits in an overflow-x-auto div, whose classes - are WrapperClass (pinned rows need it to have a height, e.g. h-96). *@ + are WrapperClass (pinned rows need it to have a height, e.g. h-96); it is marked as a strip that scrolls sideways on + purpose (data-scroll-x), which the phone tests allow. *@ @if (Scroll) { -
+
@ChildContent
} diff --git a/Components/ToastHost.razor b/Components/ToastHost.razor index 17fc2ad..aa0bed3 100644 --- a/Components/ToastHost.razor +++ b/Components/ToastHost.razor @@ -3,7 +3,8 @@ @* Shows ToastService's messages at the bottom end of the screen. Placed once, in MainLayout. *@ @if (Toast.Messages.Count > 0) { - + @* (on a phone above the round New post button) *@ + @foreach (var message in Toast.Messages) {