nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve appearance of option bars on mobile

This commit is contained in:
Ben Visness 2021-09-08 23:01:21 -05:00
parent b2a35c469a
commit 7e4116359a
4 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/style.css
View File

@ -7724,16 +7724,24 @@ header #login-popup {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
align-items: center;
border-style: dashed; border-style: dashed;
border-width: 0px; border-width: 0px;
border-bottom-width: 1px; } border-bottom-width: 1px;
padding-bottom: 0.5rem; }
@media screen and (min-width: 30em) { @media screen and (min-width: 30em) {
.optionbar { .optionbar {
flex-direction: row; flex-direction: row;
text-align: left; } } text-align: left;
padding-bottom: 0; } }
.optionbar.bottom { .optionbar.bottom {
border-bottom-width: 0px; border-bottom-width: 0px;
border-top-width: 1px; } border-top-width: 1px;
padding-bottom: 0;
padding-top: 0.5rem; }
@media screen and (min-width: 30em) {
.optionbar.bottom {
padding-top: 0; } }
.optionbar.center { .optionbar.center {
text-align: center; } text-align: center; }
.optionbar .options { .optionbar .options {
@ -7748,6 +7756,8 @@ header #login-popup {
.optionbar .options input[type=button], .optionbar .options input[type=button],
.optionbar .options input[type=submit] { .optionbar .options input[type=submit] {
display: inline-flex; display: inline-flex;
align-items: center;
justify-content: center;
border: none; border: none;
background: none; background: none;
font-weight: normal; font-weight: normal;
@ -8432,6 +8442,8 @@ input[type=submit] {
input[type=button].lite, input[type=button].lite,
input[type=submit].lite { input[type=submit].lite {
display: inline-flex; display: inline-flex;
align-items: center;
justify-content: center;
border: none; border: none;
background: none; background: none;
font-weight: normal; font-weight: normal;

9
src/rawdata/scss/_core.scss
View File

@ -639,18 +639,27 @@ footer {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
text-align: center; text-align: center;
align-items: center;
border-style: dashed; border-style: dashed;
border-width: 0px; border-width: 0px;
border-bottom-width: 1px; border-bottom-width: 1px;
padding-bottom: $spacing-small;
@media #{$breakpoint-not-small} { @media #{$breakpoint-not-small} {
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
padding-bottom: 0;
} }
&.bottom { &.bottom {
border-bottom-width: 0px; border-bottom-width: 0px;
border-top-width: 1px; border-top-width: 1px;
padding-bottom: 0;
padding-top: $spacing-small;
@media #{$breakpoint-not-small} {
padding-top: 0;
}
} }
&.center { &.center {

2
src/rawdata/scss/_globals.scss
View File

@ -46,6 +46,8 @@ will throw an error.
@mixin lite-button { @mixin lite-button {
display: inline-flex; display: inline-flex;
align-items: center;
justify-content: center;
border: none; border: none;
background: none; background: none;
font-weight: normal; font-weight: normal;

6
src/templates/src/include/pagination.html
View File

@ -1,9 +1,9 @@
{{- /*gotype: git.handmade.network/hmn/hmn/src/templates.Pagination*/ -}} {{- /*gotype: git.handmade.network/hmn/hmn/src/templates.Pagination*/ -}}
{{ if gt .Total 1 }}
<div class="pagination flex"> <div class="pagination flex">
{{ if gt .Current 1 }} {{ if gt .Current 1 }}
<a class="button" href="{{ .PreviousUrl }}">Prev</a> <a class="button" href="{{ .PreviousUrl }}">Prev</a>
{{ end }} {{ end }}
{{ if gt .Total 1 }}
{{ if gt .Current 1 }} {{ if gt .Current 1 }}
{{ if gt .Current 2 }} {{ if gt .Current 2 }}
<a class="page button" href="{{ .FirstUrl }}">1</a> <a class="page button" href="{{ .FirstUrl }}">1</a>
@ -23,10 +23,8 @@
<a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a> <a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ else }}
&nbsp;
{{ end }}
{{ if lt .Current .Total }} {{ if lt .Current .Total }}
<a class="button" href="{{ .NextUrl }}">Next</a> <a class="button" href="{{ .NextUrl }}">Next</a>
{{ end }} {{ end }}
</div> </div>
{{ end }}