Added page legend #637

CHANGELOG.md

@@ -3,8 +3,10 @@
 
 1. [](#improved)
     * Cleaned up the Page Preview CSS to make it more 'standard' [#634](https://github.com/getgrav/grav-plugin-admin/issues/634)
+    * Added a legend with the Page colors explained [#637](https://github.com/getgrav/grav-plugin-admin/issues/637)
 1. [](#bugfix)
     * Fixed "Data type `System` doesn't exist!" error when activating a theme [#635](https://github.com/getgrav/grav-plugin-admin/issues/635)
+    * Fixed issue with custom media types not deleting on save [#633](https://github.com/getgrav/grav-plugin-admin/issues/633)
     * Fixed issue when saving `List` field type in plugins + pages
 
 

languages/en.yaml

@@ -560,3 +560,4 @@ PLUGIN_ADMIN:
   THUMB: "Thumb"
   TYPE: "Type"
   FILE_EXTENSION: "File Extension"
+  LEGEND: "Page Legend"

themes/grav/scss/template/_pages.scss

@@ -99,8 +99,19 @@
         &.modular {
             color: #9055AF;
         }
+    }
 
+    #pages-legend {
+        margin-top: 1.5rem;
+        text-align: center;
 
+        h2, ul, li {
+            display: inline-block;
+        }
+
+        li {
+            margin-right: 0.75rem;
+        }
     }
 }
 

themes/grav/templates/pages.html.twig

@@ -270,9 +270,12 @@
                 <span class="button button-x-small" data-page-toggleall="collapse"><i class="fa fa-fw fa-minus-circle"></i> {{ "PLUGIN_ADMIN.COLLAPSE_ALL"|tu }}</span>
             </div>
         </form>
-        <ul class="pages-list depth-0">
+        <div class="pages-list">
+            <ul class="depth-0">
                 {{ _self.loop(pages, 0, _context) }}
             </ul>
+            {% include 'partials/page-legend.html.twig' %}
+        </div>
     {% endif %}
     </div>
 

themes/grav/templates/partials/page-legend.html.twig

@@ -0,0 +1,11 @@
+{% set legend = {'VISIBLE':'', 'NON_ROUTABLE':'not-routable', 'NON_VISIBLE':'not-visible', 'MODULAR':'modular'} %}
+<div id="pages-legend">
+    <strong>{{ 'PLUGIN_ADMIN.LEGEND'|tu }}:</strong>
+    <ul>
+        {% for key, class in legend %}
+        <li><i class="page-icon fa fa-fw fa-circle-o {{ class }}"></i> {{ ('PLUGIN_ADMIN.'~key)|tu }}</li>
+        {% endfor %}
+    </ul>
+</div>
+
+