mirror of
https://github.com/getgrav/grav-plugin-admin.git
synced 2025-12-16 05:20:31 +01:00
started on new pages layout
This commit is contained in:
Andy Miller
@@ -911,4 +911,75 @@ tr {
|
||||
.ct-chart .ct-series.ct-series-b .ct-slice.ct-donut {
|
||||
stroke: rgba(255, 255, 255, 0.2) !important; }
|
||||
|
||||
.pages-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: 1px solid #e1e1e1; }
|
||||
.pages-list ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.pages-list li {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.pages-list .row {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
line-height: 2.5rem;
|
||||
padding-right: 3rem; }
|
||||
.pages-list .row:hover {
|
||||
background: #f3f3f3; }
|
||||
.pages-list .page-tools {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 1.4rem; }
|
||||
.pages-list .page-tools i {
|
||||
margin-left: 10px; }
|
||||
.pages-list .page-home {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 10px;
|
||||
color: #bbbbbb;
|
||||
vertical-align: middle; }
|
||||
.pages-list .page-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
background: #0082BA;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle; }
|
||||
|
||||
.depth-0 .row {
|
||||
padding-left: 3rem; }
|
||||
|
||||
.depth-1 .row {
|
||||
padding-left: 6rem; }
|
||||
|
||||
.depth-2 .row {
|
||||
padding-left: 9rem; }
|
||||
|
||||
.depth-3 .row {
|
||||
padding-left: 12rem; }
|
||||
|
||||
.depth-4 .row {
|
||||
padding-left: 15rem; }
|
||||
|
||||
.depth-5 .row {
|
||||
padding-left: 18rem; }
|
||||
|
||||
.depth-6 .row {
|
||||
padding-left: 21rem; }
|
||||
|
||||
.depth-7 .row {
|
||||
padding-left: 24rem; }
|
||||
|
||||
.depth-8 .row {
|
||||
padding-left: 27rem; }
|
||||
|
||||
.depth-9 .row {
|
||||
padding-left: 30rem; }
|
||||
|
||||
/*# sourceMappingURL=template.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -51,6 +51,9 @@
|
||||
// Admin
|
||||
@import "template/admin";
|
||||
|
||||
// Pages
|
||||
@import "template/pages";
|
||||
|
||||
// Custom
|
||||
@import "template/custom";
|
||||
|
||||
|
||||
62
themes/grav/scss/template/_pages.scss
Normal file
62
themes/grav/scss/template/_pages.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.pages-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border-top: 1px solid darken($content-bg, 5%);
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
@include transition(all 0.2s ease);
|
||||
border-bottom: 1px solid darken($content-bg, 5%);
|
||||
line-height: 2.5rem;
|
||||
padding-right: 3rem;
|
||||
|
||||
&:hover {
|
||||
background: lighten($content-bg,2%);
|
||||
}
|
||||
}
|
||||
|
||||
.page-tools {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 1.4rem;
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-home {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 10px;
|
||||
color: darken($content-bg, 20%);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
background: #0082BA;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 to 10 {
|
||||
.depth-#{$i} .row {
|
||||
padding-left: 3rem * ($i + 1);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,24 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% macro loop(page, base_url) %}
|
||||
{% set orderby = page.orderBy() %}
|
||||
{% if orderby != 'default' %}
|
||||
<li class="notice">Sub-pages ordered by: <strong>{{ orderby|capitalize }}</strong></li>
|
||||
{% endif %}
|
||||
{% macro loop(page, base_url, depth) %}
|
||||
{% for p in page.children %}
|
||||
{% if orderby == 'default' %}
|
||||
<li class="dd-item" data-id="{{ p.route }}">
|
||||
<div class="dd-handle">
|
||||
{# <span class="">
|
||||
<i class="fa fa-bars fa-fixed-width"></i>
|
||||
</span> #}
|
||||
<i class="fa {{ p.visible ? 'fa-check-square-o' : (not p.page ? 'fa-folder-open-o' : (p.routable ? 'fa-square-o' : 'fa-shield')) }}"></i>
|
||||
{{ p.menu }} {{ p.modular() ? '(Modular)' }}
|
||||
<span class="dd-nodrag home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
|
||||
<span class="dd-nodrag edit"><a href="{{ base_url }}/pages/{{ p.route|trim('/') }}"><i class="fa fa-edit"></i></a></span>
|
||||
<span class="dd-nodrag delete"><a href="{{ base_url }}/pages/{{ p.route|trim('/') }}/task:delete"><i class="fa fa-trash-o"></i></a></span>
|
||||
</div>
|
||||
{% if p.children.count > 0 and not p.modular() %}
|
||||
<ol class="dd-list">
|
||||
{{ _self.loop(p, base_url) }}
|
||||
</ol>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="dd-item">
|
||||
<div class="row">
|
||||
<i class="fa {{ p.visible ? 'fa-check-square-o' : (not p.page ? 'fa-folder-open-o' : (p.routable ? 'fa-square-o' : 'fa-shield')) }}"></i>
|
||||
{{ p.menu }} {{ p.modular() ? '(Modular)' }}
|
||||
<span class="dd-nodrag home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
|
||||
<span class="edit"><a href="{{ base_url }}/pages/{{ p.route|trim('/') }}"><i class="fa fa-edit"></i></a></span>
|
||||
<span class="delete"><a href="{{ base_url }}/pages/{{ p.route|trim('/') }}/task:delete"><i class="fa fa-trash-o"></i></a></span>
|
||||
</div>
|
||||
{% if p.children.count > 0 and not p.modular() %}
|
||||
<ol class="dd-list">
|
||||
{{ _self.loop(p, base_url) }}
|
||||
</ol>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="page-item">
|
||||
<div class="row">
|
||||
<span class="page-icon {{ p.visible ? 'visible' : (not p.page ? 'folder' : (p.routable ? 'page' : 'not-routable')) }}"></span>
|
||||
{{ p.menu }} {{ p.modular() ? '(Modular)' }}
|
||||
<span class="page-home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
|
||||
<span class="page-tools">
|
||||
<a href="{{ base_url }}/pages/{{ p.route|trim('/') }}" class="page-edit"><i class="fa fa-pencil"></i></a>
|
||||
<a href="{{ base_url }}/pages/{{ p.route|trim('/') }}/task:delete" class="page-delete"><i class="fa fa-close"></i></a>
|
||||
</span>
|
||||
</div>
|
||||
{% if p.children.count > 0 and not p.modular() %}
|
||||
|
||||
<ul class="depth-{{ depth + 1 }}">
|
||||
{{ _self.loop(p, base_url, depth + 1) }}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -48,113 +27,53 @@
|
||||
{% set context = admin.page(true) %}
|
||||
{% endif %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
[data-grav-remfield], [data-grav-addfield]{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dd {
|
||||
float: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-width: 180px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol > li:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
ol > li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
ol .label {
|
||||
min-width: 60px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dd3-content {padding-left: 0;}
|
||||
.dd-handle ~ .dd3-content {padding-left: 40px;}
|
||||
|
||||
.dd-list {clear: both;}
|
||||
.dd3-content, .dd3-handle { height: auto; }
|
||||
.dd-grav-actions {position: absolute; right: 5px; z-index: 2;}
|
||||
.dd-handle, .dd3-handle { bottom: 0; cursor: move;}
|
||||
.dd-grav-item {position: relative;padding-left: 22px;}
|
||||
.dd-grav-item .dd3-handle {background: transparent; border: 0;}
|
||||
.dd-grav-item .dd3-handle:before {color: #b8b8b8;top: 0; padding: 0; width: 15px;}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block javascript %}
|
||||
{{ parent() }}
|
||||
<script type="text/javascript" src="{{ theme_url }}/js/jquery.nestable.js"></script>
|
||||
<script type="text/javascript" src="{{ theme_url }}/js/dynfields/array.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function()
|
||||
{
|
||||
$('#nestable').nestable();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block titlebar %}
|
||||
<div class="button-bar">
|
||||
{% if not uri.param('new') %}
|
||||
<button class="button" href="{{ uri.route(true) }}/new:1"><i class="fa fa-plus"></i> Add Page</button>
|
||||
{% if context %}
|
||||
{% if not uri.param('expert') %}
|
||||
<button class="button" href="{{ uri.route(true) }}/expert:1">Normal mode</button>
|
||||
{% else %}
|
||||
<button class="button" href="{{ uri.route(true) }}">Expert mode</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if uri.param('new') %}
|
||||
<h1><i class="fa fa-fw fa-file-text-o"></i> Add Page</h1>
|
||||
{% elseif context %}
|
||||
<h1><i class="fa fa-fw fa-file-text-o"></i>
|
||||
{{ context.exists ? "Edit '#{context.menu}'" : "Create '#{context.menu}'" }}
|
||||
</h1>
|
||||
{% else %}
|
||||
<h1><i class="fa fa-fw fa-file-text-o"></i> Manage Pages</h1>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
{% include 'partials/messages.html.twig' %}
|
||||
|
||||
<div class="button-bar">
|
||||
{% if not uri.param('new') %}
|
||||
<a class="button" href="{{ uri.route(true) }}/new:1">Add page</a>
|
||||
{% if context %}
|
||||
{% if not uri.param('expert') %}
|
||||
<a class="button" href="{{ uri.route(true) }}/expert:1">Normal mode</a>
|
||||
{% else %}
|
||||
<a class="button" href="{{ uri.route(true) }}">Expert mode</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="admin-block clear">
|
||||
{% if uri.param('new') %}
|
||||
<h1>
|
||||
Add page
|
||||
</h1>
|
||||
|
||||
{% include 'partials/messages.html.twig' %}
|
||||
{% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('page'), data: context } %}
|
||||
{% elseif context %}
|
||||
<h1>
|
||||
|
||||
{{ context.exists ? "Edit '#{context.menu}'" : "Create '#{context.menu}'" }}
|
||||
{{ file.writable ? '' : '<small>Read only</small>' }}
|
||||
</h1>
|
||||
|
||||
{% if not uri.param('expert') %}
|
||||
{% include 'partials/blueprints.html.twig' with { blueprints: context.blueprints, data: context } %}
|
||||
{% include 'partials/blueprints.html.twig' with { blueprints: context.blueprints, data: context } %}
|
||||
{% else %}
|
||||
{% include 'partials/blueprints-raw.html.twig' with { blueprints: admin.blueprints('page'), data: context } %}
|
||||
{% include 'partials/blueprints-raw.html.twig' with { blueprints: admin.blueprints('page'), data: context } %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<h1>Pages</h1>
|
||||
<p>You can easily modify the order of page items by dragging-and-dropping the page items in this list.</p>
|
||||
|
||||
<div class="dd" id="nestable">
|
||||
<ol class="dd-list">
|
||||
{{ _self.loop(pages, base_url_relative) }}
|
||||
</ol>
|
||||
</div>
|
||||
<ul class="pages-list depth-0">
|
||||
{{ _self.loop(pages, base_url_relative, 0) }}
|
||||
</ul>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
{
|
||||
// selectize
|
||||
$('select.fancy').selectize({
|
||||
create: true
|
||||
createOnBlur: true
|
||||
});
|
||||
|
||||
$('input.fancy').selectize({
|
||||
|
||||
Reference in New Issue
Block a user