Merge branch 'redesign' into feature/redesign

themes/grav/css-compiled/template.css

@@ -630,6 +630,29 @@ form .checkboxes {
   padding: 10px;
   height: 130px; }
 
+ul#ordering {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+  ul#ordering li {
+    padding: 0.2rem 1rem;
+    border-radius: 4px;
+    border: 1px solid #d4d4d4;
+    background: #f8f8f8;
+    color: #8d959a;
+    margin: 3px 0;
+    position: relative;
+    font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+    ul#ordering li.drag-handle {
+      cursor: move;
+      background: white;
+      color: #5b6266; }
+      ul#ordering li.drag-handle::after {
+        content: '\f0c9';
+        font-family: FontAwesome;
+        position: absolute;
+        right: 10px; }
+
 td {
   border: 0;
   border-bottom: 1px solid #e1e1e1; }

themes/grav/scss/template/_forms.scss

@@ -344,3 +344,34 @@ form {
         height: 130px;
     }
 }
+
+// Sortables
+ul#ordering {
+    
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+        padding: 0.2rem 1rem;
+        border-radius: $form-border-radius;
+        border: 1px solid $form-border; 
+        background: lighten($content-bg, 4%);
+        color: lighten($content-fg,10%);
+        margin: 3px 0;
+        position: relative;
+        font-family: $font-family-default;
+
+        &.drag-handle {
+            cursor: move;
+            background: lighten($content-bg, 7%);
+            color: darken($content-fg,10%);
+            &::after {
+                content: '\f0c9';
+                font-family: FontAwesome;
+                position: absolute;
+                right: 10px;
+            }
+        }
+    }
+}

themes/grav/templates/forms/fields/order/order.html.twig

@@ -16,11 +16,19 @@
     <div class="form-data block size-2-3 pure-u-2-3">
         <div class="form-order-wrapper {{ field.size }}">
             <input type="hidden" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value }}" />
-            <ul class="ordering {{ field.classes }}">
+            <ul id="ordering" class="{{ field.classes }}">
                 {% for page in siblings %}
-                <li {% if page.order  == value %}class="selected"{% endif %} data-value="{{ page.slug }}">{{ page.title() }}</li>
+                <li class="{% if page.order  == value %}drag-handle{% else %}ignore{% endif %}" data-id="{{ page.slug }}">{{ page.title() }}</li>
                 {% endfor %}
             </ul>
         </div>
     </div>
+    <script type="text/javascript" src="{{ theme_url }}/js/sortable.min.js"></script>
+    <script>
+        var el = document.getElementById('ordering');
+        new Sortable(el, {
+            filter: ".ignore"
+            // draggable: ".drag-handle"
+        });   
+    </script>
 </div>