Tab UI for switching between system and site configurations

classes/controller.php

@@ -225,7 +225,7 @@ class AdminController
             $obj->validate();
             $obj->filter();
             $obj->save();
-            $this->admin->setMessage('Page successfully saved');
+            $this->admin->setMessage('Successfully saved');
         }
 
         // Redirect to new location.
@@ -305,7 +305,7 @@ class AdminController
             $page->save();
 
             // Enqueue message and redirect to new location.
-            $this->admin->setMessage('Page successfully copied');
+            $this->admin->setMessage('Successfully copied');
             $this->setRedirect($this->view . '/' . $page->route());
 
         } catch (\Exception $e) {
@@ -357,7 +357,7 @@ class AdminController
                 $redirect = dirname($redirect);
             }
 
-            $this->admin->setMessage('Page successfully deleted');
+            $this->admin->setMessage('Successfully deleted');
             $this->setRedirect($redirect);
 
         } catch (\Exception $e) {

themes/grav/css-compiled/template.css

@@ -449,9 +449,12 @@ hr {
   to {
     -webkit-transform: translate3d(0, 0, 0); } }
 form .form-field {
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+  padding-left: 3rem; }
+form .form-data {
+  padding-right: 3rem; }
 form label {
-  padding: 5px 0 5px 3rem;
+  padding: 5px 0;
   font-weight: 400;
   margin: 0; }
 form input, form select, form textarea, form button {
@@ -461,8 +464,7 @@ form input, form select, form textarea, form button {
   border-radius: 4px;
   -webkit-font-smoothing: antialiased; }
 form .form-select-wrapper {
-  position: relative;
-  display: inline-block; }
+  position: relative; }
   form .form-select-wrapper:after {
     position: absolute;
     content: '\f078';
@@ -472,15 +474,20 @@ form .form-select-wrapper {
     line-height: 0;
     color: #9ba2a6;
     pointer-events: none; }
-form .x-small select, form .x-small input {
+form .x-small {
   max-width: 5rem !important; }
-form .small select, form .small input {
-  min-width: 10rem !important; }
-form .medium select, form .medium input {
-  min-width: 20rem !important; }
-form .large select, form .large input {
-  min-width: 30rem !important; }
+form .small {
+  max-width: 10rem !important; }
+form .medium {
+  max-width: 20rem !important; }
+  form .medium textarea {
+    height: 7rem; }
+form .large {
+  max-width: 30rem !important; }
+  form .large textarea {
+    height: 10rem; }
 form select {
+  width: 100%;
   border: 1px solid #d4d4d4;
   background: white;
   -webkit-appearance: none;
@@ -490,7 +497,11 @@ form select {
   cursor: pointer;
   margin: 0; }
 form input[type=text] {
-  width: auto;
+  width: 100%;
+  border: 1px solid #d4d4d4;
+  background: white; }
+form textarea {
+  width: 100%;
   border: 1px solid #d4d4d4;
   background: white; }
 form .switch-toggle label {
@@ -715,6 +726,23 @@ tr {
     padding: 0 3rem; }
     #admin-main .titlebar .button-bar {
       padding: 0; }
+  #admin-main .tab-bar {
+    background: #253a47;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+    #admin-main .tab-bar li {
+      display: inline-block; }
+      #admin-main .tab-bar li.active span, #admin-main .tab-bar li.active a {
+        background: #eeeeee;
+        color: #737c81; }
+    #admin-main .tab-bar span, #admin-main .tab-bar a {
+      display: inline-block;
+      padding: 0.7rem 4rem;
+      color: #d1dee7; }
+      #admin-main .tab-bar span:hover, #admin-main .tab-bar a:hover {
+        color: white; }
   #admin-main .grav-update {
     height: 3rem;
     padding: 0 3rem;

themes/grav/scss/template/_admin.scss

@@ -142,6 +142,35 @@ $update-height: 3rem;
         }
     }
 
+    .tab-bar {
+        background: $accent-bg;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        font-family: $font-family-header;
+
+        li {
+            display: inline-block;
+            &.active {
+                span, a {
+                    background: $content-bg;
+                    color: $content-fg;
+                }
+
+            }
+        }
+
+        span, a {
+            display: inline-block;
+            padding: 0.7rem 4rem;
+            color: lighten($accent-bg,65%);
+            &:hover {
+                color: $white;
+            }
+        }
+    }
+
     .grav-update {
         height: $update-height;
         padding: 0 $padding-default;

themes/grav/scss/template/_forms.scss

@@ -40,10 +40,15 @@ form {
 
     .form-field {
         margin-bottom: 1rem;
+        padding-left: $padding-default;
+    }
+
+    .form-data {
+        padding-right: $padding-default;
     }
 
     label {
-        padding: 5px 0 5px $padding-default;
+        padding: 5px 0;
         font-weight: 400;
         margin:0;
     }
@@ -58,7 +63,6 @@ form {
 
     .form-select-wrapper {
         position: relative;
-        display: inline-block;
 
         &:after {
             position: absolute;
@@ -73,30 +77,37 @@ form {
     }
 
     .x-small {
-        select, input {
+
             max-width: 5rem !important;
-        }
+
     }
 
     .small {
-        select, input {
-            min-width: 10rem !important;
-        }
+
+            max-width: 10rem !important;
+
     }
 
     .medium {
-        select, input {
-            min-width: 20rem !important;
+
+            max-width: 20rem !important;
+
+        textarea {
+            height: 7rem;
         }
     }
 
     .large {
-        select, input {
-            min-width: 30rem !important;
+
+            max-width: 30rem !important;
+
+         textarea {
+            height: 10rem;
         }
     }
 
     select {
+        width: 100%;
         border: $form-border-width solid $form-border;
         background: $white;
         -webkit-appearance:none;
@@ -108,7 +119,13 @@ form {
     }
 
     input[type=text] {
-        width: auto;
+        width: 100%;
+        border: $form-border-width solid $form-border;
+        background: $white;
+    }
+
+    textarea {
+        width: 100%;
         border: $form-border-width solid $form-border;
         background: $white;
     }

themes/grav/templates/configuration.html.twig

@@ -4,13 +4,17 @@
     <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>
+    <h1><i class="fa fa-fw fa-th"></i> Configuration - System</h1>
+{% endblock %}
+
+{% block content_top %}
+    <ul class="tab-bar">
+        <li class="active"><span>System</span></li>
+        <li><a href="{{ base_url_relative }}/settings/">Site</a></li>
+    </ul>
 {% endblock %}
 
 {% block content %}
-
-    {% include 'partials/messages.html.twig' %}
     {% include 'partials/blueprints.html.twig' with { blueprints: admin.blueprints('system'), data: admin.data('system') } %}
-
 {% endblock %}
 

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

@@ -0,0 +1,34 @@
+{% set value = (value is null ? field.default : value) %}
+
+<div class="form-field">
+    <div class="dynfields" data-grav-dynfields="{{ field.name|fieldName }}">
+        <span class="inline">
+            <span>
+                {% if field.help %}
+                <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
+                {% else %}
+                {{ field.label }}
+                {% endif %}
+            </span>
+
+
+            {% if value|length %}
+            {% for key, text in value %}
+            <div>
+                <input type="text" value="{{ (scope ~ key)|fieldName }}" placeholder="" />
+                <input type="text" name="{{ (scope ~ field.name)|fieldName }}[{{ key }}]" value="{{ text|join(', ') }}" placeholder="{{ field.placeholder }}" />
+                <span data-grav-remfield class="button fa fa-minus"></span>
+                <span data-grav-addfield class="button fa fa-plus"></span>
+            </div>
+            {% endfor %}
+            {% else %}
+                <div>
+                    <input type="text" placeholder="" />
+                    <input type="text" placeholder="{{ field.placeholder }}" />
+                    <span data-grav-remfield class="button fa fa-minus"></span>
+                    <span data-grav-addfield class="button fa fa-plus"></span>
+                </div>
+            {% endif %}
+        </span>
+    </div>
+</div>

themes/grav/templates/forms/fields/array/array.yaml

@@ -0,0 +1,11 @@
+field:
+  array:
+    node: array
+    key: name
+    fields:
+      name:
+        type: text
+        validation:
+          required: true
+      value:
+        type: text

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

@@ -0,0 +1,19 @@
+{% set value = (value is null ? field.default : value) %}
+
+<div class="form-field grid pure-g">
+    <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-textarea-wrapper {{ field.size }}">
+            <textarea class="input" name="{{ (scope ~ field.name)|fieldName }}">{{ value|join("\n") }}</textarea>
+        </div>
+    </div>
+</div>

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

@@ -68,13 +68,15 @@
         </div>
         {% endif %}
         <div class="content-padding">
-            {% include 'partials/messages.html.twig' %}
-            {% block content_top %}{% endblock %}
-            <div class="admin-block default-box-shadow">
-                {% block content %}{% endblock %}
+            <div class="default-box-shadow">
+                {% include 'partials/messages.html.twig' %}
+                {% block content_top %}{% endblock %}
+                <div class="admin-block">
+                    {% block content %}{% endblock %}
+                </div>
+                {% block content_bottom %}{% endblock %}
             </div>
-            {% block content_bottom %}{% endblock %}
-            <footer id="footer">
+             <footer id="footer">
                 <a href="http://getgrav.org">Grav</a> version {{ grav_update['current'] }} was made with <i class="fa fa-heart"></i> by <a href="http:/www.rockettheme.com">RocketTheme</a>.
             </footer>
         </div>

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

@@ -17,7 +17,7 @@
         <li class="{{ (location == 'dashboard') ? 'selected' : '' }}">
             <a href="{{ base_url_relative }}"><i class="fa fa-fw fa-th"></i> Dashboard</a>
         </li>
-        <li class="{{ (location == 'configuration') ? 'selected' : '' }}">
+        <li class="{{ (location == 'configuration' or location == 'settings') ? 'selected' : '' }}">
             <a href="{{ base_url_relative }}/configuration"><i class="fa fa-fw fa-wrench"></i> Configuration</a>
         </li>
         <li class="{{ (location == 'pages') ? 'selected' : '' }}">

themes/grav/templates/settings.html.twig

@@ -5,15 +5,21 @@
     <script src="{{ theme_url }}/js/dynfields/dynfields.js"></script>
 {% endblock %}
 
-{% block content %}
-
-    <div class="admin-block">
-        <h1>
-            Site Settings
-        </h1>
-
-        {% include 'partials/messages.html.twig' %}
-        {% include 'partials/blueprints.html.twig' with { blueprints: admin.blueprints('site'), data: admin.data('site') } %}
+{% 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 - Site</h1>
+{% endblock %}
+
+{% block content_top %}
+    <ul class="tab-bar">
+        <li><a href="{{ base_url_relative }}/configuration/">System</a></li>
+        <li class="active"><span>Site</span></li>
+    </ul>
+{% endblock %}
+
+{% block content %}
+    {% include 'partials/blueprints.html.twig' with { blueprints: admin.blueprints('site'), data: admin.data('site') } %}
 {% endblock %}