feat: add arrows to the lesson selector

This may break on some browsers and needs further testing.

user/plugins/language-selector/css/language-selector.css

+/*
+
 .language-selector {
 		float: right;
 		position: relative;
@@ -30,12 +32,10 @@
 	  user-select: none;
 	  background-image: none;
 	  border: 1px solid transparent;
-	  /* size */
 	  padding: 5px 10px;
 	  font-size: 0.8rem;
 	  line-height: 1.5;
 	  border-radius: 3px;
-	  /* Aspect */
 	  color: #333;
 	  background-color: #fff;
 	  border-color: #ccc;
@@ -45,7 +45,6 @@
 	  position: absolute;
 	  top: 95%;
 	  left: 0;
-      /*right: 0;*/
 	  z-index: 1000;
 	  display: none;
 	  float: left;
@@ -86,3 +85,5 @@
     color: #333;
     white-space: nowrap;
 }
+
+*/

user/plugins/language-selector/templates/partials/language-selector.html.twig

 <div class="language-selector">
-  <button class="btn" type="button" data-dropdown="langSelectorList">
+  <button class="btn" type="button" data-dropdown="language-selector-dropdown">
     {% if language_display.button == 'default' or language_display.button == 'flag' %}
     <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" />
     {% endif %}
@@ -9,7 +9,7 @@
     <i class="fa fa-caret-down"></i>
   </button>
 
-  <ul class="dropdown-menu" id="langSelectorList">
+  <ul class="dropdown-menu" id="language-selector-dropdown">
 {% for language in language_selector.languages %}
 
     {% set show_language = true %}

user/plugins/m3-p2/m3-p2.php

@@ -11,7 +11,6 @@ use Grav\Common\Uri;
 use Symfony\Component\EventDispatcher\Event;
 
 
-
 /**
  * Features:
  * - /sync   Cheap git-sync (did not knew about it at the time)
@@ -357,6 +356,12 @@ class M3P2Plugin extends Plugin
 
         $current_lesson_lang = $target_pages[0]->language();
         $current_lesson_name = "";
+        $current_found = false;
+        $previous_found = false;
+        $next_found = false;
+        $previous_lesson_slug = "";
+        $previous_lesson_name = "";
+        $next_lesson_slug = "";
         $other_lessons = [];  // of slug => ['name' => …, 'slug' => …]
         foreach ($target_pages as $target_page) {
             $page_config = $target_page->header();
@@ -369,10 +374,28 @@ class M3P2Plugin extends Plugin
                 }
                 if ($lesson_slug != $page_lesson['slug']) {
                     if ( ! isset($other_lessons[$page_lesson['slug']])) {
+                        // Found one, let's add it
                         $other_lessons[$page_lesson['slug']] = $page_lesson;
+
+                        // And the prev/next navigation
+                        if ($current_found) {
+                            if ( ! $next_found) {
+                                $next_lesson_slug = $page_lesson['slug'];
+                                $next_found = true;
+                            }
+                        } else {
+                            if ( ! $previous_found) {
+                                $previous_lesson_slug = $page_lesson['slug'];
+                                $previous_found = true;
+                            }
+                        }
+
                     }
                     continue;
                 }
+
+                $current_found = true;
+
                 if (isset($page_lesson['name']) && ! empty($page_lesson['name'])) {
                     $current_lesson_name = $page_lesson['name'];
                 }
@@ -425,11 +448,12 @@ class M3P2Plugin extends Plugin
 
         $this->grav['twig']->twig()->addGlobal('target_pages', $target_pages);
         $this->grav['twig']->twig()->addGlobal('related_lessons', $other_lessons);
+        $this->grav['twig']->twig()->addGlobal('previous_lesson_slug', $previous_lesson_slug);
+        $this->grav['twig']->twig()->addGlobal('next_lesson_slug', $next_lesson_slug);
         $this->grav['twig']->twig()->addGlobal('translated_lessons', $translated_lessons);
 
         $page = new Page();
         $page->init(new \SplFileInfo(__DIR__ . '/pages/lesson-columns.md'));
-
         $page->title($current_lesson_name);
         // here: perhaps add other metadata
 

user/themes/textbook/css/custom.css

@@ -41,6 +41,10 @@ details summary {
     cursor: pointer;
 }
 
+.hidden {
+    display: none;
+}
+
 /**********************************************************************************************************************/
 /** FIX FOR DIAGRAMS **************************************************************************************************/
 
@@ -56,16 +60,16 @@ details summary {
  */
 section#header { z-index: 2; }
 
-/* Little patch for the language selector, to center it vertically. */
-/* Beta feature : may cause bugs. We'll see. */
-.dropdown-selector,
-.language-selector {
-    -webkit-transform: initial !important;
-    -moz-transform: initial !important;
-    -o-transform: initial !important;
-    -ms-transform: initial !important;
-    transform: initial !important;
-    margin-right: 0rem !important;
+#header > .container {
+    padding: 0;
+}
+
+#header .navbar-section:last-child {
+    margin-right: 0 !important;
+}
+
+.navbar-section-layout {
+    text-align: center;
 }
 
 /* Little fix for the anchors plugin */
@@ -94,6 +98,7 @@ section#header { z-index: 2; }
     color: #b72b90;
 }
 
+
 iframe.geogebra {
     border: 1px dotted #a6a6a6;
 }
@@ -115,7 +120,7 @@ iframe.geogebra {
 }
 
 .mobile-menu details[open] > summary ~ * {
-    animation: sweep .5s ease-in-out;
+    animation: sweep .4s ease-in-out;
 }
 
 @keyframes sweep {
@@ -246,77 +251,68 @@ iframe.geogebra {
 }
 
 /**********************************************************************************************************************/
+/* Dropdown menus: language selector, lesson selector, etc. */
+/* Showing/hiding is done in pure CSS below */
 
-#language-selector-button:hover ~ *,
-#language-selector-button:focus ~ * {
-    display: block;
-    visibility: visible;
-}
-
-#langSelectorList {
-    margin: 0;
+#language-selector-dropdown {
+    /*margin: 0;*/
     /*visibility: hidden;*/
     /*display: block !important;*/
     /*animation: test_show 1.5s ease-in-out;*/
     /*animation-delay: 1s;*/
 }
-#langSelectorList:focus-within,
-#langSelectorList:hover,
-#langSelectorList:focus {
-    display: block;
-    visibility: visible;
-}
 
 /*@keyframes test_show {*/
 /*    0%    {display: block;}*/
 /*    100%  {display: none;}*/
 /*}*/
 
-
-#lesson-selector-button:hover ~ *,
-#lesson-selector-button:focus ~ *,
-/* class only won't work, we need an id here for some reason */
-.dropdown-menu-button:hover ~ *,
-.dropdown-menu-button:focus ~ * {
-    display: block;
-    visibility: visible;
+.dropdown-navigation {
+    display: inline-block;
+    white-space: nowrap;
 }
 
-
-#lesson-selector-dropdown:focus-within,
-#lesson-selector-dropdown:hover,
-#lesson-selector-dropdown:focus,
-/* same */
-.dropdown-menu:focus-within,
-.dropdown-menu:hover,
-.dropdown-menu:focus {
-    display: block;
-    visibility: visible;
+/* Little patch for the language selector, to center it vertically. */
+/* Beta feature : may cause bugs. We'll see. */
+.dropdown-selector {
+    -webkit-transform: initial !important;
+    -moz-transform: initial !important;
+    -o-transform: initial !important;
+    -ms-transform: initial !important;
+    transform: initial !important;
+    /*margin-right: 0rem !important;*/
 }
 
-
+.dropdown-navigation {
+    margin: 0 1rem;
+}
 .dropdown-selector {
     display: inline-block;
-    float: right;
-    position: relative;
-    top: 50%;
-    vertical-align: middle;
-    margin: 0 1rem !important;
-    -webkit-transform: translateY(-50%);
-    -moz-transform: translateY(-50%);
-    -o-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
+    background: #f93;
+    /*float: right;*/
+    /*position: relative;*/
+    /*top: 50%;*/
+    /*vertical-align: middle;*/
+    /*-webkit-transform: translateY(-50%);*/
+    /*-moz-transform: translateY(-50%);*/
+    /*-o-transform: translateY(-50%);*/
+    /*-ms-transform: translateY(-50%);*/
+    /*transform: translateY(-50%);*/
+}
+
+.lessons-dropdown-navigation .dropdown-selector {
+    margin: 0;
 }
 
-.dropdown-selector > .btn:first-child {
-    margin-left: 0;
-}
 
-.dropdown-selector .btn {
-    float: left;
+/*.dropdown-selector .btn {*/
+/*.dropdown-selector > .btn:first-child {*/
+.dropdown-menu-button {
+
+    /*float: left;*/
     position: relative;
     display: inline-block;
+    margin-left: 0;
     margin-bottom: 0;
     font-weight: 400;
     text-align: center;
@@ -337,16 +333,32 @@ iframe.geogebra {
     border: 1px solid #ccc;
 }
 
+
+/*#language-selector-button:hover ~ *,
+#language-selector-button:focus ~ *,
+#lesson-selector-button:hover ~ *,
+#lesson-selector-button:focus ~ *,*/
+/* class only won't work, we need an id here for some reason */
+.dropdown-menu-button:hover ~ *,
+.dropdown-menu-button:focus ~ * {
+    display: block !important;
+    visibility: visible !important;
+}
+
+
 .dropdown-selector .dropdown-menu {
+    display: none; /* shown by hover or focus on elder sibling btn */
     position: absolute;
-    top: 95%;
-    right: -2.0rem;
+
+    /*top: 95%;*/
+    /*right: -2.0rem;*/
+    /*float: left;*/  /* no float if I can help it -- perhaps needed for browser compat */
+
     max-width: 90vw;
     z-index: 1000;
-    display: none; /* shown by hover or focus on elder sibling btn */
-    float: left;
     padding: 5px 0;
-    margin: 2px 0 0;
+    margin: 0;
+    /*margin-top: -2px;*/
     font-size: 1rem;
     text-align: left;
     list-style: none;
@@ -355,6 +367,28 @@ iframe.geogebra {
     border-radius: 4px;
     box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 }
+.dropdown-selector .dropdown-menu.lesson-list {
+    /* align the lesson list on the right of the screen */
+    right: 2%;
+}
+
+
+/*#language-selector-dropdown:focus-within,
+#language-selector-dropdown:hover,
+#language-selector-dropdown:focus,
+#lesson-selector-dropdown:focus-within,
+#lesson-selector-dropdown:hover,
+#lesson-selector-dropdown:focus,*/
+/* same, id is required somehow -- try again later, smells like cache shenanigans */
+/* nah, it was just BAD DESIGN © */
+
+.dropdown-selector:focus-within .dropdown-menu, /* allows keyboard tabbing inside the menu */
+.dropdown-selector .dropdown-menu:focus-within,
+.dropdown-selector .dropdown-menu:hover,
+.dropdown-selector .dropdown-menu:focus {
+    display: block !important;
+    visibility: visible !important;
+}
 
 /*@media screen and (max-width: 400px) {*/
 /*    .dropdown-selector .dropdown-menu {*/
@@ -396,5 +430,27 @@ iframe.geogebra {
     /*-ms-text-overflow: ellipsis;*/
 }
 
+.dropdown-navigation-previous,
+.dropdown-navigation-next {
+    display: inline-block;
+    width: 1.5em;
+    /*height: 3em;*/
+    /*background: #f39;*/
+    /*font-size: 2em;*/
+    /*line-height: 1em;*/
+    /*font-size: 1em;*/
+    text-align: center;
+    vertical-align: center;
+}
+
+.dropdown-navigation-previous:hover,
+.dropdown-navigation-previous:focus,
+.dropdown-navigation-next:hover,
+.dropdown-navigation-next:focus {
+    font-weight: bolder;
+    text-decoration: none;
+    color: #0B61A4 !important;
+}
+
 /**********************************************************************************************************************/
 

user/themes/textbook/templates/lesson-columns.html.twig

@@ -37,12 +37,27 @@
 
 {% if related_lessons %}
 
-<div id="lesson-selector" class="dropdown-selector">
+{# We should have a <nav> somewhere, perhaps -- not 100% sure it's okay to use one here #}
+
+<div {#id="lessons-navigation"#} class="dropdown-navigation lessons-dropdown-navigation">
+
+{% if previous_lesson_slug %}
+    <a
+        class="dropdown-navigation-previous"
+        href="/{{ language_selector.current }}/lessons/{{ previous_lesson_slug }}"
+        title="Previous lesson"
+    >
+        &#8592;
+    </a>
+{% endif %}
+
+{# We still define ids, yet there's no javascript attached.  CSS uses ids ; #pragma -- #wip, we're removing those #}
+<div {#id="lesson-selector"#} class="dropdown-selector">
     <button id="lesson-selector-button" class="btn dropdown-menu-button" type="button">
         📚 {{ related_lessons | length }}
         <i class="fa fa-caret-down"></i>
     </button>
-    <ul id="lesson-selector-dropdown" class="dropdown-menu lesson-list">
+    <ul {#id="lesson-selector-dropdown"#} class="dropdown-menu lesson-list">
 {% for related_lesson_slug, related_lesson in related_lessons %}
         <li>
             <a href="/{{ language_selector.current }}/lessons/{{ related_lesson.slug }}">
@@ -52,7 +67,18 @@
 {% endfor %}
     </ul>
 </div>
+
+{% if next_lesson_slug %}
+    <a class="dropdown-navigation-next"
+       href="/{{ language_selector.current }}/lessons/{{ next_lesson_slug }}"
+       title="Next lesson">
+        &#8594;
+    </a>
 {% endif %}
+
+</div>
+{% endif %}
+
 {% endblock %}
 {# … disabling the whole section instead is semantically correct but it offsets the navigation. TBD #}
 {#{% block header_language_selection_section %}{% endblock %}#}

user/themes/textbook/templates/partials/base.html.twig

@@ -69,7 +69,7 @@
                     {% block header_language_selection_section %}
                     {% if not disable_language_selector %}
                     <section class="navbar-section">
-                        <div>{# Wrapper div to make centering vertically easy #}
+                        <div class="navbar-section-layout">{# Wrapper div to make centering vertically and horizontally easy #}
                         {% block header_language_selection %}
                         {% include 'partials/language-selector.html.twig' %}
                         {% endblock %}

user/themes/textbook/templates/partials/language-selector.html.twig

-<div class="language-selector">
-  <button id="language-selector-button" class="btn" type="button" data-dropdown-nooope="langSelectorList">
+<div class="dropdown-navigation">
+
+<div class="dropdown-selector">
+  <button {#id="language-selector-button"#} class="btn dropdown-menu-button" type="button">
     {% if language_display.button == 'default' or language_display.button == 'flag' %}
     <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" />
     {% endif %}
@@ -9,7 +11,7 @@
     <i class="fa fa-caret-down"></i>
   </button>
 
-  <ul class="dropdown-menu" id="langSelectorList">
+  <ul class="dropdown-menu" {#id="language-selector-dropdown"#}>
 {% for language in language_selector.languages %}
 
     {% set show_language = true %}
@@ -74,3 +76,5 @@
 
   </ul>
 </div>
+
+</div>