Changed flat navigation nav-drawer menu code to make all items structured...

Changed flat navigation nav-drawer menu code to make all items structured uniformly and improve the layout of the menu.

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2017-03-06 - Changed flat navigation nav-drawer menu code to make all items structured uniformly and improve the layout of the menu.
 * 2017-03-02 - Added Font Awesome
 * 2017-02-04 - Setting to be able to add blocks to the footer and set a one up to three columns layout in the footer
 * 2017-02-22 - Initial creation of a Boost child theme

README.md

@@ -71,6 +71,10 @@ Further improvements to Boost core theme
 
 To be able to use icons provided by Font Awesome it is added to theme_boost_campus.
 
+### Flat navigation (nav-drawer) menu
+
+We improved the code of the new flatnavigation nay-drawer menu items to be uniformly. Furthermore, we improved the layout of the menu by styling borders, icons and margins. Now a user can recognize faster what items belong together to a parent node.
+
 
 Further information
 -------------------

scss/post.scss

@@ -6,3 +6,132 @@
 #page-footer .block {
     color: $gray-dark;
 }
+
+/*------------------------------------
+  Nav drawer menu
+  -------------------------------------*/
+
+/*
+ * We separate or junk sections together by dividing
+ * them either by a solid or a dotted line. For the course
+ * sections, we display no borders to make clear they are a
+ * separate unit.
+ * Icons will be added to menu items that are children of a
+ * root item and the ident has to be adjusted for consistency
+ * throuout the improved menu layout.
+ */
+
+#nav-drawer {
+
+    /*
+     * General preparation.
+     */
+
+    /* First remove all existing borders from the menu items + reset the bottom margin. */
+    .list-group-item {
+        border: 0;
+        margin-bottom: 0;
+    }
+
+     /* Reduce space between pix icons and text as this is too much*/
+    .media-left {
+        padding-right: 2px;
+    }
+
+    /* Hide icons of items that don't need one.*/
+    a.list-group-item span.media-left > img {
+        display: none;
+    }
+
+    /*
+     * General left menu.
+     */
+
+    /* Add solid border: myhome, website start and calendar. */
+    a.list-group-item[data-key|=myhome],
+    a.list-group-item[data-key|=home],
+    a.list-group-item[data-key|=calendar] {
+        @include navdrawer-node-separator(parent);
+    }
+
+    /* Menu item: my files. */
+    a.list-group-item[href*="files"] {
+        border-bottom-right-radius: .25rem;
+        border-bottom-left-radius: .25rem;
+    }
+
+    /* Menu item: my courses. */
+    /* Separate the courses menu items from the other ones and add a bottom border*/
+    div.list-group-item[data-key|=mycourses] {
+        @include navdrawer-node-separator(parent);
+        margin-top: 15px;
+        border-top-right-radius: .25rem;
+        border-top-left-radius: .25rem;
+    }
+
+    /* Dashed border for all courses I'm enrolled in except the last one. */
+    a.list-group-item[href*="course/view.php?id="] {
+        @include navdrawer-node-separator(child);
+    }
+    a.list-group-item[href*="course/view.php?id="]:last-child {
+        border-bottom: none;
+    }
+
+    /* Reduce the indent. */
+    div.list-group-item[data-key|=mycourses] ~ a.list-group-item[href*="course/view.php?id="] > div {
+        margin-left: 0px !important;
+    }
+
+    /* Add course icon to each course menu items. */
+    div.list-group-item[data-key|=mycourses] ~ a.list-group-item[href*="course/view.php?id="] span.media-left > img {
+        display: inherit;
+        content: url([[pix:i/course]]);
+    }
+
+    /*
+     * Course home menu
+     */
+
+    /* Add solid border and realign the node with the other ones. */
+    a.list-group-item[data-key|=coursehome] {
+        @include navdrawer-node-separator(parent);
+        padding: .75rem 1.25rem;
+    }
+
+    /* Menu items participants, badges and grades need dashed bottom border. */
+    a.list-group-item[data-key|=participants],
+    a.list-group-item[data-key|=badgesview],
+    a.list-group-item[data-key|=grades] {
+        @include navdrawer-node-separator(child);
+    }
+
+    /* Add icons to menu items participants, badges and grades. */
+    a.list-group-item[data-key|=participants] span.media-left > img {
+        display: inherit;
+        content: url([[pix:i/users]]);
+    }
+    a.list-group-item[data-key|=badgesview] span.media-left > img {
+        display: inherit;
+        content: url([[pix:i/badge]]);
+    }
+    a.list-group-item[data-key|=grades] span.media-left > img {
+        display: inherit;
+        content: url([[pix:i/grades]]);
+    }
+
+    /* Menu items: course sections. */
+    a.list-group-item[href*="section-"] {
+        padding-left: 0.7rem;
+        border: none;
+    }
+
+    /* Add and align icons before course section links */
+    a.list-group-item[href*="section-"] span.media-left > img {
+        display: inherit;
+        content: url([[pix:i/folder]]);
+     }
+
+    a.list-group-item[href*="section-"] .icon{
+        vertical-align: sub;
+    }
+}

scss/pre.scss

+/*-----------------------------
+  Left Menu
+  -----------------------------*/
+/* Mixins */
+@mixin navdrawer-node-separator($nodetype) {
+    @if $nodetype == child {
+        border-bottom: 1px dashed $gray-light;
+        padding-left: 10px;
+    } @else if $nodetype == parent {
+        border-bottom: 1px solid $gray-light;
+    }
+}

templates/columns2.mustache

@@ -50,6 +50,7 @@
 }}
 {{! MODIFICATION:
     * Remove section for footer blocks with own mustache template
+    * Add theme_boost_campus/nav-drawer template instead of theme_boost/nav-drawer template
 }}
 {{{ output.doctype }}}
 <html {{{ output.htmlattributes }}}>
@@ -96,7 +97,7 @@
             </div>
         </div>
     </div>
-    {{> theme_boost/nav-drawer }}
+    {{> theme_boost_campus/nav-drawer }}
 </div>
 
 </body>

templates/flat_navigation.mustache

+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template theme_boost_campus/flat_navigation
+
+    Display the flat navigation for the boost_campus theme
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * flatnavigation - array of flat_navigation_nodes
+      * showdivider - boolean
+      * action - string
+      * isactive - boolean
+      * get_indent - integer
+      * is_section - boolean
+      * text - HTML
+
+    Example context (json):
+    {
+        "flatnavigation" : [
+            {
+                "showdivider": false,
+                "action": "#",
+                "isactive": true,
+                "get_indent": 1,
+                "is_section": false,
+                "text": "First"
+            },{
+                "showdivider": true,
+                "action": "#",
+                "isactive": false,
+                "get_indent": 0,
+                "is_section": true,
+                "text": "Last &amp; Second"
+            }
+        ]
+    }
+}}
+{{! MODIFICATION:
+    * Add additional spans to menu items to harmonize the menu items' HTML code.
+}}
+
+<nav class="list-group">
+{{# flatnavigation }}
+    {{#showdivider}}
+</nav>
+<nav class="list-group m-t-1">
+    {{/showdivider}}
+    {{#action}}
+    <a class="list-group-item list-group-item-action {{#isactive}}font-weight-bold{{/isactive}}" href="{{{action}}}" data-key="{{key}}">
+        <div class="m-l-{{get_indent}}">
+            {{#is_section}}
+                <div class="media">
+                    <span class="media-left">
+                        {{#pix}}i/folder{{/pix}}
+                    </span>
+                    <span class="media-body">{{{text}}}</span>
+                </div>
+            {{/is_section}}
+            {{^is_section}}
+                    <span class="media-left">
+                        {{#pix}}{{/pix}}
+                    </span>
+                    <span class="media-body">{{{text}}}</span>
+            {{/is_section}}
+        </div>
+    </a>
+    {{/action}}
+    {{^action}}
+    <div class="list-group-item" data-key="{{key}}">
+        <div class="m-l-{{get_indent}}">
+            {{#is_section}}
+                {{#pix}}i/folder{{/pix}}
+            {{/is_section}}
+            {{{text}}}
+        </div>
+    </div>
+    {{/action}}
+{{/ flatnavigation }}
+</nav>

templates/flat_navigation.mustache.original

+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template theme_boost/flat_navigation
+
+    Display the flat navigation for the boost theme
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * flatnavigation - array of flat_navigation_nodes
+      * showdivider - boolean
+      * action - string
+      * isactive - boolean
+      * get_indent - integer
+      * is_section - boolean
+      * text - HTML
+
+    Example context (json):
+    {
+        "flatnavigation" : [
+            {
+                "showdivider": false,
+                "action": "#",
+                "isactive": true,
+                "get_indent": 1,
+                "is_section": false,
+                "text": "First"
+            },{
+                "showdivider": true,
+                "action": "#",
+                "isactive": false,
+                "get_indent": 0,
+                "is_section": true,
+                "text": "Last &amp; Second"
+            }
+        ]
+    }
+}}
+<nav class="list-group">
+{{# flatnavigation }}
+    {{#showdivider}}
+</nav>
+<nav class="list-group m-t-1">
+    {{/showdivider}}
+    {{#action}}
+    <a class="list-group-item list-group-item-action {{#isactive}}font-weight-bold{{/isactive}}" href="{{{action}}}" data-key="{{key}}">
+        <div class="m-l-{{get_indent}}">
+            {{#is_section}}
+                <div class="media">
+                    <span class="media-left">
+                        {{#pix}}i/folder{{/pix}}
+                    </span>
+                    <span class="media-body">{{{text}}}</span>
+                </div>
+            {{/is_section}}
+            {{^is_section}}
+                {{{text}}}
+            {{/is_section}}
+        </div>
+    </a>
+    {{/action}}
+    {{^action}}
+    <div class="list-group-item" data-key="{{key}}">
+        <div class="m-l-{{get_indent}}">
+            {{#is_section}}
+                {{#pix}}i/folder{{/pix}}
+            {{/is_section}}
+            {{{text}}}
+        </div>
+    </div>
+    {{/action}}
+{{/ flatnavigation }}
+</nav>

templates/nav-drawer.mustache

+{{!
+    @template theme_boost_campus/nav-drawer
+
+
+    Example context (json): {}
+}}
+{{! MODIFICATION:
+    * Add theme_boost_campus/flat_navigation template instead of theme_boost/flat_navigation template
+}}
+
+<div id="nav-drawer" data-region="drawer" class="hidden-print moodle-has-zindex {{^navdraweropen}}closed{{/navdraweropen}}" aria-hidden="{{#navdraweropen}}false{{/navdraweropen}}{{^navdraweropen}}true{{/navdraweropen}}" tabindex="-1">
+    {{> theme_boost_campus/flat_navigation }}
+</div>

templates/nav-drawer.mustache.original

+{{!
+    @template theme_boost/nav-drawer
+
+
+    Example context (json): {}
+}}
+<div id="nav-drawer" data-region="drawer" class="hidden-print moodle-has-zindex {{^navdraweropen}}closed{{/navdraweropen}}" aria-hidden="{{#navdraweropen}}false{{/navdraweropen}}{{^navdraweropen}}true{{/navdraweropen}}" tabindex="-1">
+    {{> theme_boost/flat_navigation }}
+</div>