Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2026-02-21 05:57:56 +01:00
Code Issues Packages Projects Releases Activity

Part 1 of the tabs rework

Browse Source
This commit is contained in:
Andy Miller
2017-03-10 14:45:38 -07:00
parent 27ede31b72
commit 6d52b5f430
9 changed files with 79 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/grav/css-compiled/preset.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@@ -802,42 +802,45 @@ form {
background-color: #eee;
}
}
#admin-main {
.form-tabs {
background: $content-tabs-bg;
.form-tabs {
background: $content-tabs-bg;
.tabs-nav {
a {
color: $content-tabs-text;
&:hover {
color: lighten($content-tabs-text, 10%);
background: lighten($content-tabs-bg,10%);
}
> input[type=radio] {
&:checked{
+ label {
background: $content-bg;
color: $content-text;
&.active {
background: $content-bg;
color: $content-text;
}
}
}
}
> label {
color: $content-tabs-text;
&:hover {
color: lighten($content-tabs-text, 10%);
background: lighten($content-tabs-bg,10%);
}
}
&.subtle {
background: shade($content-bg, 5%);
&.subtle {
background: shade($content-bg, 5%);
> label {
color: shade($content-text, 10%);
&:hover {
color: shade($content-text, 20%);
background: shade($content-bg, 10%);
a {
color: shade($content-text, 10%);
&:hover {
color: shade($content-text, 20%);
background: shade($content-bg, 10%);
}
}
}
.tabs-content {
background: $content-bg;
}
}
}
.tab-body-wrapper {
background: $content-bg;
}
.switch-grav {
background-color: $form-field-bg;

5
themes/grav/scss/template/_pages.scss
View File

@@ -252,9 +252,14 @@
float: left;
margin-right: 5px;
button {
padding: 0.3rem 0.5rem;
}
.dropdown-menu {
button {
width: 100%;
}
}
}

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

@@ -69,45 +69,43 @@ $tab-label-height:3.5em;
}
.form-tabs {
margin-top: -2rem;
@include breakpoint(mobile-only){
padding-top: 4rem;
}
.admin-pages & {
> input[type=radio] {
display:none;
}
> label {
@extend .default-animation;
display:inline-block;
cursor: pointer;
height: $tab-label-height;
text-align:center;
line-height: $tab-label-height;
padding: 0 2rem;
@include breakpoint(mobile-only){
width: 100%;
}
&:last-of-type {
border-bottom:none;
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;
}
}
}
.tab-body {
position:absolute;
display: none;
opacity: 0;
width: 100%;
.tabs-content {
.tab__content {
display: none;
padding-top: 2rem;
&.active {
display: block;
}
}
}
}
.tab-body-wrapper {
padding-top: $tab-label-height;
}
[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"],

17
themes/grav/templates/forms/fields/tabs/tabs.html.twig
View File

@@ -11,20 +11,27 @@
{% if field.fields %}
{% set storedValue = get_cookie('grav-tabs-state')|default('{}')|json_decode %}
{% set tabsKey = field.fields|keys|join('.') %}
<div class="tabs-nav">
{% for tab in field.fields %}
{% if tab.type == 'tab' and (tab.security is empty or authorize(array(tab.security))) %}
<input type="radio" name="tab-{{ tabsKey }}" id="tab-{{ tabsKey ~ loop.index }}" value="{{ (scope ~ tab.name) }}" class="tab-head no-form" {{ ((attribute(storedValue, 'tab-' ~ tabsKey) == scope ~ tab.name) or active == loop.index) ? 'checked="checked"' : '' }}/>
<label for="tab-{{ tabsKey ~ loop.index }}">
{#<input type="radio" name="tab-{{ tabsKey }}" id="tab-{{ tabsKey ~ loop.index }}" value="{{ (scope ~ tab.name) }}" class="tab-head no-form" />#}
{#<label for="tab-{{ tabsKey ~ loop.index }}">#}
{#{% if grav.twig.twig.filters['tu'] is defined %}{{ tab.title|tu }}{% else %}{{ tab.title|t }}{% endif %}#}
{#</label>#}
<a class="tab__link {{ ((attribute(storedValue, 'tab-' ~ tabsKey) == scope ~ tab.name) or active == loop.index) ? 'active' : '' }}" href="#" data-tabid="tab-{{ tabsKey ~ loop.index }}">
{% if grav.twig.twig.filters['tu'] is defined %}{{ tab.title|tu }}{% else %}{{ tab.title|t }}{% endif %}
</label>
</a>
{% endif %}
{% endfor %}
<div class="tab-body-wrapper">
</div>
<div class="tabs-content">
{% for field in field.fields %}
{% if field.type == 'tab' %}
{% if field.security is empty or authorize(array(field.security)) %}
{% set value = data.value(field.name) %}
<div id="tab-body-{{ tabsKey ~ loop.index }}" class="tab-body">
<div id="tab-content-{{ tabsKey ~ loop.index }}" class="tab__content {{ ((attribute(storedValue, 'tab-' ~ tabsKey) == scope ~ tab.name) or active == loop.index) ? 'active' : '' }}">
{% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
</div>
{% endif %}

2
themes/grav/templates/pages.html.twig
View File

@@ -198,7 +198,7 @@
{% endblock %}
{% block content %}
<div class="clear">
<div class="clear admin-pages">
{% if mode == 'new' %}
{% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/page'), data: context } %}
{% elseif mode == 'edit' %}