Fixed issue #CR-1210: fixed sizing and spacing of navbar, top-contain…

…er, body
LimeSurvey · Jul 6, 2023 · df5a378 · df5a378
1 parent dd339f2
commit df5a378
Show file tree

Hide file tree

Showing 18 changed files with 240 additions and 654 deletions.
diff --git a/application/models/TemplateConfig.php b/application/models/TemplateConfig.php
@@ -614,14 +614,17 @@ public function getClassAndAttributes()
         $aClassAndAttributes['class']['required']     = '  ';
         $aClassAndAttributes['class']['requiredspan'] = '  ';
         $aClassAndAttributes['attr']['required']      = ' aria-hidden="true" ';
-        $aClassAndAttributes['class']['required']     = '';
+        $aClassAndAttributes['attr']['requiredspan']     = '';
 
         // Progress bar
         $aClassAndAttributes['class']['topcontainer'] = ' top-container ';
         $aClassAndAttributes['class']['topcontent']   = ' top-content ';
         $aClassAndAttributes['class']['progress']     = ' progress ';
         $aClassAndAttributes['class']['progressbar']  = ' progress-bar ';
-        $aClassAndAttributes['attr']['progressbar']   = $aClassAndAttributes['attr']['topcontainer'] = $aClassAndAttributes['class']['topcontent'] = $aClassAndAttributes['attr']['progressbar'] = $aClassAndAttributes['attr']['progress'] = ' ';
+        $aClassAndAttributes['attr']['topcontainer'] = '';
+        $aClassAndAttributes['attr']['topcontent'] = '';
+        $aClassAndAttributes['attr']['progress'] = '';
+        $aClassAndAttributes['attr']['progressbar']   = '';
 
         // No JS alert
         $aClassAndAttributes['class']['nojs'] = ' ls-js-hidden warningjs ';

diff --git a/assets/survey_themes/ls6_surveytheme/core/ls6_core_theme.js b/assets/survey_themes/ls6_surveytheme/core/ls6_core_theme.js
@@ -23,7 +23,7 @@ export var ThemeScripts = function () {
      * in endpage and in $(window).resize
      */
     var fixBodyPadding = function fixBodyPadding() {
-        $('body').css('padding-top', Math.round($('#survey-nav').height()) + 'px');
+        $('body').css('padding-top', Math.round($('#survey-nav').outerHeight()) + 'px');
     };
 
     /**

diff --git a/assets/survey_themes/ls6_surveytheme/ls6_theme_template.scss b/assets/survey_themes/ls6_surveytheme/ls6_theme_template.scss
@@ -155,5 +155,8 @@ $base-color: #ffffff;
 @import "language-changer/language-changer.scss";
 @import "language-changer/language-changer_colors.scss";
 
+// 6.2 Utilities
+@import "spacing/spacing.scss";
+
 // TODO: placeholder, will probbably be removed
 @import "darkmode/darkmode_colors.scss";
diff --git a/assets/survey_themes/ls6_surveytheme/navbar/navbar.scss b/assets/survey_themes/ls6_surveytheme/navbar/navbar.scss
@@ -108,8 +108,8 @@ Responsive navbar-brand image CSS
     }
     .navbar-toggler {
         border: none;
-        padding: 0;
-        margin-top: 20px;
+        padding-right: 0;
+        line-height: $line-height-20;
         .ri-more-fill {
             font-size: $font-size-xl * 1.125;
         }

diff --git a/assets/survey_themes/ls6_surveytheme/old_fruity.scss b/assets/survey_themes/ls6_surveytheme/old_fruity.scss
@@ -1,10 +1,5 @@
 // old theme.css
 
-.space-col {
-    margin-top    : 1em;
-    margin-bottom : 2em;
-}
-
 .group-outer-container {
     display : flex;
 }
@@ -18,30 +13,10 @@
     background : transparent;
 }
 
-.top-container {
-    width         : 100%;
-    padding       : 0;
-    border-bottom : none;
-    color         : inherit;
-}
-
-.top-container .top-content {
-    padding-top    : 1em;
-    padding-bottom : 1em;
-    margin-bottom  : 2em;
-}
-
-
-.no-js .top-content .form-change-lang {display : none}
-
-.top-container .top-content:empty {display : none}
-
 .group-description:empty {display : none}
 
 .group-title:empty {display : none}
 
-.top-container .form-change-lang {text-align : center}
-
 /**
  * Navigator
  */

diff --git a/assets/survey_themes/ls6_surveytheme/progressbar/progressbar.scss b/assets/survey_themes/ls6_surveytheme/progressbar/progressbar.scss
@@ -1,4 +1,8 @@
 .top-container {
+    margin-bottom: 2rem;
+    .ls-progress-container {
+        padding: 4px 0;
+    }
     .progress {
         height        : 2px;
         margin-bottom : 0;

diff --git a/assets/survey_themes/ls6_surveytheme/spacing/spacing.scss b/assets/survey_themes/ls6_surveytheme/spacing/spacing.scss
@@ -0,0 +1,4 @@
+.space-col {
+    margin-top    : 1em;
+    margin-bottom : 2em;
+}
diff --git a/themes/survey/ls6_surveytheme/css/variations/theme_apple-rtl.css b/themes/survey/ls6_surveytheme/css/variations/theme_apple-rtl.css
@@ -10419,11 +10419,6 @@ textarea.form-control-lg {
     display: none !important;
   }
 }
-.space-col {
-  margin-top: 1em;
-  margin-bottom: 2em;
-}
-
 .group-outer-container {
   display: flex;
 }
@@ -10437,27 +10432,6 @@ textarea.form-control-lg {
   background: transparent;
 }
 
-.top-container {
-  width: 100%;
-  padding: 0;
-  border-bottom: none;
-  color: inherit;
-}
-
-.top-container .top-content {
-  padding-top: 1em;
-  padding-bottom: 1em;
-  margin-bottom: 2em;
-}
-
-.no-js .top-content .form-change-lang {
-  display: none;
-}
-
-.top-container .top-content:empty {
-  display: none;
-}
-
 .group-description:empty {
   display: none;
 }
@@ -10466,10 +10440,6 @@ textarea.form-control-lg {
   display: none;
 }
 
-.top-container .form-change-lang {
-  text-align: center;
-}
-
 /**
  * Navigator
  */
@@ -12174,8 +12144,8 @@ Responsive navbar-brand image CSS
 }
 #survey-nav .navbar-toggler {
   border: none;
-  padding: 0;
-  margin-top: 20px;
+  padding-left: 0;
+  line-height: 20px;
 }
 #survey-nav .navbar-toggler .ri-more-fill {
   font-size: 1.92375rem;
@@ -15218,6 +15188,12 @@ a [class^=ri-], a [class*=" ri-"] {
   margin-top: 40px;
 }
 
+.top-container {
+  margin-bottom: 2rem;
+}
+.top-container .ls-progress-container {
+  padding: 4px 0;
+}
 .top-container .progress {
   height: 2px;
   margin-bottom: 0;
@@ -15379,14 +15355,19 @@ html, body {
 .form-change-lang .language-icon {
   float: right;
   margin-left: 4px;
-  margin-top: 2px;
   font-weight: 400;
 }
 .form-change-lang #language-changer-select {
   font-weight: 600;
   font-size: 1.14rem;
   line-height: 20px;
+  cursor: pointer;
   border: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  z-index: 10;
 }
 .form-change-lang #language-changer-select:focus-visible {
   outline: none;
@@ -15404,6 +15385,24 @@ html, body {
 }
 .form-change-lang #language-changer-select {
   color: #14AE5C;
+  background-color: transparent;
+}
+.form-change-lang #lang-select {
+  background-color: #ffffff;
+}
+.form-change-lang #lang-select::after {
+  cursor: pointer;
+  position: relative;
+  left: 16px;
+  color: #14AE5C;
+  font-family: "remixicon";
+  content: "\ea50";
+  z-index: 5;
+}
+
+.space-col {
+  margin-top: 1em;
+  margin-bottom: 2em;
 }
 
 .darkmode-on {

diff --git a/themes/survey/ls6_surveytheme/css/variations/theme_apple.css b/themes/survey/ls6_surveytheme/css/variations/theme_apple.css
@@ -10442,11 +10442,6 @@ textarea.form-control-lg {
     display: none !important;
   }
 }
-.space-col {
-  margin-top: 1em;
-  margin-bottom: 2em;
-}
-
 .group-outer-container {
   display: flex;
 }
@@ -10460,27 +10455,6 @@ textarea.form-control-lg {
   background: transparent;
 }
 
-.top-container {
-  width: 100%;
-  padding: 0;
-  border-bottom: none;
-  color: inherit;
-}
-
-.top-container .top-content {
-  padding-top: 1em;
-  padding-bottom: 1em;
-  margin-bottom: 2em;
-}
-
-.no-js .top-content .form-change-lang {
-  display: none;
-}
-
-.top-container .top-content:empty {
-  display: none;
-}
-
 .group-description:empty {
   display: none;
 }
@@ -10489,10 +10463,6 @@ textarea.form-control-lg {
   display: none;
 }
 
-.top-container .form-change-lang {
-  text-align: center;
-}
-
 /**
  * Navigator
  */
@@ -12197,8 +12167,8 @@ Responsive navbar-brand image CSS
 }
 #survey-nav .navbar-toggler {
   border: none;
-  padding: 0;
-  margin-top: 20px;
+  padding-right: 0;
+  line-height: 20px;
 }
 #survey-nav .navbar-toggler .ri-more-fill {
   font-size: 1.92375rem;
@@ -15241,6 +15211,12 @@ a [class^=ri-], a [class*=" ri-"] {
   margin-top: 40px;
 }
 
+.top-container {
+  margin-bottom: 2rem;
+}
+.top-container .ls-progress-container {
+  padding: 4px 0;
+}
 .top-container .progress {
   height: 2px;
   margin-bottom: 0;
@@ -15447,6 +15423,11 @@ html, body {
   z-index: 5;
 }
 
+.space-col {
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
 .darkmode-on {
   background-color: #333641;
   color: white;