hrfee
/
jfa-go
mirror of https://github.com/hrfee/jfa-go.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added better mobile support for sign-up form.

This commit is contained in:
James Finch 2022-01-27 01:58:24 +00:00 committed by GitHub
parent 4deb45df3c
commit 82c8ef1e4b
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/base.css
View File

@ -181,6 +181,18 @@ span.sm:not(.heading) {
flex-direction: column; flex-direction: column;
} }
.flex-form {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.flex-form {
flex: 1;
margin: 0.5rem;
}
}
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.row { .row {
flex-direction: column; flex-direction: column;
@ -308,7 +320,7 @@ sup.\~critical, .text-critical {
padding-left: 0px; padding-left: 0px;
} }
.block { .block {
display: block; display: block;
} }

12
html/form.html
View File

@ -81,19 +81,19 @@
</div> </div>
</div> </div>
</span> </span>
</div> </div>
<div id="notification-box"></div> <div id="notification-box"></div>
<div class="page-container"> <div class="page-container">
<div class="card dark:~d_neutral @low"> <div class="card dark:~d_neutral @low">
<div class="row baseline"> <div class="row baseline">
<span class="col heading"> <span class="flex-form heading mr-5">
{{ if .passwordReset }} {{ if .passwordReset }}
{{ .strings.passwordReset }} {{ .strings.passwordReset }}
{{ else }} {{ else }}
{{ .strings.createAccountHeader }} {{ .strings.createAccountHeader }}
{{ end }} {{ end }}
</span> </span>
<span class="col subheading"> <span class="flex-form subheading">
{{ if .passwordReset }} {{ if .passwordReset }}
{{ .strings.enterYourPassword }} {{ .strings.enterYourPassword }}
{{ else }} {{ else }}
@ -102,7 +102,7 @@
</span> </span>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="flex-form">
{{ if .userExpiry }} {{ if .userExpiry }}
<aside class="col aside sm ~warning" id="user-expiry-message"></aside> <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
{{ end }} {{ end }}
@ -112,7 +112,7 @@
{{ .strings.username }} {{ .strings.username }}
<input type="text" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}"> <input type="text" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.username }}" id="create-username" aria-label="{{ .strings.username }}">
</label> </label>
<label class="label supra" for="create-email">{{ .strings.emailAddress }}</label> <label class="label supra" for="create-email">{{ .strings.emailAddress }}</label>
<input type="email" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}"> <input type="email" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.emailAddress }}" id="create-email" aria-label="{{ .strings.emailAddress }}" value="{{ .email }}">
{{ if .telegramEnabled }} {{ if .telegramEnabled }}
@ -149,7 +149,7 @@
{{ end }} {{ end }}
<label class="label supra" for="create-password">{{ .strings.password }}</label> <label class="label supra" for="create-password">{{ .strings.password }}</label>
<input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}"> <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-password" aria-label="{{ .strings.password }}">
<label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label> <label class="label supra" for="create-reenter-password">{{ .strings.reEnterPassword }}</label>
<input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}"> <input type="password" class="input ~neutral @high mt-2 mb-4" placeholder="{{ .strings.password }}" id="create-reenter-password" aria-label="{{ .strings.reEnterPassword }}">
<label> <label>