Tidy bottom single section navigation - SCSS.

Lesterhuis-Training-en-Consultancy · Apr 27, 2024 · bdff1cc · bdff1cc
1 parent eb313d5
commit bdff1cc
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 39 deletions.
diff --git a/injectedcss.css b/injectedcss.css
@@ -1,5 +1,5 @@
 /* VSF extra css - Afbeelding bij beschrijving toevoegen */
 body:not(.path-course):not(.editing) .modpic,
 body:not(.editing).path-course .modtxt {
-    display: none!important;
+    display: none !important;
 }
diff --git a/scss/styles.scss b/scss/styles.scss
@@ -184,7 +184,6 @@
 }
 
 /* Section header with navigation */
-.format-vsf .single-section .vsf-nav-bottom,
 .format-vsf .single-section .vsf-sectionname {
     position: relative;
 }
@@ -200,22 +199,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,
@@ -259,14 +262,14 @@
 
 .format-vsf .moduleviewgapwithbutton {
     padding-bottom: 30px;
-    mi-height: 70px;
+    min-height: 70px;
 }
 
 .format-vsf .vsfactivity {
     .no-overflow {
         overflow: unset;
         p {
-            text-align: center !important;
+            text-align: center !important; // stylelint-disable-line declaration-no-important
         }
     }
 }
@@ -304,7 +307,7 @@
 }
 
 .format-vsf .vsfavmod {
-    position: relative;
+    /*position: relative;*/
 }
 
 .format-vsf .vsfavmod .vsfai {
@@ -340,7 +343,7 @@
 }
 
 .format-vsf .activity .vsf-icon img.modpic.original,
-.format-vsf .modicontable img.modpic.original  {
+.format-vsf .modicontable img.modpic.original {
     /*width: 90px;*/
 }
 

diff --git a/styles.css b/styles.css
@@ -368,6 +368,29 @@
     margin-right: 0;
 }
 
+.format-vsf .activity .vsf-icon img.modpic.custom,
+.format-vsf .modicontable img.modpic.custom {
+    width: 90px;
+}
+
+.format-vsf .activity .vsf-icon img.modpic.original,
+.format-vsf .modicontable img.modpic.original {
+    /*width: 90px;*/
+}
+
+.format-vsf .vsf-activity-wrapper {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 100%;
+    justify-content: space-between;
+}
+
+.format-vsf .activity.moduleviewgapwithbutton .vsfactivity {
+    max-width: 100%;
+}
+
 .format-vsf .progress-chart-container {
     height: 70px;
     width: 70px;
@@ -818,26 +841,3 @@
 .format-vsf .progress-chart-container .progress-doughnut .progress-indicator svg .circle.percent-100 {
     stroke-dashoffset: 0;
 }
-
-.format-vsf .activity .vsf-icon img.modpic.custom,
-.format-vsf .modicontable img.modpic.custom {
-    width: 90px;
-}
-
-.format-vsf .activity .vsf-icon img.modpic.original,
-.format-vsf .modicontable img.modpic.original  {
-    /*width: 90px;*/
-}
-
-.format-vsf .vsf-activity-wrapper {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    height: 100%;
-    justify-content: space-between;
-}
-
-.format-vsf .activity.moduleviewgapwithbutton .vsfactivity {
-    max-width: 100%;
-}