mirror of
https://github.com/getgrav/grav-plugin-admin.git
synced 2025-11-14 09:16:05 +01:00
Final tabs stuff
This commit is contained in:
Andy Miller
@@ -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)
|
||||
|
||||
4
themes/grav/css-compiled/preset.css
vendored
4
themes/grav/css-compiled/preset.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
themes/grav/css-compiled/template.css
vendored
4
themes/grav/css-compiled/template.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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%));
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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']) %}
|
||||
<li {% if config_slug == 'system' %}class="active"{% endif %}>
|
||||
{% if config_slug == 'system' %}<span>{% else %}<a href="{{ base_url_relative }}/config/system">{% endif %}
|
||||
{{ "PLUGIN_ADMIN.SYSTEM"|tu }}
|
||||
{% 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 %}
|
||||
{% if authorize(['admin.configuration_system', 'admin.super']) %}
|
||||
<a {% if config_slug == 'system' %}class="active"{% endif %} href="{{ base_url_relative }}/config/system">
|
||||
{{ "PLUGIN_ADMIN.SYSTEM"|tu }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if authorize(['admin.configuration_info', 'admin.super']) %}
|
||||
<li {% if config_slug == 'info' %}class="active"{% endif %}>
|
||||
{% if config_slug == 'info' %}<span>{% else %}<a href="{{ base_url_relative }}/config/info">{% endif %}
|
||||
{{ "PLUGIN_ADMIN.INFO"|tu }}
|
||||
{% if config_slug == 'info' %}</span>{% else %}</a>{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if authorize(['admin.configuration_site', 'admin.super']) %}
|
||||
<a {% if config_slug == 'site' %}class="active"{% endif %} href="{{ base_url_relative }}/config/site">
|
||||
{{ "PLUGIN_ADMIN.SITE"|tu }}
|
||||
</a>
|
||||
{% 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 %}
|
||||
|
||||
Reference in New Issue
Block a user