extern/glance
1
0
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2024-11-25 18:05:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change mobile nav styles

Browse Source
This commit is contained in:
Carlos Medina 2024-05-10 19:54:43 -06:00
parent 461c984317
commit 91c75518da
2 changed files with 55 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
internal/assets/static/main.css
View File

@ -909,15 +909,11 @@ body {
.mobile-navigation {
display: block;
position: fixed;
height: var(--mobile-navigation-height);
bottom: 0;
transform: translateY(calc(100% - var(--mobile-navigation-height)));
left: var(--content-bounds-padding);
right: var(--content-bounds-padding);
z-index: 10;
background-color: var(--color-widget-background);
border: 1px solid var(--color-widget-content-border);
border-bottom: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
transition: transform .3s;
}
@ -927,23 +923,50 @@ body {
height: 2px;
}
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) {
transform: translateY(0);
}
.mobile-navigation-page-links {
border-top: 1px solid var(--color-widget-content-border);
padding: 15px var(--content-bounds-padding);
display: flex;
align-items: center;
position: relative;
height: 100%;
background-color: var(--color-widget-background);
border: 1px solid transparent;
border-top: 0;
border-bottom: 0;
padding: 0 var(--content-bounds-padding);
overflow-x: scroll;
gap: 2.5rem;
transition: border-color 0s .2s, transform .3s;
z-index: 1;
}
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-page-links {
border-color: var(--color-widget-content-border);
transition: transform .3s;
}
.mobile-navigation-page-links .nav-item {
line-height: var(--mobile-navigation-height);
}
.mobile-navigation-icons {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-widget-background);
border: 1px solid var(--color-widget-content-border);
border-bottom-color: transparent;
border-radius: var(--border-radius) var(--border-radius) 0 0;
transition: border .3s, border-radius .3s, transform .3s;
z-index: 2;
}
.mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-icons {
border-bottom-color: var(--color-widget-content-border);
border-radius: var(--border-radius) var(--border-radius) 0 0;
transform: translateY(-100%);
}
body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1),
@ -955,13 +978,12 @@ body {
.mobile-navigation-label {
display: flex;
flex: 1;
align-self: stretch;
max-width: 50px;
height: var(--mobile-navigation-height);
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 15px;
line-height: var(--mobile-navigation-height);
}
.mobile-navigation-pill {
@ -1023,11 +1045,26 @@ body {
}
@media (display-mode: standalone) {
@supports (-webkit-touch-callout: none) {
.mobile-navigation {
bottom: 15px;
body {
padding-top: env(safe-area-inset-top, 0);
}
.mobile-navigation {
bottom: env(safe-area-inset-bottom, 0);
}
.mobile-navigation::after {
content: '';
position: absolute;
background: var(--color-widget-background);
height: calc(var(--mobile-navigation-height) + env(safe-area-inset-bottom, 0));
top: 0;
left: 0;
right: 0;
border: 1px solid var(--color-widget-content-border);
border-bottom: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
}
.size-h1 { font-size: var(--font-size-h1); }

2
internal/assets/templates/document.html
View File

@ -5,7 +5,7 @@
<title>{{ block "document-title" . }}{{ end }}</title>
<meta charset="UTF-8">
<meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">