Tidy bottom single section navigation.

gjb2048 · Apr 27, 2024 · 56d2369 · 56d2369
1 parent 1d48056
commit 56d2369
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/styles.css b/styles.css
@@ -218,7 +218,6 @@
 }
 
 /* Section header with navigation */
-.format-vsf .single-section .vsf-nav-bottom,
 .format-vsf .single-section .vsf-sectionname {
     position: relative;
 }
@@ -234,22 +233,26 @@
     top: 0;
 }
 
-.format-vsf .single-section .vsf-nav-bottom .vsf-nav-left,
-.format-vsf .single-section .vsf-nav-bottom .vsf-nav-right {
-    bottom: 0;
-    display: table;
-    height: auto;
-    margin: auto;
-    position: absolute;
-    top: 0;
+.format-vsf .course-content .single-section .vsf-nav-bottom {
+    align-items: center;
+    display: flex;
+}
+
+.course-content .single-section .section-navigation .vsf-selection-selector-item {
+    display: flex;
+    flex: 1 0 0%;
 }
 
 .format-vsf .single-section .vsf-nav-bottom .vsf-nav-left {
-    left: 10px;
+    justify-content: flex-start;
+}
+
+.format-vsf .single-section .vsf-nav-bottom .vsf-jumpto {
+    justify-content: center;
 }
 
 .format-vsf .single-section .vsf-nav-bottom .vsf-nav-right {
-    right: 10px;
+    justify-content: flex-end;
 }
 
 .format-vsf .vsf-sectionname h3,

diff --git a/templates/local/content/sectionselector.mustache b/templates/local/content/sectionselector.mustache
@@ -33,21 +33,21 @@
     }
 }}
 <div class="section-navigation vsf-nav-bottom mdl-bottom">
-    {{#hasprevious}}
-    <div class="prevsection vsf-nav-left">
+    <div class="prevsection vsf-selection-selector-item vsf-nav-left">
+        {{#hasprevious}}
         <a href="{{{previousurl}}}"{{#previoushidden}} class="dimmed_text"{{/previoushidden}}>
             <span class="{{previousclasses}} mr-1"></span>{{{previousname}}}
         </a>
+        {{/hasprevious}}
     </div>
-    {{/hasprevious}}
-    <div class="mdl-align">
+    <div class="mdl-align vsf-selection-selector-item vsf-jumpto">
         {{{selector}}}
     </div>
-    {{#hasnext}}
-    <div class="nextsection vsf-nav-right">
+    <div class="nextsection vsf-selection-selector-item vsf-nav-right">
+        {{#hasnext}}
         <a href="{{{nexturl}}}"{{#nexthidden}} class="dimmed_text"{{/nexthidden}}>
             {{{nextname}}}<span class="{{nextclasses}} ml-1"></span>
         </a>
+        {{/hasnext}}
     </div>
-    {{/hasnext}}
 </div>