cf7/aukpad
cf7/aukpad
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 5 Packages 1 Wiki Activity Actions

ui:CHANGE header in mobile view to shiw pad_id at any point

Browse source
This commit is contained in:
Caffeine Fueled 2026-09-04 10:19:28 +02:00
parent e8aaceb86c
commit 405d60fa27
Signed by: cf7
GPG key ID: CA295D643074C68C
1 changed files with 6 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app.py
View file

@ -328,27 +328,18 @@ HTML = """<!doctype html>
#auth-submit { width:100%; padding:.45rem; background:#000; color:#fff; border:none;
border-radius:4px; font-size:.95rem; cursor:pointer; }
/* --- Narrow screens: keep the header on one row by shedding text, not controls. --- */
/* --- Narrow screens: header stacks into two rows, pad name + status above,
controls below. Giving #meta a 100% flex-basis is what forces the wrap;
header's existing gap:.5rem then doubles as the row gap. Because the
controls get a full row, nothing has to be hidden or narrowed to fit. --- */
@media (max-width: 640px) {
body { padding:.5rem; }
/* Hide the word but keep the dot. It is a ::before on #status itself, sized in em,
so it must be re-declared in rem to survive font-size:0. Doing it this way avoids
wrapping the label in a child element, which would break the four places where
JS assigns to $("#status").textContent. */
#status { font-size:0; }
#status::before { width:.55rem; height:.55rem; margin-right:0; }
#lang { max-width:5.5rem; }
header { flex-wrap:wrap; }
#meta { flex:1 0 100%; }
#newpad, #theme-btn { margin-left:.4rem; }
#notice { padding:.4rem 1.75rem; }
}
/* Below ~450px the controls (5 buttons + dropdown = 281px) leave the pad name too
little room to be legible - it degrades to "/..". Hide it rather than show a stub:
it is not interactive and the phone's URL bar already displays it. */
@media (max-width: 450px) {
#padname { display:none; }
}
/* --- Touch devices: 16px fields, because iOS Safari force-zooms into anything
smaller on focus and never zooms back out. Button sizes are unchanged. --- */
@media (pointer: coarse) {