progressbar

LimeSurvey · May 15, 2023 · 2c8bcee · 2c8bcee
1 parent 9adc33b
commit 2c8bcee
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 198 deletions.
diff --git a/assets/survey_themes/ls6_surveytheme/ls6_theme_template.scss b/assets/survey_themes/ls6_surveytheme/ls6_theme_template.scss
@@ -141,6 +141,8 @@ $base-color: #ffffff;
 @import "participant/captcha/captcha_colors.scss";
 @import "participant/load_save/load_save.scss";
 @import "participant/load_save/load_save_colors.scss";
+@import "progressbar/progressbar.scss";
+@import "progressbar/progressbar_colors.scss";
 
 // TODO: placeholder, will probbably be removed
 @import "darkmode/darkmode_colors.scss";
diff --git a/assets/survey_themes/ls6_surveytheme/old_fruity.scss b/assets/survey_themes/ls6_surveytheme/old_fruity.scss
@@ -57,19 +57,6 @@ element.style {
 
 .group-title:empty {display : none}
 
-.top-container .progress {
-    height        : 21px;
-    margin-bottom : 0;
-}
-
-.top-container .progress {
-    box-shadow : 0 2px 5px rgba(0, 0, 0, 0.1) inset; /* flatly remove box-shadow : readd one */
-}
-
-.progress .progress-bar {
-    line-height : 19px;
-}
-
 .top-container .form-change-lang {text-align : center}
 
 /**

diff --git a/assets/survey_themes/ls6_surveytheme/progressbar/progressbar.scss b/assets/survey_themes/ls6_surveytheme/progressbar/progressbar.scss
@@ -0,0 +1,9 @@
+.top-container {
+    .progress {
+        height        : 2px;
+        margin-bottom : 0;
+    }
+    .progress-bar {
+        min-width: 2em;
+    }
+}
diff --git a/assets/survey_themes/ls6_surveytheme/progressbar/progressbar_colors.scss b/assets/survey_themes/ls6_surveytheme/progressbar/progressbar_colors.scss
@@ -0,0 +1,9 @@
+.progress {
+    background-color : $g-400;
+    box-shadow       : none
+}
+.progress-bar {
+    color            : $white;
+    background-color : $base-color;
+    box-shadow       : none;
+}
diff --git a/assets/survey_themes/ls6_surveytheme/src/definitions.scss b/assets/survey_themes/ls6_surveytheme/src/definitions.scss
@@ -397,89 +397,7 @@ body {
             color : $color_gravel_approx;
         }
     }
-    .progress {
-        background-color : $color_wild_sand_approx;
-        box-shadow       : inset 0 1px 2px $black_10;
-    }
-    .progress-bar {
-        color            : $white;
-        background-color : $base-color;
-        box-shadow       : inset 0 -1px 0 $black_15;
-    }
-    .progress-striped {
-        .progress-bar {
-            background-image : linear-gradient(
-                    45deg,
-                    $white_15 25%,
-                    transparent 25%,
-                    transparent 50%,
-                    $white_15 50%,
-                    $white_15 75%,
-                    transparent 75%,
-                    transparent
-            );
-        }
-        .progress-bar-success {
-            background-image : linear-gradient(
-                    45deg,
-                    $white_15 25%,
-                    transparent 25%,
-                    transparent 50%,
-                    $white_15 50%,
-                    $white_15 75%,
-                    transparent 75%,
-                    transparent
-            );
-        }
-        .progress-bar-info {
-            background-image : linear-gradient(
-                    45deg,
-                    $white_15 25%,
-                    transparent 25%,
-                    transparent 50%,
-                    $white_15 50%,
-                    $white_15 75%,
-                    transparent 75%,
-                    transparent
-            );
-        }
-        .progress-bar-warning {
-            background-image : linear-gradient(
-                    45deg,
-                    $white_15 25%,
-                    transparent 25%,
-                    transparent 50%,
-                    $white_15 50%,
-                    $white_15 75%,
-                    transparent 75%,
-                    transparent
-            );
-        }
-        .progress-bar-danger {
-            background-image : linear-gradient(
-                    45deg,
-                    $white_15 25%,
-                    transparent 25%,
-                    transparent 50%,
-                    $white_15 50%,
-                    $white_15 75%,
-                    transparent 75%,
-                    transparent
-            );
-        }
-    }
-    .progress-bar-success {
-        background-color : $base-color;
-    }
-    .progress-bar-info {
-        background-color : $color_paradiso_approx;
-    }
-    .progress-bar-warning {
-        background-color : $color_warning;
-    }
-    .progress-bar-danger {
-        background-color : $color_stiletto_approx;
-    }
+
     .list-group-item {
         background-color : $white;
         border           : 1px solid $color_alto_approx;

diff --git a/themes/survey/ls6_surveytheme/css/variations/theme_green.css b/themes/survey/ls6_surveytheme/css/variations/theme_green.css
@@ -10508,19 +10508,6 @@ body {
   display: none;
 }
 
-.top-container .progress {
-  height: 21px;
-  margin-bottom: 0;
-}
-
-.top-container .progress {
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset; /* flatly remove box-shadow : readd one */
-}
-
-.progress .progress-bar {
-  line-height: 19px;
-}
-
 .top-container .form-change-lang {
   text-align: center;
 }
@@ -11077,42 +11064,6 @@ body {
 .ls6_surveytheme .thumbnail .caption {
   color: rgb(53, 54, 63);
 }
-.ls6_surveytheme .progress {
-  background-color: #f5f5f5;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.ls6_surveytheme .progress-bar {
-  color: #ffffff;
-  background-color: #14AE5C;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-}
-.ls6_surveytheme .progress-striped .progress-bar {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-success {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-info {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-warning {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-danger {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-bar-success {
-  background-color: #14AE5C;
-}
-.ls6_surveytheme .progress-bar-info {
-  background-color: #17c568;
-}
-.ls6_surveytheme .progress-bar-warning {
-  background-color: #f6863a;
-}
-.ls6_surveytheme .progress-bar-danger {
-  background-color: #a0352f;
-}
 .ls6_surveytheme .list-group-item {
   background-color: #ffffff;
   border: 1px solid #dadada;
@@ -15395,6 +15346,25 @@ a [class^=ri-], a [class*=" ri-"] {
   margin-top: 40px;
 }
 
+.top-container .progress {
+  height: 2px;
+  margin-bottom: 0;
+}
+.top-container .progress-bar {
+  min-width: 2em;
+}
+
+.progress {
+  background-color: #D3D5DA;
+  box-shadow: none;
+}
+
+.progress-bar {
+  color: #ffffff;
+  background-color: #14AE5C;
+  box-shadow: none;
+}
+
 .darkmode-on {
   background-color: #333641;
   color: white;

diff --git a/themes/survey/ls6_surveytheme/css/variations/theme_red.css b/themes/survey/ls6_surveytheme/css/variations/theme_red.css
@@ -10508,19 +10508,6 @@ body {
   display: none;
 }
 
-.top-container .progress {
-  height: 21px;
-  margin-bottom: 0;
-}
-
-.top-container .progress {
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset; /* flatly remove box-shadow : readd one */
-}
-
-.progress .progress-bar {
-  line-height: 19px;
-}
-
 .top-container .form-change-lang {
   text-align: center;
 }
@@ -11077,42 +11064,6 @@ body {
 .ls6_surveytheme .thumbnail .caption {
   color: rgb(53, 54, 63);
 }
-.ls6_surveytheme .progress {
-  background-color: #f5f5f5;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.ls6_surveytheme .progress-bar {
-  color: #ffffff;
-  background-color: #FF515F;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-}
-.ls6_surveytheme .progress-striped .progress-bar {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-success {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-info {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-warning {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-striped .progress-bar-danger {
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.ls6_surveytheme .progress-bar-success {
-  background-color: #FF515F;
-}
-.ls6_surveytheme .progress-bar-info {
-  background-color: #ff6b76;
-}
-.ls6_surveytheme .progress-bar-warning {
-  background-color: #f6863a;
-}
-.ls6_surveytheme .progress-bar-danger {
-  background-color: #a0352f;
-}
 .ls6_surveytheme .list-group-item {
   background-color: #ffffff;
   border: 1px solid #dadada;
@@ -15395,6 +15346,25 @@ a [class^=ri-], a [class*=" ri-"] {
   margin-top: 40px;
 }
 
+.top-container .progress {
+  height: 2px;
+  margin-bottom: 0;
+}
+.top-container .progress-bar {
+  min-width: 2em;
+}
+
+.progress {
+  background-color: #D3D5DA;
+  box-shadow: none;
+}
+
+.progress-bar {
+  color: #ffffff;
+  background-color: #FF515F;
+  box-shadow: none;
+}
+
 .darkmode-on {
   background-color: #333641;
   color: white;

diff --git a/themes/survey/ls6_surveytheme/views/subviews/header/progress_bar.twig b/themes/survey/ls6_surveytheme/views/subviews/header/progress_bar.twig
@@ -19,13 +19,12 @@
 {# do not show if : All in one or is not Y or on aCompleted #}
 {% if aSurveyInfo.showprogress == 'Y' and aSurveyInfo.format != 'A' and not aSurveyInfo.aCompleted %}
     <!-- Top container -->
-    <div class="{{ aSurveyInfo.class.topcontainer  }} space-col"  {{ aSurveyInfo.attr.topcontainer  }} >
+    <div class="{{ aSurveyInfo.class.topcontainer  }} container-md space-col"  {{ aSurveyInfo.attr.topcontainer  }} >
         <div class="{{ aSurveyInfo.class.topcontent  }} container-fluid" {{ aSurveyInfo.attr.topcontent  }} >
             {% set progressValue  = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %}
             <div class="visually-hidden">{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}</div>
-                <div class="{{ aSurveyInfo.class.progress  }}" {{ aSurveyInfo.attr.progress  }}  aria-hidden="true">
-                    <div class="{{ aSurveyInfo.class.progressbar  }}" {{ aSurveyInfo.attr.progressbar  }} style="min-width: 2em; width: {{ progressValue }}%;">
-                        {{ progressValue }}%
+                <div class="{{ aSurveyInfo.class.progress  }}" {{ aSurveyInfo.attr.progress  }}  aria-hidden="true" data-bs-placement="bottom" data-bs-toggle="tooltip" title="{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}">
+                    <div class="{{ aSurveyInfo.class.progressbar  }}" {{ aSurveyInfo.attr.progressbar  }} style="width: {{ progressValue }}%;">
                     </div>
                 </div>
         </div>