Merge pull request #1232 from ascholerChemeketa/layout_fixes

Author: bnmnetp

runestone/activecode/js/activecode.js

@@ -132,7 +132,7 @@ export class ActiveCode extends RunestoneBase {
         );
         if (this.autorun) {
             // Simulate pressing the run button, since this will also prevent the user from clicking it until the initial run is complete, and also help the user understand why they're waiting.
-            $(document).ready(this.runButtonHandler.bind(this));
+            $(this.runButtonHandler.bind(this));
         }
         this.indicate_component_ready();
     }

runestone/animation/chart.html

@@ -18,7 +18,7 @@
 //	$("#visualization").gchart({type: 'graphviz', series: [$.gchart.series([20, 50, 30])]});
 // label: '<f0> left | <f1> middle | <f2> right'
 
-document.addEventListener('load', (event) => {
+window.addEventListener('load', (event) => {
 $('#visualization').gchart($.gchart.graphviz(true,
  {
  struct1: {label: '<f0> left |<f1> middle |<f2> right'},

runestone/animation/jqchart/gChartBasic.html

@@ -9,7 +9,7 @@
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 <script src="jquery.gchart.js"></script>
 <script>
-document.addEventListener('load', (event) => {
+window.addEventListener('load', (event) => {
 $(function () {
 	$('#basicGChart').gchart({type: 'line', maxValue: 40,
 		title: 'Weather for|Brisbane, Australia', titleColor: 'green',

runestone/codelens/js/codelens.js

@@ -49,7 +49,7 @@ if (typeof allVsualizers === "undefined") {
     window.allVisualizers = [];
 }
 
-$(document).ready(function () {
+$(function () {
     if (typeof allTraceData !== "undefined") {
         for (let divid in allTraceData) {
             let cl = document.getElementById(divid);
@@ -69,7 +69,7 @@ $(document).ready(function () {
                 console.log(err);
             }
         }
-        document.addEventListener("codelens:answer", function (evt) {
+        window.addEventListener("codelens:answer", function (evt) {
             let rb = new RunestoneBase();
             rb.logBookEvent({
                 event: "codelens",

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

@@ -194,7 +194,6 @@ a {
     /* Remove top padding when top navbar goes collapsed in narrow viewports */
     body {
         padding-top: 0;
-        margin: auto auto auto 5px;
     }
 
     .navbar-fixed-top {
@@ -204,12 +203,15 @@ a {
 }
 
 @media (min-width: 768px) {
-
     /* when navbar is collapsed we don't want any vertical dividers taking up space */
     .navbar .divider-vertical {
         margin: 0 3px;
         border-left: 1px solid #f2f2f2;
     }
+    
+    .navbar-fixed-top .container {
+        padding: 0;
+    }
 }
 
 div.container {
@@ -222,8 +224,8 @@ div.section {
 }
 
 .container {
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 .container .section>*:not(.section):not(.ac_section) {
@@ -254,6 +256,11 @@ div.section {
     max-width: none;
 }
 
+.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 .navbar>.container .navbar-brand {
     margin-left: 0;
 }
@@ -262,6 +269,10 @@ div.section {
     background-color: var(--navbar);
 }
 
+.navbar-toggle {
+    margin-right: 0px;
+}
+
 .footer>.container {
     background-color: var(--outerBackground);
 }
@@ -273,12 +284,13 @@ div.section {
 .brand-logo {
     float: left;
     display: block;
-    background-size: 40px 40px !important;
-    width: 40px;
-    height: 40px;
     margin-top: 4px;
 }
 
+.brand-logo img {
+    height: 40px;
+}
+
 .social-menu {
     width: 220px;
     padding: 10px 10px 15px 20px;
@@ -659,23 +671,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,
@@ -697,10 +737,6 @@ div.flash {
     }
 }
 
-.navLink a {
-    color: #999;
-}
-
 #completionButton {
     margin-top: 25px;
     margin-bottom: 15px;
@@ -920,9 +956,14 @@ textarea#lp-result {
 
 
 #scprogresscontainer {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
+    width: 100%;
+    max-width: 500px;
+    margin: 10px auto;
+}
+
+#subchapterprogress.ui-progressbar .ui-progressbar-value {
+    margin: 0;
+    border-radius: 0px;
 }
 
 #subchapterprogress>div {
@@ -968,11 +1009,11 @@ body {
 .theme-switch-wrapper {
     display: flex;
     align-items: center;
+}
 
-    em {
-        margin-left: 10px;
-        font-size: 1rem;
-    }
+.theme-switch-wrapper em {
+    margin-left: 10px;
+    font-size: 1rem;
 }
 
 .theme-switch {

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
 //
@@ -263,7 +222,7 @@ function notifyRunestoneComponents() {
 }
 
 // initialize stuff
-$(document).ready(function () {
+$(function () {
     if (eBookConfig) {
         handlePageSetup();
     } else {
@@ -277,7 +236,7 @@ $(document).ready(function () {
 
 // misc stuff
 // todo:  This could be further distributed but making a video.js file just for one function seems dumb.
-$(document).ready(function () {
+window.addEventListener("load", function () {
     // add the video play button overlay image
     $(".video-play-overlay").each(function () {
         $(this).css(

runestone/common/js/presenter_mode.js

@@ -211,7 +211,6 @@ function configureCodelens() {
     }
 }
 
-//$(document).ready(configure);
 $(document).bind("runestone:login-complete", function () {
     // if user is instructor, enable presenter mode
     if (eBookConfig.isInstructor) {

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

@@ -39,10 +39,11 @@
       </button>
 
       <div>
+        {% set logo = '_static/' + (logo if logo else 'img/logo_small.png') %}
         {% if minimal_outside_links != 'True' %}
-          <a class="brand-logo" style='background: transparent url("{{pathto('_static/img/logo_small.png', 1)}}") no-repeat 0px 0px;' href="/{{appname}}/default/user/login">&nbsp; </a>
+          <a class="brand-logo" href="/{{appname}}/default/user/login" aria-label="Login"><img src="{{pathto(logo, 1)}}" alt=""></a>
         {% else %}
-          <a class="brand-logo" style='background: transparent url("{{pathto('_static/img/logo_small.png', 1)}}") no-repeat 0px 0px;'>&nbsp;<span aria-label="logo" class="visuallyhidden">Runestone Logo</span> </a>
+          <div class="brand-logo"><img src="{{pathto(logo, 1)}}" alt=""></div>
         {% endif %}
         <a class="navbar-brand" href="{{ pathto(master_doc) }}" aria-label="index-page">
           {% if dynamic_pages == 'True' %}
@@ -220,7 +221,10 @@
 {% endmacro %}
 
 {%- block extrahead %}
+
+{% if not favicon %}
 <link rel="shortcut icon" href="/{{appname}}/static/favicon.ico" type="image/ico" />
+{% endif %}
 
 <script>
   eBookConfig = {};
@@ -289,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 %}
@@ -310,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" aria-label="Page progress"></div>
   </div>
-  {% block nextprevious %}
-      {% include "subchapter.html" %}
-  {% endblock %}
+  {% with place='bottom'%}
+    {% include "subchapter.html" %}
+  {% endwith %}
 </div>
 {%- endblock %}
 
@@ -375,12 +384,14 @@
     </script>
 
     <script async src="https://hypothes.is/embed.js"></script>
+    <!--provide space to prevent hypothes.is sidebar from obscuring content-->
+    <style>@media screen and (max-width:767px) { body { padding-right: 21px; }}</style>
 
   {% endif %}
 {% endif %}
 
 <script> 
-  document.addEventListener('load', (event) => {
+  window.addEventListener('load', (event) => {
     runestoneComponents.getSwitch(); 
   });
 </script>

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

@@ -65,7 +65,7 @@
             document.getElementById("progressBar").style.width = book.curChapterPercent-1 + "%";
         }
     }
-    document.addEventListener('DOMContentLoaded', function() {
+    window.addEventListener('load', function() {
         loadProgressBar();
     }, false);
 </script>

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

@@ -25,7 +25,7 @@
           'delay': { show: 100, hide: 50}
          };
 
-  document.addEventListener('load', (event) => {
+  window.addEventListener('load', (event) => {
     $('#relations-prev').tooltip(opts);
     $('#relations-next').tooltip(opts);
   });