Merge pull request #74 from carpentries/fix-73

update tables and sidebar behaviour

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: varnish
 Title: Front-end for The Carpentries Lesson Template
-Version: 0.2.12
+Version: 0.2.13
 Authors@R: c(
     person(given = "Zhian N.",
            family = "Kamvar",

NEWS.md

@@ -1,7 +1,17 @@
+# varnish 0.2.13
+
+* Table display CSS is set to `table` as opposed to `block`, thus ensuring it is
+  represented correctly in the accessibility tree (see 
+  <https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables>).
+  (fixed: @zkamvar, #74)
+* Table headings are now bold to easily distinguish from table contents.
+* Collapsing the sidebar no longer results in extra room at the bottom of the
+  page.
+
 # varnish 0.2.12
 
 * Table formatting has been fixed to no longer include 100px padding in the
-  first row (reported: @marklcrowe, #72; fixed: @zkamvar, #73)
+  first row (reported: @marklcrowe, #72; fixed: @zkamvar, 4385602)
 - All tables will now be striped for accessibility
 
 # varnish 0.2.11

source/javascripts/custom/menu.js

@@ -176,7 +176,6 @@ function checkForExtraPadding(){
 }
 
 function showSidebarMobile(){
-    // console.log('showSidebarMobile');
     var $sidebar        = $('#sidebar');
     var $sidebarCol     = $('#sidebar-col');
     var $primaryContent = $('.primary-content');
@@ -214,7 +213,6 @@ function hideSidebarMobile(){
 }
 
 function showSidebarDesktop(){
-    // console.log('showSidebarDesktop');
     setSidebarVisible(true);
     var $sidebar        = $('#sidebar');
     var $sidebarCol     = $('#sidebar-col');
@@ -242,7 +240,6 @@ function showSidebarDesktop(){
 }
 
 function hideSidebarDesktop(){
-    // console.log('hideSidebarDesktop');
     setSidebarVisible(false);
     var $sidebar        = $('#sidebar');
     var $sidebarCol     = $('#sidebar-col');
@@ -251,14 +248,19 @@ function hideSidebarDesktop(){
     var $collapseToggle = $('.collapse-toggle');
     $sidebarInner.css('visibility', 'hidden');
     $collapseToggle.html("Episodes " + feather.icons['chevron-right'].toSvg());
+    // resize primary content before sidebar col
+    // when the primary content adjusts its size, the vertical content shrinks
+    // and we need to account fo that. 
+    $primaryContent.attr('class', "col-lg-12 primary-content");
+    // Here, we squish the sidebar to the left and readjust its height to be
+    // equal to the primary content
     $sidebarCol.css({
         position: 'absolute',
         left: '-10px',
         width:'115px',
-        height: ($('#sidebar-col').height())
+        height: ($primaryContent.height())
     });
     $sidebarCol.attr('class', 'col-lg-1');
-    $primaryContent.attr('class', "col-lg-12 primary-content");
     $sidebar.attr('tabindex', '-1');
     $sidebar.attr('aria-hidden', 'true');
     $collapseToggle.attr('aria-expanded', 'false');

source/stylesheets/styles.css.scss

@@ -153,11 +153,16 @@ a:hover {
 }
 
 table {
-  display: block;
+  display: table;
   max-width: max-content;
   overflow: auto;
 }
 
+thead > tr > th {
+  font-weight: $font-weight-bold;
+  vertical-align: baseline;
+}
+
 .table-striped > tbody > tr:nth-of-type(odd) > * {
   --bs-table-accent-bg:none;
 }