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

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;

View File

@ -86,14 +86,14 @@
<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 }}