Update next/previous navigation links

Prevent duplicate links from appearing. Rework code to use css media querries and plain html and rely less on js

Author: ascholerChemeketa

runestone/common/css/runestone-custom-sphinx-bootstrap.css

@@ -660,23 +660,51 @@ div.flash {
     display: inline;
     bottom: 65px;
     position: fixed;
+    opacity: 0.4;
 }
 
-#relations-next {
+.navLink:hover {
+    opacity: 1;
+}
+
+.navLink a {
+    display: inline-block;
+    background-color: white; 
+    border-style:solid; 
+    border-color:lightgrey; 
+    border-width:2px; 
+    width:100px; 
+    height:50px
+}
+
+.relations-next {
     right: 35px;
 }
 
-#relations-prev {
+.relations-prev {
     left: 35px;
 }
 
+.nextprev-list {
+    margin: 10px;
+    padding-left: 0;
+    height: 50px;
+}
+
+.nextprev-list-top {
+    display: none;
+}
+
 @media (max-width: 600px) {
 
-    /* Styling definitions for chevron function in bookfuncs.js */
+    .nextprev-list-top {
+        display: block;
+    }    
+    
     .navLink {
-        z-index: 2;
-        display: inline;
-        position: static;
+        display: inline-block;
+        bottom: auto;
+        position: absolute;
     }
 
     ul#top-relations-console,

runestone/common/js/bookfuncs.js

@@ -29,47 +29,6 @@
 
  */
 
-//
-// Chevron functions - Must correspond with width in runestone-custom-sphinx-bootstrap.css
-//
-$(function () {
-    var resizeWindow = false;
-    var resizeWidth = 600;
-    $(window)
-        .on("resize", function (event) {
-            if ($(window).width() <= resizeWidth && resizeWindow == false) {
-                resizeWindow = true;
-                var topPrev = $("#relations-prev")
-                    .clone()
-                    .attr("id", "top-relations-prev");
-                var topNext = $("#relations-next")
-                    .clone()
-                    .attr("id", "top-relations-next");
-                $("#relations-prev, #relations-next").hide();
-                var bottomPrev = topPrev
-                    .clone()
-                    .attr("id", "bottom-relations-prev");
-                var bottomNext = topNext
-                    .clone()
-                    .attr("id", "bottom-relations-next");
-                $("div#main-content > div").prepend(topPrev, topNext);
-                $("#top-relations-prev, #top-relations-next").wrapAll(
-                    '<ul id="top-relations-console"></ul>'
-                );
-                $("div#main-content > div").append(bottomPrev, bottomNext);
-                $("#bottom-relations-prev, #bottom-relations-next").wrapAll(
-                    '<ul id="bottom-relations-console"></ul>'
-                );
-            }
-            if ($(window).width() >= resizeWidth + 1 && resizeWindow == true) {
-                resizeWindow = false;
-                $("#top-relations-console, #bottom-relations-console").remove();
-                $("#relations-prev, #relations-next").show();
-            }
-        })
-        .resize();
-});
-
 //
 // Page decoration functions
 //

runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html

@@ -293,6 +293,11 @@
 <div class="container" id="continue-reading"></div>
 
 <div class="container" id="main-content" role="main">
+
+  {% with place='top' %}
+    {% include "subchapter.html" %}
+  {% endwith %}
+
 <!-- Ad Serving for Runestone Campaign -->
 {% if dynamic_pages == 'True' %}
     {% raw %}
@@ -314,9 +319,9 @@
   <div id=scprogresscontainer>
     You have attempted <span id=scprogresstotal></span> of <span id=scprogressposs></span> activities on this page <div id="subchapterprogress"></div>
   </div>
-  {% block nextprevious %}
-      {% include "subchapter.html" %}
-  {% endblock %}
+  {% with place='bottom'%}
+    {% include "subchapter.html" %}
+  {% endwith %}
 </div>
 {%- endblock %}
 

runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/subchapter.html

@@ -1,49 +1,24 @@
+<ul role="navigation" class="nextprev-list nextprev-list-{{place}}" aria-label="Change page">
 {%- if prev %}
-<ul>
-  <li id="relations-prev" style="opacity:0.4" onmouseover="mouseOverPrev()" onmouseout="mouseOutPrev()"class="navLink" title='Previous Section - {{ prev.title|extractText|extractTextII }}' data-toggle="tooltip">
-    <a href="{{ prev.link|e }}" aria-label="{{ prev.title|extractText|extractTextII }}">
-        <div style="background-color: white; border-style:solid; border-color:lightgrey; border-width:2px; width:100px; height:50px">
-            <i class='prevNav glyphicon glyphicon-chevron-left'  style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black;"></i>
-        </div>
-    </a>
-  </li>
-</ul>
-
-  {% endif %}
+<li id="relations-prev-{{place}}" class="relations-prev navLink" title='Previous Section - {{ prev.title|extractText|extractTextII }}' data-toggle="tooltip">
+  <a href="{{ prev.link|e }}" aria-label="Previous - {{ prev.title|extractText|extractTextII }}">
+    <i class='prevNav glyphicon glyphicon-chevron-left'  style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black;"></i>
+  </a>
+</li>
+{% endif %}
 
 {%- if next %}
-<ul>
-  <li id="relations-next" style="opacity:0.4" onmouseover="mouseOverNext()" onmouseout="mouseOutNext()" class="navLink" title='Next Section - {{ next.title|extractText|extractTextII }}' data-toggle="tooltip" >
-    <a href="{{ next.link|e }}" aria-label="{{ next.title|extractText|extractTextII }}">
-      <div style="background-color: white; border-style:solid; border-color:lightgrey; border-width:2px; width:100px; height:50px">
-          <i id="relationsNextIcon" class='nextNav glyphicon glyphicon-chevron-right' style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black; "></i>
-      </div>
+  <li id="relations-next-{{place}}" class="relations-next navLink" title='Next Section - {{ next.title|extractText|extractTextII }}' data-toggle="tooltip" >
+    <a href="{{ next.link|e }}" aria-label="Next - {{ next.title|extractText|extractTextII }}">
+      <i id="relationsNextIcon" class='nextNav glyphicon glyphicon-chevron-right' style="top:50%; transform:translateY(-50%)translateX(-50%); left: 50%; color:black; "></i>
     </a>
   </li>
-</ul>
-
 {%- endif %}
+</ul>
 
 <script>
-document.addEventListener('load', (event) => {
-  $('#relations-prev').tooltip({'placement':'right', 'selector': '', 'delay': { show: 100, hide: 50}});
-  $('#relations-next').tooltip({'placement':'left', 'selector': '', 'delay': { show: 100, hide: 50}});
+window.addEventListener('load', (event) => {
+  $('#relations-prev-{{place}}').tooltip({'placement': 'right', 'delay': { show: 100, hide: 50}});
+  $('#relations-next-{{place}}').tooltip({'placement': 'left', 'delay': { show: 100, hide: 50}});
 });
 </script>
-
-<script>
-	function mouseOverPrev() {
-		document.getElementById("relations-prev").style.opacity=1;
-	}
-
-	function mouseOutPrev() {
-		document.getElementById("relations-prev").style.opacity=0.4;
-	}
-	function mouseOverNext() {
-		document.getElementById("relations-next").style.opacity=1;
-	}
-
-	function mouseOutNext() {
-		document.getElementById("relations-next").style.opacity=0.4;
-	}
-</script>