thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

A ticked checkbox is filled and raised, and a file input is a thumb-sized neo field
Build / Build (push) Successful in 57s
Details
Deploy / decepub.thepra.dev (push) Successful in 1m54s
Details

Browse Source 
daisyUI fills a ticked checkbox only for a colour variant, so without one it drew a tick on nothing: a checkbox without a
colour now takes the primary colour, filled and raised like a button once ticked (an inset well while not), and a
radio's dot is the primary colour. A file input's own button (Choose File, Browse…) is raised like the app's buttons
instead of daisyUI's flat neutral block, and on a touch screen the file input is 44px tall like the other fields; it had
stayed at its small 32px. Mobile/ControlsTests opens Settings' Data import/export on the narrowest phone, which the
sweep (sections closed) never reached, and photographs it in both themes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed 2026-10-07 19:52:26 +02:00
1 parent 356ea7b430
commit 4da6a398d7
4 files changed
+97 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

CLAUDE.md
+4 -1
View File
@@ -154,6 +154,9 @@ Ionicons 4.5 (`wwwroot/vendor/ionicons.min.css`, `<i class="ion-md-...">`) is lo
in sublayers of `utilities`, so these overrides beat **every** daisyUI rule. Each override must exclude the
daisyUI variants it shouldn't touch, e.g. `:not(:where(.btn-ghost, .btn-link, ...))`, and call sites drop a neo
shadow with `shadow-none!`.
- Selectors are an inset well; a checked checkbox is filled and raised like a primary button (daisyUI fills one only
for a colour variant, and without one drew a tick on nothing), and a checked radio's dot is the primary colour. A
file input's own button (Choose File, Browse…) is raised like the app's buttons.
- Never write `@utility collapse`. It brings back Tailwind's own `collapse` utility (`visibility: collapse`), and
every collapse disappears.
@@ -168,7 +171,7 @@ Below `md` the app is laid out for a phone, and a touch screen gets thumb-sized
- 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;
- buttons, tabs, inputs, selects and file inputs 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;
Styles/neo.css
+35 -2
View File
@@ -210,21 +210,54 @@
&:not(:where(.file-input-ghost, .file-input-neutral, .file-input-primary, .file-input-secondary, .file-input-accent, .file-input-info, .file-input-success, .file-input-warning, .file-input-error, .validator:user-invalid, [aria-invalid="true"])) {
border-color: transparent;
/* its button (Choose File, Browse…) is a raised button like every other, not daisyUI's flat neutral block; a
small gap keeps its shadow inside the well */
&::file-selector-button {
margin-block: .25rem;
margin-inline-start: .25rem;
height: calc(100% - .5rem);
border: none;
border-radius: calc(var(--radius-box) - .25rem);
background-color: var(--color-base-100);
background-image: linear-gradient(145deg, color-mix(in oklab, var(--color-base-100), white var(--neo-lift)), color-mix(in oklab, var(--color-base-100), black var(--neo-sink)));
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
color: var(--color-base-content);
font-weight: 600;
}
}
}
/* Selectors: an inset well while unchecked; once checked they keep daisyUI's filled look. */
/* Selectors: an inset well while unchecked. A checked box is filled like a button of the primary colour, raised, its
tick in the colour's content (daisyUI fills one only for a colour variant: without, a tick on nothing); a checked
radio keeps the well, its dot the primary colour. A colour variant keeps its own colour. */
@utility checkbox {
&:not(:where(.checkbox-neutral, .checkbox-primary, .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-error)) {
--input-color: var(--color-primary);
color: var(--color-primary-content);
}
&:not(:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"], :disabled)) {
border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
background-origin: border-box;
box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
}
&:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"]):not(:disabled) {
border-color: transparent;
background-image: linear-gradient(145deg, color-mix(in oklab, var(--input-color), white var(--neo-lift)), color-mix(in oklab, var(--input-color), black var(--neo-sink)));
background-origin: border-box;
box-shadow: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
}
}
@utility radio {
&:not(:where(:checked, [aria-checked="true"], :disabled)) {
&:not(:where(.radio-neutral, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error)) {
--input-color: var(--color-primary);
}
&:not(:where(:disabled)) {
border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
background-origin: border-box;
Styles/touch.css
+2 -1
View File
@@ -89,7 +89,8 @@
}
.input:not(.input-lg, .input-xl),
.select:not(.select-lg, .select-xl) {
.select:not(.select-lg, .select-xl),
.file-input:not(.file-input-lg, .file-input-xl) {
--size: 2.75rem;
}
tests/e2e/Mobile/ControlsTests.cs
+56
View File
@@ -0,0 +1,56 @@
using decePubClient.E2E.Support;
using Microsoft.Playwright;
namespace decePubClient.E2E.Mobile
{
// Controls the sweep doesn't reach, since it measures pages with their sections closed: Settings' Data import/export
// opened on the narrowest phone, its file inputs and checkboxes thumb-sized and drawn like the rest of the app (a
// ticked box filled, not a tick on nothing), in both themes. Photos go to tests/e2e/out/mobile-controls/.
[Trait("Category", "Mobile")]
public sealed class ControlsTests(Browser browser)
{
static readonly Phone Phone = Phone.Narrow360;
static readonly string OutDir = Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "out", "mobile-controls");
[Fact]
public async Task Data_transfer_controls_are_thumb_sized_and_drawn_like_the_rest()
{
await using var session = await SignIn.As(browser, Pasture.Personas().First(), Phone);
var page = session.Page;
await Results.Cell("client.mobile.controls.data-transfer", "privapub", Phone.Key, async () =>
{
await page.GotoAsync($"{Pasture.Site}/settings");
var header = page.Locator(".collapse-title", new() { HasText = "Data import/export" }).First;
await header.TapAsync();
var archive = page.Locator("[data-archive]");
await archive.WaitForAsync(new() { Timeout = 30000 });
Fit.AssertTouchable(await Fit.Now(page, "[data-archive]"));
Fit.AssertTouchable(await Fit.Now(page, "[data-import]"));
// a ticked box is filled: daisyUI leaves it transparent unless a colour asks otherwise
var ticked = archive.Locator("input[type=checkbox]:checked").First;
var fill = await ticked.EvaluateAsync<string>("e => getComputedStyle(e).backgroundColor");
Assert.False(fill is "transparent" or "rgba(0, 0, 0, 0)", $"a ticked checkbox is drawn on nothing ({fill})");
// a file input is as tall as the other fields on a touch screen
foreach (var input in await page.Locator("[data-archive] input[type=file], [data-import] input[type=file]").AllAsync())
Assert.True((await input.BoundingBoxAsync())!.Height >= 44, $"a file input is {(await input.BoundingBoxAsync())!.Height}px tall: "
+ await input.EvaluateAsync<string>("e => { const s = getComputedStyle(e); return `${e.className} --size=${s.getPropertyValue('--size')} height=${s.height} coarse=${matchMedia('(pointer: coarse)').matches}`; }"));
// photos the size of the screen: one of an element taller than the screen makes Playwright resize the page,
// which drops the touch emulation for what comes after
Directory.CreateDirectory(OutDir);
foreach (var theme in new[] { "neo-dark", "neo-light" })
{
await page.EvaluateAsync("t => document.documentElement.setAttribute('data-theme', t)", theme);
foreach (var (part, what) in new[] { ("archive", "[data-archive-make]"), ("restore", "input[data-archive-file]"), ("csv", "[data-import]") })
{
await page.Locator(what).First.EvaluateAsync("e => e.scrollIntoView({ block: 'start' })");
await page.ScreenshotAsync(new() { Path = Path.Combine(OutDir, $"{part}-{theme}.png"), Animations = ScreenshotAnimations.Disabled });
}
}
await session.AssertGuards();
}, page);
}
}
}