started on new pages layout

themes/grav/css-compiled/template.css

@@ -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 */

themes/grav/scss/template.scss

@@ -51,6 +51,9 @@
 // Admin
 @import "template/admin";
 
+// Pages
+@import "template/pages";
+
 // Custom
 @import "template/custom";
 

themes/grav/scss/template/_pages.scss

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

themes/grav/templates/pages.html.twig

@@ -1,45 +1,24 @@
 {% extends 'partials/base.html.twig' %}
 
-{% macro loop(page, base_url) %}
+{% macro loop(page, base_url, depth) %}
-    {% set orderby = page.orderBy() %}
-    {% if orderby != 'default' %}
-    <li class="notice">Sub-pages ordered by: <strong>{{ orderby|capitalize }}</strong></li>
-    {% endif %}
     {% for p in page.children %}
-        {% if orderby == 'default' %}
+        <li class="page-item">
-            <li class="dd-item" data-id="{{ p.route }}">
+            <div class="row">
-                <div class="dd-handle">
+                <span class="page-icon {{ p.visible ? 'visible' : (not p.page ? 'folder' : (p.routable ? 'page' : 'not-routable')) }}"></span>
-          {#           <span class="">
+                {{ p.menu }} {{ p.modular() ? '(Modular)' }}
-                        <i class="fa fa-bars fa-fixed-width"></i>
+                <span class="page-home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
-                    </span> #}
+                <span class="page-tools">
-                    <i class="fa {{ p.visible ? 'fa-check-square-o' : (not p.page ? 'fa-folder-open-o' : (p.routable ? 'fa-square-o' : 'fa-shield')) }}"></i>
+                    <a href="{{ base_url }}/pages/{{ p.route|trim('/') }}" class="page-edit"><i class="fa fa-pencil"></i></a>
-                    {{ p.menu }} {{ p.modular() ? '(Modular)' }}
+                    <a href="{{ base_url }}/pages/{{ p.route|trim('/') }}/task:delete" class="page-delete"><i class="fa fa-close"></i></a>
-                    <span class="dd-nodrag home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
+                </span>
-                    <span class="dd-nodrag edit"><a href="{{ base_url }}/pages/{{ p.route|trim('/') }}"><i class="fa fa-edit"></i></a></span>
+            </div>
-                    <span class="dd-nodrag delete"><a href="{{ base_url }}/pages/{{ p.route|trim('/') }}/task:delete"><i class="fa fa-trash-o"></i></a></span>
+            {% if p.children.count > 0 and not p.modular() %}
-                </div>
+
-                {% if p.children.count > 0 and not p.modular() %}
+            <ul class="depth-{{ depth + 1 }}">
-                <ol class="dd-list">
+                {{ _self.loop(p, base_url, depth + 1) }}
-                    {{ _self.loop(p, base_url) }}
+            </ul>
-                </ol>
+            {% endif %}
-                {% endif %}
+        </li>
-            </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 %}
     {% 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() }}
+{% endblock %}
-    <script type="text/javascript" src="{{ theme_url }}/js/jquery.nestable.js"></script>
+
-    <script type="text/javascript" src="{{ theme_url }}/js/dynfields/array.js"></script>
+{% block titlebar %}
-    <script type="text/javascript">
+    <div class="button-bar">
-    $(document).ready(function()
+        {% if not uri.param('new') %}
-    {
+            <button class="button" href="{{ uri.route(true) }}/new:1"><i class="fa fa-plus"></i> Add Page</button>
-        $('#nestable').nestable();
+            {% if context %}
-    });
+                {% if not uri.param('expert') %}
-    </script>
+                    <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">
+        <ul class="pages-list depth-0">
-            <ol class="dd-list">
+            {{ _self.loop(pages, base_url_relative, 0) }}
-                {{ _self.loop(pages, base_url_relative) }}
+        </ul>
-            </ol>
-        </div>
 
     {% endif %}
     </div>

themes/grav/templates/partials/base.html.twig

@@ -37,7 +37,7 @@
         {
             // selectize
             $('select.fancy').selectize({
-                create: true
+                createOnBlur: true
             });
 
             $('input.fancy').selectize({