Final tabs stuff

CHANGELOG.md

@@ -2,6 +2,7 @@
 ## 02/xx/2017
 
 1. [](#new)
+    * New flex-based/js Tabs system for better flexibility and improved UX.
     * Added new **toolbox** with `Direct-Install` option via ZIP or URL.
     * Added an option to reinstall a plugin/theme already installed [#984](https://github.com/getgrav/grav-plugin-admin/issues/984)
     * Added a new **range field** [#995](https://github.com/getgrav/grav-plugin-admin/issues/995)

themes/grav/scss/preset.scss

@@ -830,6 +830,8 @@ form {
 
             a {
                 color: shade($content-text, 10%);
+                border: 0 solid transparent;
+
                 &:hover {
                     color: shade($content-text, 20%);
                     background: linear-gradient(to bottom, rgba($content-bg,0), shade($content-bg,7%));

themes/grav/scss/template/_tabs.scss

@@ -1,6 +1,43 @@
-
 $tab-label-height:3.5em;
 
+// New JS powered tabs
+.form-tabs {
+
+    .admin-pages & {
+
+        margin-top: -2rem;
+        .tabs-nav {
+            margin-right: 260px;
+        }
+    }
+
+    .tabs-nav {
+        @include display(flex);
+
+        a {
+            @include flex(1);
+            transition: color 0.5s ease, background 0.5s ease;
+            cursor: pointer;
+            height: $tab-label-height;
+            text-align:center;
+            line-height: $tab-label-height;
+        }
+    }
+
+    .tabs-content {
+
+        .tab__content {
+            display: none;
+            padding-top: 2rem;
+
+            &.active {
+                display: block;
+            }
+        }
+    }
+}
+
+// Old tabs here for posterity!
 .tab-bar {
     @include clearfix;
     margin: 0;
@@ -28,103 +65,8 @@ $tab-label-height:3.5em;
         padding: 0 4rem;
         line-height: $tab-label-height;
     }
-
-    li:first-child:nth-last-child(4),
-    li:first-child:nth-last-child(4) ~ li {
-        span, a {
-            padding: 0 3.5rem;
-        }
-    }
-
-    li:first-child:nth-last-child(5),
-    li:first-child:nth-last-child(5) ~ li {
-        span, a {
-            padding: 0 3rem;
-        }
-    }
-
-    li:first-child:nth-last-child(6),
-    li:first-child:nth-last-child(6) ~ li {
-        span, a {
-            padding: 0 2.5rem;
-        }
-    }
-    li:first-child:nth-last-child(n + 7),
-    li:first-child:nth-last-child(n + 7) ~ li {
-        span, a {
-            padding: 0 2rem;
-        }
-    }
-
-}
-
-/* used for wrapper animation after the load of the page */
-@include keyframes(show) {
-    from {
-        opacity:0;
-    }
-    to {
-        opacity:1;
-    }
-}
-
-.form-tabs {
-
-    .admin-pages & {
-
-        margin-top: -2rem;
-        .tabs-nav {
-            margin-right: 260px;
-        }
-    }
-
-    .tabs-nav {
-        @include display(flex);
-
-        a {
-            @include flex(1);
-            @extend .default-animation;
-            cursor: pointer;
-            height: $tab-label-height;
-            text-align:center;
-            line-height: $tab-label-height;
-        }
-    }
-
-
-    .tabs-content {
-
-        .tab__content {
-            display: none;
-            padding-top: 2rem;
-
-            &.active {
-                display: block;
-            }
-        }
-    }
-
 }
 
 
-[id^="tab-"][id$="1"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="1"],
-[id^="tab-"][id$="2"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="2"],
-[id^="tab-"][id$="3"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="3"],
-[id^="tab-"][id$="4"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="4"],
-[id^="tab-"][id$="5"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="5"],
-[id^="tab-"][id$="6"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="6"],
-[id^="tab-"][id$="7"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="7"],
-[id^="tab-"][id$="8"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="8"],
-[id^="tab-"][id$="9"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="9"],
-[id^="tab-"][id$="10"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="10"],
-[id^="tab-"][id$="11"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="11"]
-[id^="tab-"][id$="12"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="12"]
-[id^="tab-"][id$="13"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="13"]
-[id^="tab-"][id$="14"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="14"]
-[id^="tab-"][id$="15"]:checked ~ .tab-body-wrapper [id^="tab-body-"][id$="15"] {
-    position: relative;
-    display: block;
-    opacity: 1;
-}
 
 

themes/grav/templates/config.html.twig

@@ -29,46 +29,40 @@
 {% block content_top %}
 
     <div class="alert notice">{{ "PLUGIN_ADMIN.SAVE_LOCATION"|tu }}: <b>{{ data.file.filename|replace({(base_path):''}) }}</b></div>
-    <ul class="tab-bar">
+    <div class="form-tabs">
+        <div class="tabs-nav">
 
-        {% if authorize(['admin.configuration_system', 'admin.super']) %}
+            {% if authorize(['admin.configuration_system', 'admin.super']) %}
-        <li {% if config_slug == 'system' %}class="active"{% endif %}>
+            <a {% if config_slug == 'system' %}class="active"{% endif %} href="{{ base_url_relative }}/config/system">
-            {% if config_slug == 'system' %}<span>{% else %}<a href="{{ base_url_relative }}/config/system">{% endif %}
+                {{ "PLUGIN_ADMIN.SYSTEM"|tu }}
-            {{ "PLUGIN_ADMIN.SYSTEM"|tu }}
+            </a>
-            {% if config_slug == 'system' %}</span>{% else %}</a>{% endif %}
-        </li>
-        {% endif %}
-
-        {% if authorize(['admin.configuration_site', 'admin.super']) %}
-        <li {% if config_slug == 'site' %}class="active"{% endif %}>
-            {% if config_slug == 'site' %}<span>{% else %}<a href="{{ base_url_relative }}/config/site">{% endif %}
-            {{ "PLUGIN_ADMIN.SITE"|tu }}
-            {% if config_slug == 'site' %}</span>{% else %}</a>{% endif %}
-        </li>
-        {% endif %}
-
-        {% for configuration in admin.configurations %}
-            {% if authorize(['admin.configuration_' ~ configuration, 'admin.super']) %}
-                {% set current_blueprints = admin.data('config/' ~ configuration).blueprints.toArray() %}
-                {% if configuration != 'system' and configuration != 'site' and not current_blueprints.form.hidden and current_blueprints.form.fields is not empty %}
-                    <li {% if config_slug == configuration %}class="active"{% endif %}>
-                        {% if config_slug == configuration %}<span>{% else %}<a href="{{ base_url_relative }}/config/{{configuration}}">{% endif %}
-                        {{ configuration|tu|capitalize }}
-                        {% if config_slug == configuration %}</span>{% else %}</a>{% endif %}
-                    </li>
-                {% endif %}
             {% endif %}
-        {% endfor %}
 
-        {% if authorize(['admin.configuration_info', 'admin.super']) %}
+            {% if authorize(['admin.configuration_site', 'admin.super']) %}
-        <li {% if config_slug == 'info' %}class="active"{% endif %}>
+            <a {% if config_slug == 'site' %}class="active"{% endif %} href="{{ base_url_relative }}/config/site">
-            {% if config_slug == 'info' %}<span>{% else %}<a href="{{ base_url_relative }}/config/info">{% endif %}
+                {{ "PLUGIN_ADMIN.SITE"|tu }}
-            {{ "PLUGIN_ADMIN.INFO"|tu }}
+            </a>
-            {% if config_slug == 'info' %}</span>{% else %}</a>{% endif %}
+            {% endif %}
-        </li>
-        {% endif %}
 
-    </ul>
+            {% for configuration in admin.configurations %}
+                {% if authorize(['admin.configuration_' ~ configuration, 'admin.super']) %}
+                    {% set current_blueprints = admin.data('config/' ~ configuration).blueprints.toArray() %}
+                    {% if configuration != 'system' and configuration != 'site' and not current_blueprints.form.hidden and current_blueprints.form.fields is not empty %}
+                        <a {% if config_slug == configuration %}class="active"{% endif %} href="{{ base_url_relative }}/config/{{configuration}}">
+                            {{ configuration|tu|capitalize }}
+                        </a>
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+
+            {% if authorize(['admin.configuration_info', 'admin.super']) %}
+            <a {% if config_slug == 'info' %}class="active"{% endif %} href="{{ base_url_relative }}/config/info">
+                {{ "PLUGIN_ADMIN.INFO"|tu }}
+            </a>
+            {% endif %}
+
+        </div>
+    </div>
 {% endblock %}
 
 {% block content %}