armistace/beer_data
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: armistace/beer_data:af28ecbd1bf609b0915ea1658fcb2c5e7e3c4a80
Branches Tags
armistace/beer_data:master armistace/beer_data:dev
...
compare: armistace/beer_data:81b2a17b372a8783f2296f1af594072596b144cb
Branches Tags
armistace/beer_data:master armistace/beer_data:dev
2 Commits
af28ecbd1b ... 81b2a17b37
Author SHA1 Message Date
hermes 81b2a17b37 fix(ui): dimmed backdrop and a bigger close button on the advice panel (#17)
Build and Push Image / Build and push image (push) Successful in 3m39s
Details 
fix(ui): dimmed backdrop and a bigger close button on the advice panel (#17)
 2026-11-09 21:14:55 +10:00
hermes 2600622af8 fix(ui): dimmed backdrop and a bigger close button on the advice panel 
The panel read as floating in the page rather than sitting over it, and
the close button was a 26px target - too small to hit reliably on a
phone.

The backdrop is a large spread shadow rather than a pseudo element,
which would paint behind the panel's own background.

Also: Escape closes the panel, clicking away closes it, and the button
is a real button so it works with a keyboard.
 2026-11-09 21:14:33 +10:00
1 changed files with 16 additions and 1 deletions
Expand all files Collapse all files
src/flask/static/css/app.css
+16 -1
View File
@@ -965,7 +965,12 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; }
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0 .15rem;
/* A 44px touch target, which is the smallest that is comfortable
on a phone. The negative margin pulls the panel's padding back
in so the button does not push the layout around, but the
padding is still what makes it easy to hit. */
padding: .9rem;
margin: -.9rem -.9rem -.9rem 0;
}
.advice-pop__close:hover {
@@ -993,6 +998,16 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; }
width: auto;
}
/* A dimmed backdrop, so the panel reads as sitting over the page
rather than floating in it.
A large spread shadow is used rather than a pseudo element, which
would paint behind the panel's own background. */
.advice-pop {
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55),
0 12px 32px rgba(0, 0, 0, .55);
}
/* On a phone the panel is centred on the screen rather than
anchored to the trigger - there is not the room to float it
beside the cell, and the trigger may be near the edge. */