Merge pull request #286 from DallasHoff/mobile-style-fixes-0.7.0

Mobile style fixes
This commit is contained in:
Svilen Markov 2024-12-26 17:04:21 +00:00 committed by GitHub
commit e524dd111e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 17 additions and 4 deletions

View File

@ -330,7 +330,7 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
html, body { html, body, .body-content {
height: 100%; height: 100%;
} }
@ -1701,6 +1701,11 @@ details[open] .summary::after {
.weather-column-rain::before { .weather-column-rain::before {
background-size: 7px 7px; background-size: 7px 7px;
} }
.ios .search-input {
/* so that iOS Safari does not zoom the page when the input is focused */
font-size: 16px;
}
} }
@media (max-width: 1190px) and (display-mode: standalone) { @media (max-width: 1190px) and (display-mode: standalone) {
@ -1708,7 +1713,11 @@ details[open] .summary::after {
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
} }
.list-collapsible-label:has(.list-collapsible-input:checked) { .ios .body-content {
height: 100dvh;
}
.expand-toggle-button.container-expanded {
bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom)); bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
} }
@ -1722,6 +1731,10 @@ details[open] .summary::after {
transition: padding-bottom .3s; transition: padding-bottom .3s;
} }
.mobile-navigation-offset {
height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
}
.mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) { .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
padding-bottom: 0; padding-bottom: 0;
} }
@ -1798,7 +1811,6 @@ details[open] .summary::after {
.shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; }
.min-width-0 { min-width: 0; } .min-width-0 { min-width: 0; }
.max-width-100 { max-width: 100%; } .max-width-100 { max-width: 100%; }
.height-100 { height: 100%; }
.block { display: block; } .block { display: block; }
.inline-block { display: inline-block; } .inline-block { display: inline-block; }
.overflow-hidden { overflow: hidden; } .overflow-hidden { overflow: hidden; }

View File

@ -3,6 +3,7 @@
<head> <head>
{{ block "document-head-before" . }}{{ end }} {{ block "document-head-before" . }}{{ end }}
<title>{{ block "document-title" . }}{{ end }}</title> <title>{{ block "document-title" . }}{{ end }}</title>
<script>if (navigator.platform === 'iPhone') document.documentElement.classList.add('ios');</script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="color-scheme" content="dark"> <meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

View File

@ -30,7 +30,7 @@
{{ end }} {{ end }}
{{ define "document-body" }} {{ define "document-body" }}
<div class="flex flex-column height-100"> <div class="flex flex-column body-content">
{{ if not .Page.HideDesktopNavigation }} {{ if not .Page.HideDesktopNavigation }}
<div class="header-container content-bounds"> <div class="header-container content-bounds">
<div class="header flex padding-inline-widget widget-content-frame"> <div class="header flex padding-inline-widget widget-content-frame">