vidarchive

← Back to log@ e797879

fix pagination style

AuthorKonata <konata@posteo.jp>
Date
Commite797879496e96af8c3aea28a1ea83f01d99cdab1
Parent6c80fef
2 files changed, 55 insertions(+), 7 deletions(-)
▾Mweb/static/style.css
+48-4@ e797879@ master
@@ -56,12 +56,20 @@ nav {
/* Take the rest of the header row, so the sign-out button can sit at its far
right while the links stay next to the brand. */
flex: 1;
/* Narrow screens scroll the links instead of squashing them. */
overflow-x: auto;
}
.nav-signout {
margin-left: auto;
}
nav a,
.nav-signout {
flex: none;
white-space: nowrap;
}
nav a {
color: var(--pico-muted-color);
text-decoration: none;
@@ -1158,9 +1166,43 @@ input[name="cron_expr"] {
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 1.5rem 0;
justify-content: center;
gap: 0.5rem;
/* auto, not 0: this rule would otherwise override the centring margins that
`main > *` sets, and the whole bar would sit at the left edge. */
margin: 2rem auto 1rem;
}
.pagination a,
.pagination .disabled {
/* Equal width on both sides keeps the page label centred, even though
"Previous" and "Next" are different lengths. */
min-width: 8rem;
padding: 0.4rem 0.9rem;
text-align: center;
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
text-decoration: none;
white-space: nowrap;
}
.pagination a {
color: var(--pico-primary);
}
.pagination a:hover {
background-color: var(--pico-card-sectioning-background-color);
}
.pagination .disabled {
color: var(--pico-muted-color);
opacity: 0.4;
}
.pagination .page {
min-width: 6rem;
text-align: center;
color: var(--pico-muted-color);
}
/* Utility */
@@ -1218,6 +1260,8 @@ input[name="cron_expr"] {
nav {
width: 100%;
justify-content: center;
/* safe: when the links overflow, fall back to flex-start so the first one
stays reachable while scrolling. */
justify-content: safe center;
}
}
▾Mweb/templates/layout.html
+7-3@ e797879@ master
@@ -55,9 +55,13 @@
{{define "pagination"}}
{{if or (gt .Page 1) .HasNext}}
<nav class="pagination">
{{if gt .Page 1}}<a href="?{{.Query}}page={{.Prev}}">&larr; Previous</a>{{end}}
<span>Page {{.Page}}</span>
{{if .HasNext}}<a href="?{{.Query}}page={{.Next}}">Next &rarr;</a>{{end}}
{{/* Both sides always render, so the page label stays centred on the
first and last page. */}}
{{if gt .Page 1}}<a href="?{{.Query}}page={{.Prev}}">&larr; Previous</a>
{{else}}<span class="disabled">&larr; Previous</span>{{end}}
<span class="page">Page {{.Page}}</span>
{{if .HasNext}}<a href="?{{.Query}}page={{.Next}}">Next &rarr;</a>
{{else}}<span class="disabled">Next &rarr;</span>{{end}}
</nav>
{{end}}
{{end}}