From 9e2716f69bc390e5b3a73a7930e90becfd9fe410 Mon Sep 17 00:00:00 2001 From: hacklab Date: Mon, 19 Oct 2026 14:52:50 +0200 Subject: [PATCH] WebView viejos (Android 9-11): fichas sin gap, hoja del menu sin inset ni dvh, cabecera sin sticky y No molestar debajo de la hoja --- src/client/assets/styles/mobile_ux.css | 34 ++++++++++++++++++++------ 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/src/client/assets/styles/mobile_ux.css b/src/client/assets/styles/mobile_ux.css index 404d585..a5f3afb 100644 --- a/src/client/assets/styles/mobile_ux.css +++ b/src/client/assets/styles/mobile_ux.css @@ -474,7 +474,7 @@ body .main-content { min-height: calc(100dvh - 300px); } /* salia centrado en una fila propia arriba de cada pagina (unos 60px); va en la barra de arriba, junto al avatar */ form.oasis-phone-state { - position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 62px; z-index: 1001; + position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 62px; z-index: 101; /* encima de la barra de arriba (100), debajo de la hoja del menu (1000) */ margin: 0 !important; padding: 0 !important; width: auto !important; } form.oasis-phone-state .oasis-phone-state-btn { @@ -540,11 +540,11 @@ body > .welcome-banner { order: -1; margin-top: 10px !important; } .oasis-bottombar .menu-toggle:checked ~ label.bb-menu .bb-ico.has-svg { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; } .oasis-bottombar .menu-sheet, .oasis-bottombar .menu-sheet-backdrop { display: none; } .oasis-bottombar .menu-toggle:checked ~ .menu-sheet-backdrop { - display: block; position: fixed; inset: 0; z-index: 1002; background: rgba(0, 0, 0, .45); + display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1002; background: rgba(0, 0, 0, .45); } .oasis-bottombar .menu-toggle:checked ~ .menu-sheet { display: block; position: fixed; left: 0; right: 0; z-index: 1003; - bottom: 0; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain; + bottom: 0; max-height: 82vh; max-height: 82dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--ux-bg); color: var(--ux-fg); border-top: 3px solid var(--ux-line); border-radius: 22px 22px 0 0; @@ -581,11 +581,15 @@ body > .welcome-banner { order: -1; margin-top: 10px !important; } /* con el menu abierto, solo Menu lleva la pastilla */ .oasis-bottombar .menu-toggle:checked ~ a.bb-item.current .bb-ico.has-svg { background: transparent !important; color: var(--ux-fg) !important; } /* los grupos de uno o dos modulos (Biblioteca, Oficina, Gobernanza...) van de dos en - dos, uno al lado del otro; los grandes ocupan el ancho */ -.menu-sheet nav.launcher { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 10px; } -.menu-sheet .launcher .ln-group, .menu-sheet .launcher .ln-group + .ln-group { margin: 0 !important; min-width: 0; } -.menu-sheet .launcher .ln-group:has(.ln-app:nth-child(3)) { grid-column: 1 / -1; } -.menu-sheet .launcher .ln-group:not(:has(.ln-app:nth-child(3))) .ln-grid { grid-template-columns: 1fr 1fr !important; } + dos, uno al lado del otro; los grandes ocupan el ancho. Hace falta :has(): en los + WebView viejos (Android 9-11 sin actualizar) cada grupo va a lo ancho */ +.menu-sheet .launcher .ln-group, .menu-sheet .launcher .ln-group + .ln-group { margin: 0 0 10px !important; min-width: 0; } +@supports selector(:has(a)) { + .menu-sheet nav.launcher { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 10px; } + .menu-sheet .launcher .ln-group, .menu-sheet .launcher .ln-group + .ln-group { margin: 0 !important; } + .menu-sheet .launcher .ln-group:has(.ln-app:nth-child(3)) { grid-column: 1 / -1; } + .menu-sheet .launcher .ln-group:not(:has(.ln-app:nth-child(3))) .ln-grid { grid-template-columns: 1fr 1fr !important; } +} /* con el menu abierto, el boton de No molestar no se monta encima de la hoja */ body:has(#oasis-menu-toggle:checked) form.oasis-phone-state { display: none !important; } @@ -597,3 +601,17 @@ body:has(#oasis-menu-toggle:checked) form.oasis-phone-state { display: none !imp body > .welcome-banner { width: calc(100% - 28px) !important; max-width: 692px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } .oasis-bottombar .menu-toggle:checked ~ div.menu-sheet { left: 50%; right: auto; width: 640px; margin-left: -320px; } } + +/* ---------- WebView viejos ---------- */ +/* Android 9-11 sin actualizar traen WebView de 2018-2020: no saben gap en flex (las + fichas salian pegadas) ni :has() (el buscador partia el boton a otra linea). inset + llego a la vez que esas cosas, asi que sirve para reconocerlos */ +@supports not (inset: 0) { + .main-column .filter-btn, .main-column .activity-chip, .main-column .tribe-tab, .oasis-mobile-topbar .oasis-menu-btn { margin: 0 6px 8px 0 !important; } + .main-column form.filter-box { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; } + .main-column form.filter-box .filter-box__input { flex: 1 1 60% !important; width: auto !important; margin: 0 8px 8px 0 !important; } + .main-column form.filter-box .filter-box__controls { flex: 0 0 auto !important; width: auto !important; } + .main-column .lang-pick .lang-chip, .main-column .vote-buttons-row-single form { margin-bottom: 8px !important; } + /* sticky dentro de un fixed se pintaba en blanco */ + .menu-sheet-head { position: relative !important; top: 0 !important; } +}