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

fix(ui): dimmed backdrop and a bigger close button on the advice panel #17

Merged
hermes merged 1 commits from fix/mobile-advice-popout into master 2026-11-09 21:14:56 +10:00
Conversation 2 Commits 1 Files Changed 1
+16 -1
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File 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; font-size: 1.1rem;
line-height: 1; line-height: 1;
cursor: pointer; 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 { .advice-pop__close:hover {
@@ -993,6 +998,16 @@ table.data .comment { color: var(--text-muted); font-size: .84rem; }
width: auto; 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 /* On a phone the panel is centred on the screen rather than
anchored to the trigger - there is not the room to float it anchored to the trigger - there is not the room to float it
beside the cell, and the trigger may be near the edge. */ beside the cell, and the trigger may be near the edge. */