slowly prettying up the registration form

pages/admin/register.md

@@ -1,46 +1,51 @@
 ---
 form:
   fields:
-    -
+    - name: spacer
-      name: username
+      title: Required
+      type: spacer
+  
+    - name: username
       type: text
       placeholder: "Choose a username"
       validate:
         required: true
     
-    -
+    - name: email
-      name: title
-      type: text
-      placeholder: "Enter a title"
-
-    -
-      name: email
       type: text
       placeholder: "Enter your email"
       validate:
         required: true
         
-    -
+    - name: password1
-      name: password1
       type: password
       placeholder: Enter password
       validate:
         required: true
 
-    -
+    - name: password2
-      name: password2
       type: password
       placeholder: Confirm password
       validate:
         required: true
         
+    - name: spacer
+      title: Optional
+      type: spacer
+        
+    - name: fullname
+      type: text
+      placeholder: "Enter your fullname"    
+    
+    - name: title
+      type: text
+      placeholder: "Enter a title"    
+
 
   buttons:
-      -
+      - type: submit
-          type: submit
         value: Submit
-      -
+      - type: reset
-          type: reset
         value: Reset
 
   process:

themes/grav/scss/template/_login.scss

@@ -4,6 +4,30 @@
     max-width: 24rem;
     margin: 0 auto;
 
+    &.wide {
+        max-width: 50rem;
+
+        h1 {
+            height: 100px;
+        }
+
+        form {
+            > .padding {
+                padding: 3rem 2rem 6rem 2rem;
+                > div {
+                    width: 50%;
+                    display: inline-block;
+                    margin-right: -2px;
+                }
+
+                .form-field {
+                    padding: 0 1rem;
+                }
+            }
+
+        }
+    }
+
     .form-field {
         padding-left: 0;
         margin-bottom: 0;
@@ -17,6 +41,25 @@
         padding-right: 0;
     }
 
+    .wrapper-spacer {
+        width: 100% !important;
+        display: block !important;
+        padding: 0 1rem;
+        h3 {
+            padding-left: 1rem;
+            color: rgba(white, 0.4);
+            border-bottom: 3px solid rgba(white, 0.1);
+        }
+    }
+
+    .instructions {
+        display: block;
+        padding: 2rem 4rem 0;
+        margin: 0;
+        font-size: 1.3rem;
+        color: rgba(white,0.8);
+    }
+
     h1 {
         background: $darker-accent-bg url(../images/logo.png) 50% 50% no-repeat;
         font-size: 0;
@@ -26,7 +69,12 @@
     }
 
     form {
-        padding: 2rem 3rem;
+        position: relative;
+
+        .padding {
+            padding: 3rem 3rem 6rem 3rem;
+        }
+
         input {
             margin-bottom: 2rem;
             background: $page-bg;
@@ -43,8 +91,13 @@
         }
 
         .form-actions {
+            display: block !important;
+            width: 100% !important;
             text-align: center;
-            margin: 0 -3rem -3rem -3rem;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
             padding: 1.5rem 3rem;
 
             button:first-child {

themes/grav/templates/partials/login.html.twig

@@ -1,7 +1,7 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block page %}
-    <section id="admin-login" class="default-glow-shadow">
+    <section id="admin-login" class="default-glow-shadow {{ classes }}">
         <h1>
             {{ title }}
         </h1>
@@ -11,9 +11,11 @@
         {% block instructions %}{% endblock %}
 
         <form method="post" action="{{ base_url_relative }}">
+            <div class="padding">
             {% block form %}{% endblock %}
 
             {{ nonce_field('admin-form', 'admin-nonce') }}
+            </div>
         </form>
     </section>
 {% endblock %}

themes/grav/templates/register.html.twig

@@ -1,13 +1,15 @@
-{% embed 'partials/login.html.twig' with {title:'Grav Register Admin User'} %}
+{% embed 'partials/login.html.twig' with {title:'Grav Register Admin User', classes:'wide'} %}
 
     {% block instructions %}
-    <p>No users found, you will need to register an account...</p>
+    <div class="instructions">
+        The Admin plugin has been installed, but no user accounts could be found. Please create a user account to ensure your Grav install is secure...
+    </div>
     {% endblock %}
 
     {% block form %}
         {% for field in page.header.form.fields %}
                 {% if field.type %}
-                    <div>
+                    <div class="wrapper-{{ field.name }}">
                         {% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
                     </div>
                 {% endif %}