feat(diarization-ui): improve full-app mobile responsiveness (smartphone layout)
This commit is contained in:
22
app.py
22
app.py
@@ -158,7 +158,27 @@ pre{{white-space:pre-wrap;background:#0f172a;color:#a7f3d0;padding:12px;border-r
|
|||||||
.row{{display:flex;gap:8px;flex-wrap:wrap;align-items:center}}
|
.row{{display:flex;gap:8px;flex-wrap:wrap;align-items:center}}
|
||||||
small{{color:var(--muted)}}
|
small{{color:var(--muted)}}
|
||||||
.hint{{color:var(--muted);font-size:13px}}
|
.hint{{color:var(--muted);font-size:13px}}
|
||||||
@media (max-width:900px){{nav{{width:76px;padding:8px}} nav a span{{display:none}} .brand{{font-size:11px}} .topbar h1{{font-size:15px}} main{{padding:10px}}}}
|
@media (max-width:1100px){{
|
||||||
|
nav{{width:84px;padding:8px}}
|
||||||
|
nav a span{{display:none}}
|
||||||
|
.brand{{font-size:11px}}
|
||||||
|
.topbar h1{{font-size:15px}}
|
||||||
|
main{{padding:10px}}
|
||||||
|
}}
|
||||||
|
@media (max-width:760px){{
|
||||||
|
body{{display:block}}
|
||||||
|
nav{{position:fixed;left:0;right:0;bottom:0;top:auto;height:64px;width:100%;display:flex;align-items:center;overflow:auto;white-space:nowrap;padding:6px 8px;z-index:50}}
|
||||||
|
.brand,.navsection{{display:none}}
|
||||||
|
nav a{{margin:0 4px;min-width:auto;padding:8px 10px}}
|
||||||
|
nav a span{{display:inline}}
|
||||||
|
nav a span:last-child{{display:none}}
|
||||||
|
.app{{padding-bottom:72px}}
|
||||||
|
.topbar{{position:sticky;top:0}}
|
||||||
|
main{{padding:10px 8px}}
|
||||||
|
.row{{flex-direction:column;align-items:stretch}}
|
||||||
|
input,select,textarea,button{{width:100%}}
|
||||||
|
.grid{{min-width:640px}}
|
||||||
|
}}
|
||||||
.modal-backdrop{{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:2000}}
|
.modal-backdrop{{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:2000}}
|
||||||
.modal{{width:min(92vw,520px);background:#fff;border:1px solid #cbd5e1;border-radius:14px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.25)}}
|
.modal{{width:min(92vw,520px);background:#fff;border:1px solid #cbd5e1;border-radius:14px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.25)}}
|
||||||
.modal h4{{margin:0 0 8px 0}}
|
.modal h4{{margin:0 0 8px 0}}
|
||||||
|
|||||||
Reference in New Issue
Block a user