Merge pull request #189 from LubricantJam/main

Mobile Form Support.
hrfee · Jan 27, 2022 · 42dbc04 · 42dbc04
2 parents 4deb45d + 82c8ef1
commit 42dbc04
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/css/base.css b/css/base.css
@@ -181,6 +181,18 @@ span.sm:not(.heading) {
     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) {
     .row {
         flex-direction: column;
@@ -308,7 +320,7 @@ sup.\~critical, .text-critical {
     padding-left: 0px;
 }
 
-.block { 
+.block {
     display: block;
 }
 

diff --git a/html/form.html b/html/form.html
@@ -81,19 +81,19 @@ <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
                     </div>
                 </div>
             </span>
-        </div>    
+        </div>
         <div id="notification-box"></div>
         <div class="page-container">
             <div class="card dark:~d_neutral @low">
                 <div class="row baseline">
-                    <span class="col heading">
+                    <span class="flex-form heading mr-5">
                         {{ if .passwordReset }}
                         {{ .strings.passwordReset }}
                         {{ else }}
                         {{ .strings.createAccountHeader }}
                         {{ end }}
                     </span>
-                    <span class="col subheading"> 
+                    <span class="flex-form subheading">
                         {{ if .passwordReset }}
                         {{ .strings.enterYourPassword }}
                         {{ else }}
@@ -102,7 +102,7 @@ <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
                     </span>
                 </div>
                 <div class="row">
-                    <div class="col">
+                    <div class="flex-form">
                         {{ if .userExpiry }}
                         <aside class="col aside sm ~warning" id="user-expiry-message"></aside>
                         {{ end }}
@@ -112,7 +112,7 @@ <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
                                 {{ .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 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 }}">
                             {{ if .telegramEnabled }}
@@ -149,7 +149,7 @@ <h1 class="text-center text-2xl mb-2">{{ .discordPIN }}</h1>
                             {{ end }}
                             <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 }}">
-                            
+
                             <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 }}">
                             <label>