Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2025-11-14 09:16:05 +01:00
Code Issues Packages Projects Releases Activity

Final tabs stuff

Browse Source
This commit is contained in:
Andy Miller
2017-03-10 16:47:18 -07:00
parent 27309f4ed1
commit 3341ba4e8b
8 changed files with 210 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

16
themes/grav/css-compiled/preset.css.map
View File

File diff suppressed because one or more lines are too long

4
themes/grav/css-compiled/template.css vendored
View File

File diff suppressed because one or more lines are too long

121
themes/grav/css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

2
themes/grav/scss/preset.scss
View File

@@ -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%));

134
themes/grav/scss/template/_tabs.scss
View File

@@ -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;
}

30
themes/grav/templates/config.html.twig
View File

@@ -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 %}
<a {% if config_slug == 'system' %}class="active"{% endif %} href="{{ base_url_relative }}/config/system">
{{ "PLUGIN_ADMIN.SYSTEM"|tu }}
{% if config_slug == 'system' %}</span>{% else %}</a>{% endif %}
</li>
</a>
{% 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 %}
<a {% if config_slug == 'site' %}class="active"{% endif %} href="{{ base_url_relative }}/config/site">
{{ "PLUGIN_ADMIN.SITE"|tu }}
{% if config_slug == 'site' %}</span>{% else %}</a>{% endif %}
</li>
</a>
{% 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 %}
<a {% if config_slug == configuration %}class="active"{% endif %} href="{{ base_url_relative }}/config/{{configuration}}">
{{ configuration|tu|capitalize }}
{% if config_slug == configuration %}</span>{% else %}</a>{% endif %}
</li>
</a>
{% endif %}
{% 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 %}
<a {% if config_slug == 'info' %}class="active"{% endif %} href="{{ base_url_relative }}/config/info">
{{ "PLUGIN_ADMIN.INFO"|tu }}
{% if config_slug == 'info' %}</span>{% else %}</a>{% endif %}
</li>
</a>
{% endif %}
</ul>
</div>
</div>
{% endblock %}
{% block content %}