Initial configuration page formatted and now saving

themes/grav/css-compiled/template.css

@@ -40,7 +40,8 @@ b, strong {
 
 .button-bar {
   text-align: right;
-  float: right; }
+  float: right;
+  z-index: 2; }
 
 .secondary-accent {
   background: #349886;
@@ -471,12 +472,14 @@ form .form-select-wrapper {
     line-height: 0;
     color: #9ba2a6;
     pointer-events: none; }
+form .x-small select, form .x-small input {
+  max-width: 5rem !important; }
 form .small select, form .small input {
-  min-width: 10rem; }
+  min-width: 10rem !important; }
 form .medium select, form .medium input {
-  min-width: 20rem; }
+  min-width: 20rem !important; }
 form .large select, form .large input {
-  min-width: 30rem; }
+  min-width: 30rem !important; }
 form select {
   border: 1px solid #d4d4d4;
   background: white;
@@ -486,6 +489,10 @@ form select {
   padding: 5px 30px 5px 10px;
   cursor: pointer;
   margin: 0; }
+form input[type=text] {
+  width: auto;
+  border: 1px solid #d4d4d4;
+  background: white; }
 form .switch-toggle label {
   cursor: pointer; }
 form .switch-toggle a, form .switch-toggle label {
@@ -745,6 +752,7 @@ tr {
     color: #737c81;
     padding: 2rem 0; }
     #admin-main .admin-block h1 {
+      color: #314d5b;
       padding: 0 3rem 0.5rem;
       margin: 0 0 1rem;
       border-bottom: 3px solid #e1e1e1; }

themes/grav/scss/template/_admin.scss

@@ -187,6 +187,7 @@ $update-height: 3rem;
         padding: 2rem 0;
 
         h1 {
+            color: $page-bg;
             padding: 0 $padding-default 0.5rem;
             margin: 0 0 1rem;
             border-bottom: 3px solid darken($content-bg, 5%);

themes/grav/scss/template/_core.scss

@@ -23,6 +23,7 @@ b, strong {
 .button-bar {
     text-align: right;
     float: right;
+    z-index: 2;
 }
 
 .secondary-accent {

themes/grav/scss/template/_forms.scss

@@ -72,21 +72,27 @@ form {
         }
     }
 
+    .x-small {
+        select, input {
+            max-width: 5rem !important;
+        }
+    }
+
     .small {
         select, input {
-            min-width: 10rem;
+            min-width: 10rem !important;
         }
     }
 
     .medium {
         select, input {
-            min-width: 20rem;
+            min-width: 20rem !important;
         }
     }
 
     .large {
         select, input {
-            min-width: 30rem;
+            min-width: 30rem !important;
         }
     }
 
@@ -101,6 +107,12 @@ form {
         margin: 0;
     }
 
+    input[type=text] {
+        width: auto;
+        border: $form-border-width solid $form-border;
+        background: $white;
+    }
+
 
     // input[type=text] {
     //     width: 65%;

themes/grav/templates/configuration.html.twig

@@ -1,6 +1,9 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block titlebar %}
+    <div class="button-bar">
+        <button class="button" type="submit" name="task" value="save" form="blueprints"><i class="fa fa-check"></i> Save</button>
+    </div>
     <h1><i class="fa fa-fw fa-th"></i> Configuration</h1>
 {% endblock %}
 

themes/grav/templates/forms/fields/select/select.html.twig

@@ -1,17 +1,18 @@
 {% set value = (value is null ? field.default : value) %}
 
-<div class="form-field">
+<div class="form-field grid pure-g">
-    <label class="inline select">
+    <div class="form-label block size-1-3 pure-u-1-3">
-        <span>
+        <label>
             {% if field.help %}
             <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
             {% else %}
             {{ field.label }}
             {% endif %}
             {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-        </span>
+        </label>
-
+    </div>
-
+    <div class="form-data block size-2-3 pure-u-2-3">
+        <div class="form-select-wrapper {{ field.size }}">
             <select name="{{ (scope ~ field.name)|fieldName }}"
                     {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                     {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
@@ -23,5 +24,6 @@
                 </option>
                 {% endfor %}
             </select>
-    </label>
+        </div>
+    </div>
 </div>

themes/grav/templates/forms/fields/text/text.html.twig

@@ -1,14 +1,18 @@
 {% set value = (value is null ? field.default : value) %}
 
-<div class="form-field">
+<div class="form-field grid pure-g">
-    <label class="inline">
+    <div class="form-label block size-1-3 pure-u-1-3">
+        <label>
             {% if field.help %}
             <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
             {% else %}
             {{ field.label }}
             {% endif %}
             {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-
+        </label>
+    </div>
+    <div class="form-data block size-2-3 pure-u-2-3">
+        <div class="form-input-wrapper {{ field.size }}">
             <input  type="text"
                     class="input"
                     name="{{ (scope ~ field.name)|fieldName }}"
@@ -20,5 +24,6 @@
                     {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                     {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
             />
-    </label>
+        </div>
+    </div>
 </div>

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

@@ -14,9 +14,9 @@
         {% set value = value|json_encode|e %}
         {% include 'forms/fields/hidden/hidden.html.twig' %}
     {% endfor %}
-    <p><strong>Note:</strong> This page contains extra fields which are not visible in this form!</p>
     {% endif %}
 
+    {#
     <div class="button-bar">
         <button class="button" name="task" value="save">Save</button>
         {% if context.exists %}
@@ -44,4 +44,5 @@
             return false;
         });
     </script>
+    #}
 </form>