Modernised the look of the section navigation and section selectors

Vidalia · May 17, 2024 · 5779275 · 5779275
1 parent a1ea3b6
commit 5779275
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 12 deletions.
diff --git a/classes/output/courseformat/content/sectionnavigation.php b/classes/output/courseformat/content/sectionnavigation.php
@@ -70,6 +70,11 @@ public function export_for_template(renderer_base $output): stdClass {
             $data->courseurl = course_get_url($course, null, [ 'navigation' => true ])->out();
         }
 
+        if ($data->courseurl == $data->previousurl) {
+            $data->showcoursehome = true;
+            $data->hasprevious = false;
+        }
+
         return $data;
     }
 }
diff --git a/lang/en/format_cards.php b/lang/en/format_cards.php
@@ -40,6 +40,7 @@
 $string['hidefromothers'] = 'Hide card';
 $string['showfromothers'] = 'Show card';
 $string['noactivities'] = 'No activities';
+$string['gotosection'] = 'Go to section {$a}';
 
 $string['section:default'] = 'Card {$a}';
 $string['section:completion:percentage'] = '{$a->percentage}%';

diff --git a/templates/local/content.mustache b/templates/local/content.mustache
@@ -213,9 +213,9 @@
         {{/singlesection}}
         </ul>
         {{#sectionselector}}
-            {{$ core_courseformat/local/content/sectionselector }}
-                {{> core_courseformat/local/content/sectionselector }}
-            {{/ core_courseformat/local/content/sectionselector }}
+            {{$ format_cards/local/content/sectionselector }}
+                {{> format_cards/local/content/sectionselector }}
+            {{/ format_cards/local/content/sectionselector }}
         {{/sectionselector}}
     </div>
     {{/hasnavigation}}

diff --git a/templates/local/content/sectionnavigation.mustache b/templates/local/content/sectionnavigation.mustache
@@ -32,23 +32,45 @@
     }
 }}
 <div class="section-navigation navigationtitle d-flex justify-content-between">
-    <div class="prevsection">
+    <div class="prevsection d-flex">
         {{#hasprevious}}
-        <a href="{{{previousurl}}}" class="{{#previoushidden}} dimmed_text {{/previoushidden}} mr-2">
-            <span class="larrow">{{{larrow}}}</span>{{{previousname}}}
-        </a>
+            <a href="{{{previousurl}}}"
+               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#previoushidden}} text-muted{{/previoushidden}}"
+               title="{{#str}}gotosection, course, {{name}}{{/str}}">
+                <span class="dir-ltr-hide">
+                    {{#pix}}t/right, moodle, {{#str}}gotosection, format_cards, {{previousname}}{{/str}}{{/pix}}
+                </span>
+                <span class="dir-rtl-hide">
+                    {{#pix}}t/left, moodle, {{#str}}gotosection, format_cards, {{previousname}}{{/str}}{{/pix}}
+                </span>
+                <span class="sr-only">
+                    {{#str}}gotosection, format_cards, {{previousname}}{{/str}}
+                </span>
+            </a>
         {{/hasprevious}}
         {{#showcoursehome}}
-            <a href="{{{courseurl}}}">
-                {{#pix}} i/home, core, {{#str}} course {{/str}} {{/pix}}{{#str}} course {{/str}}
+            <a href="{{{courseurl}}}"
+               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin"
+               title="{{#str}} course {{/str}}">
+                {{#pix}} i/home, core, {{#str}} maincoursepage {{/str}} {{/pix}}
             </a>
         {{/showcoursehome}}
     </div>
     <div class="nextsection">
         {{#hasnext}}
-        <a href="{{{nexturl}}}" class="{{#nexthidden}} dimmed_text {{/nexthidden}}">
-            <span class="rarrow">{{{rarrow}}}</span>{{{nextname}}}
-        </a>
+            <a href="{{{nexturl}}}"
+               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#previoushidden}} text-muted{{/previoushidden}}"
+               title="{{#str}}gotosection, course, {{name}}{{/str}}">
+                <span class="dir-rtl-hide">
+                    {{#pix}}t/right, moodle, {{#str}}gotosection, format_cards, {{nextname}}{{/str}}{{/pix}}
+                </span>
+                <span class="dir-ltr-hide">
+                    {{#pix}}t/left, moodle, {{#str}}gotosection, format_cards, {{nextname}}{{/str}}{{/pix}}
+                </span>
+                <span class="sr-only">
+                    {{#str}}gotosection, format_cards, {{nextname}}{{/str}}
+                </span>
+            </a>
         {{/hasnext}}
     </div>
 </div>
diff --git a/templates/local/content/sectionselector.mustache b/templates/local/content/sectionselector.mustache
@@ -0,0 +1,80 @@
+{{!
+    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 core_courseformat/local/content/sectionselector
+
+    Displays the course section navigation.
+
+    Example context (json):
+    {
+        "hasprevious": true,
+        "previousurl": "#",
+        "larrow": "&#x25C4;",
+        "previousname": "Section 3",
+        "hasnext": true,
+        "rarrow": "&#x25BA;",
+        "nexturl": "#",
+        "nextname": "Section 5",
+        "selector": "<select><option>Section 4</option></select>"
+    }
+}}
+<div class="section-navigation mdl-bottom d-flex justify-content-between">
+    <div class="prevsection">
+        {{#hasprevious}}
+            <a href="{{{previousurl}}}"
+               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#previoushidden}} text-muted{{/previoushidden}}"
+               title="{{#str}}gotosection, course, {{name}}{{/str}}">
+                <span class="dir-ltr-hide">
+                    {{#pix}}t/right, moodle, {{#str}}gotosection, format_cards, {{previousname}}{{/str}}{{/pix}}
+                </span>
+                <span class="dir-rtl-hide">
+                    {{#pix}}t/left, moodle, {{#str}}gotosection, format_cards, {{previousname}}{{/str}}{{/pix}}
+                </span>
+                <span class="sr-only">
+                    {{#str}}gotosection, format_cards, {{previousname}}{{/str}}
+                </span>
+            </a>
+        {{/hasprevious}}
+        {{#showcoursehome}}
+            <a href="{{{courseurl}}}"
+               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin"
+               title="{{#str}} course {{/str}}">
+                {{#pix}} i/home, core, {{#str}} maincoursepage {{/str}} {{/pix}}
+            </a>
+        {{/showcoursehome}}
+    </div>
+    <div>
+        {{{selector}}}
+    </div>
+    <div class="nextsection">
+        {{#hasnext}}
+            <a href="{{{nexturl}}}"
+               class="btn btn-icon d-flex align-items-center justify-content-center icon-no-margin{{#previoushidden}} text-muted{{/previoushidden}}"
+               title="{{#str}}gotosection, course, {{name}}{{/str}}">
+                <span class="dir-rtl-hide">
+                    {{#pix}}t/right, moodle, {{#str}}gotosection, format_cards, {{nextname}}{{/str}}{{/pix}}
+                </span>
+                <span class="dir-ltr-hide">
+                    {{#pix}}t/left, moodle, {{#str}}gotosection, format_cards, {{nextname}}{{/str}}{{/pix}}
+                </span>
+                <span class="sr-only">
+                    {{#str}}gotosection, format_cards, {{nextname}}{{/str}}
+                </span>
+            </a>
+        {{/hasnext}}
+    </div>
+</div>