extern/glance
1
0
Fork 0
mirror of https://github.com/glanceapp/glance.git synced 2025-06-21 18:31:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move footer to bottom of viewport

Browse Source
This commit is contained in:
Svilen Markov 2024-08-05 12:00:20 +01:00
parent 64256f2638
commit 3b2a9fedef
2 changed files with 50 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -311,6 +311,10 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
html, body {
height: 100%;
}
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@ -424,6 +428,7 @@ kbd:active {
.content-bounds { .content-bounds {
max-width: 1600px; max-width: 1600px;
width: 100%;
margin-inline: auto; margin-inline: auto;
padding: 0 var(--content-bounds-padding); padding: 0 var(--content-bounds-padding);
} }
@ -654,7 +659,7 @@ kbd:active {
} }
.footer { .footer {
margin-block: calc(var(--widget-gap) * 1.5); padding-block: calc(var(--widget-gap) * 1.5);
animation: loadingContainerEntrance 200ms backwards; animation: loadingContainerEntrance 200ms backwards;
animation-delay: 150ms; animation-delay: 150ms;
} }
@ -1227,8 +1232,14 @@ kbd:active {
} }
} }
body { .mobile-navigation-offset {
padding-bottom: calc(var(--mobile-navigation-height) + var(--content-bounds-padding)); height: var(--mobile-navigation-height);
margin-top: var(--widget-gap);
flex-shrink: 0;
}
.footer + .mobile-navigation-offset {
margin-top: 0;
} }
.mobile-navigation { .mobile-navigation {
@ -1431,6 +1442,7 @@ kbd:active {
.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; }
@ -1462,6 +1474,7 @@ kbd:active {
.margin-top-7 { margin-top: 0.7rem; } .margin-top-7 { margin-top: 0.7rem; }
.margin-top-10 { margin-top: 1rem; } .margin-top-10 { margin-top: 1rem; }
.margin-top-15 { margin-top: 1.5rem; } .margin-top-15 { margin-top: 1.5rem; }
.margin-top-auto { margin-top: auto; }
.margin-block-3 { margin-block: 0.3rem; } .margin-block-3 { margin-block: 0.3rem; }
.margin-block-5 { margin-block: 0.5rem; } .margin-block-5 { margin-block: 0.5rem; }
.margin-block-7 { margin-block: 0.7rem; } .margin-block-7 { margin-block: 0.7rem; }

6
internal/assets/templates/page.html
View File

@ -25,6 +25,7 @@
{{ end }} {{ end }}
{{ define "document-body" }} {{ define "document-body" }}
<div class="flex flex-column height-100">
<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">
<!-- TODO: Replace G with actual logo, first need an actual logo --> <!-- TODO: Replace G with actual logo, first need an actual logo -->
@ -58,10 +59,13 @@
</div> </div>
</div> </div>
<div class="footer flex items-center flex-column"> <div class="footer flex items-center flex-column margin-top-auto">
<div> <div>
<a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }} <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
</div> </div>
<a class="color-primary block margin-top-5 size-h5" href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a> <a class="color-primary block margin-top-5 size-h5" href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a>
</div> </div>
<div class="mobile-navigation-offset"></div>
</div>
{{ end }} {{ end }}