Spaces:
Running
Running
hodfa840 commited on
Commit ·
7948072
1
Parent(s): 0fa006b
Mobile: responsive projects page, progress bar, Next button, login form
Browse files- Inject mobile CSS on all LS pages: overflow-x hidden, smaller progress
bar and Next button on narrow viewports, remove min-width constraints
from LS sidebar panels so they don't force horizontal scroll
- Projects landing: 2-column grid on phones (<540px), full-width below 320px
- Login page: add viewport meta tag + font-size:16px on inputs (prevents
iOS zoom on focus), box-sizing reset for LS form containers
- ls_proxy_hf.py +41 -0
ls_proxy_hf.py
CHANGED
|
@@ -110,6 +110,24 @@ PRIVACY_SCRIPT = """
|
|
| 110 |
(function () {
|
| 111 |
'use strict';
|
| 112 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 113 |
// ── Null-guard for LS innerHTML bug ──────────────────────────────────────
|
| 114 |
(function patchInnerHTML() {
|
| 115 |
var desc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
|
|
@@ -499,6 +517,20 @@ def build_projects_page(user_email=""):
|
|
| 499 |
.title {{ font-size: 13px; font-weight: 600; color: #222; text-align: center; line-height: 1.4; }}
|
| 500 |
.admin-link {{ text-align: center; margin-top: 32px; font-size: 13px; color: #aaa; }}
|
| 501 |
.admin-link a {{ color: #5f9ea0; text-decoration: none; }}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 502 |
</style>
|
| 503 |
</head>
|
| 504 |
<body>
|
|
@@ -676,6 +708,15 @@ def proxy_reset_admin():
|
|
| 676 |
|
| 677 |
|
| 678 |
_LOGIN_BANNER = """
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 679 |
<div style="background:#1a3a5c;color:#e8c97a;text-align:center;padding:14px 16px;
|
| 680 |
font-family:sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;">
|
| 681 |
SAGA Annotation Platform
|
|
|
|
| 110 |
(function () {
|
| 111 |
'use strict';
|
| 112 |
|
| 113 |
+
// ── Mobile viewport + responsive CSS ─────────────────────────────────────
|
| 114 |
+
(function mobileFix() {
|
| 115 |
+
var vp = document.querySelector('meta[name="viewport"]');
|
| 116 |
+
if (!vp) { vp = document.createElement('meta'); vp.name = 'viewport'; document.head.appendChild(vp); }
|
| 117 |
+
vp.content = 'width=device-width, initial-scale=1, maximum-scale=5';
|
| 118 |
+
var ms = document.createElement('style');
|
| 119 |
+
ms.textContent =
|
| 120 |
+
'@media (max-width: 768px) {'
|
| 121 |
+
+ ' body { overflow-x: hidden !important; }'
|
| 122 |
+
+ ' #__saga_progress { font-size: 11px !important; padding: 4px 8px !important; line-height: 1.4; }'
|
| 123 |
+
+ ' #__saga_next_btn { bottom: 14px !important; right: 14px !important;'
|
| 124 |
+
+ ' padding: 9px 16px !important; font-size: 13px !important; }'
|
| 125 |
+
+ ' .lsf-main-content, [class*="sidepanel"] { min-width: unset !important; }'
|
| 126 |
+
+ ' .lsf-label-button, [class*="lsf-button"] { min-width: unset !important; }'
|
| 127 |
+
+ '}';
|
| 128 |
+
document.head.appendChild(ms);
|
| 129 |
+
})();
|
| 130 |
+
|
| 131 |
// ── Null-guard for LS innerHTML bug ──────────────────────────────────────
|
| 132 |
(function patchInnerHTML() {
|
| 133 |
var desc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
|
|
|
|
| 517 |
.title {{ font-size: 13px; font-weight: 600; color: #222; text-align: center; line-height: 1.4; }}
|
| 518 |
.admin-link {{ text-align: center; margin-top: 32px; font-size: 13px; color: #aaa; }}
|
| 519 |
.admin-link a {{ color: #5f9ea0; text-decoration: none; }}
|
| 520 |
+
@media (max-width: 540px) {{
|
| 521 |
+
body {{ padding: 0 0 40px; }}
|
| 522 |
+
.user-bar {{ margin: 0 0 24px; position: sticky; top: 0; }}
|
| 523 |
+
h1 {{ font-size: 22px; margin: 20px 0 6px; }}
|
| 524 |
+
p.sub {{ margin-bottom: 20px; }}
|
| 525 |
+
.grid {{ gap: 12px; padding: 0 12px; }}
|
| 526 |
+
.card {{ width: calc(50% - 6px); padding: 16px 10px; }}
|
| 527 |
+
.flag {{ height: 54px; margin-bottom: 8px; }}
|
| 528 |
+
.flag-img {{ width: 72px; height: 54px; }}
|
| 529 |
+
.title {{ font-size: 12px; }}
|
| 530 |
+
}}
|
| 531 |
+
@media (max-width: 320px) {{
|
| 532 |
+
.card {{ width: 100%; }}
|
| 533 |
+
}}
|
| 534 |
</style>
|
| 535 |
</head>
|
| 536 |
<body>
|
|
|
|
| 708 |
|
| 709 |
|
| 710 |
_LOGIN_BANNER = """
|
| 711 |
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
|
| 712 |
+
<style>
|
| 713 |
+
body, html { box-sizing: border-box; }
|
| 714 |
+
*, *::before, *::after { box-sizing: inherit; }
|
| 715 |
+
@media (max-width: 600px) {
|
| 716 |
+
.login-form-container, form[class*="login"] { padding: 16px !important; margin: 0 12px !important; }
|
| 717 |
+
input[type=email], input[type=password] { font-size: 16px !important; }
|
| 718 |
+
}
|
| 719 |
+
</style>
|
| 720 |
<div style="background:#1a3a5c;color:#e8c97a;text-align:center;padding:14px 16px;
|
| 721 |
font-family:sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;">
|
| 722 |
SAGA Annotation Platform
|