Clear all (changes for button which is not shown on default. added ba…

…sic styling for listgroup on same page)
LimeSurvey · May 16, 2023 · a97631d · a97631d
1 parent bda45b6
commit a97631d
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 72 deletions.
diff --git a/assets/survey_themes/ls6_surveytheme/list-group/list-group.scss b/assets/survey_themes/ls6_surveytheme/list-group/list-group.scss
diff --git a/assets/survey_themes/ls6_surveytheme/list-group/list-group_colors.scss b/assets/survey_themes/ls6_surveytheme/list-group/list-group_colors.scss
@@ -0,0 +1,20 @@
+.list-group-item {
+    background-color : $white;
+    border           : 1px solid $g-900;
+}
+.list-group-item-success {
+    color            : $white;
+    background-color : $base-color;
+}
+.list-group-item-info {
+    color            : $white;
+    background-color : $grape;
+}
+.list-group-item-warning {
+    color            : $g-900;
+    background-color : $warning;
+}
+.list-group-item-danger {
+    color            : $g-900;
+    background-color : $error;
+}
diff --git a/assets/survey_themes/ls6_surveytheme/ls6_theme_template.scss b/assets/survey_themes/ls6_surveytheme/ls6_theme_template.scss
@@ -144,6 +144,7 @@ $base-color: #ffffff;
 @import "participant/load_save/load_save_colors.scss";
 @import "progressbar/progressbar.scss";
 @import "progressbar/progressbar_colors.scss";
+@import "list-group/list-group_colors.scss";
 
 // TODO: placeholder, will probbably be removed
 @import "darkmode/darkmode_colors.scss";
diff --git a/assets/survey_themes/ls6_surveytheme/src/definitions.scss b/assets/survey_themes/ls6_surveytheme/src/definitions.scss
@@ -398,26 +398,6 @@ body {
         }
     }
 
-    .list-group-item {
-        background-color : $white;
-        border           : 1px solid $color_alto_approx;
-    }
-    .list-group-item-success {
-        color            : $base-color;
-        background-color : $color_sea_mist_approx;
-    }
-    .list-group-item-info {
-        color            : $color_paradiso_approx;
-        background-color : $color_opal_approx;
-    }
-    .list-group-item-warning {
-        color            : $color_sandy_brown_approx;
-        background-color : $color_quicksand_approx;
-    }
-    .list-group-item-danger {
-        color            : $color_shilo_approx;
-        background-color : $color_contessa_approx;
-    }
     .card {
         background-color : $white;
         box-shadow       : 0 1px 1px $black_5;

diff --git a/themes/survey/ls6_surveytheme/css/variations/theme_green.css b/themes/survey/ls6_surveytheme/css/variations/theme_green.css
@@ -11037,26 +11037,6 @@ body {
 .ls6_surveytheme .thumbnail .caption {
   color: rgb(53, 54, 63);
 }
-.ls6_surveytheme .list-group-item {
-  background-color: #ffffff;
-  border: 1px solid #dadada;
-}
-.ls6_surveytheme .list-group-item-success {
-  color: #14AE5C;
-  background-color: #b9f3d3;
-}
-.ls6_surveytheme .list-group-item-info {
-  color: #17c568;
-  background-color: #41c889;
-}
-.ls6_surveytheme .list-group-item-warning {
-  color: #ffe370;
-  background-color: #dcce75;
-}
-.ls6_surveytheme .list-group-item-danger {
-  color: #a94442;
-  background-color: #e48a49;
-}
 .ls6_surveytheme .card {
   background-color: #ffffff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -15368,6 +15348,31 @@ a [class^=ri-], a [class*=" ri-"] {
   box-shadow: none;
 }
 
+.list-group-item {
+  background-color: #ffffff;
+  border: 1px solid #1E1E1E;
+}
+
+.list-group-item-success {
+  color: #ffffff;
+  background-color: #14AE5C;
+}
+
+.list-group-item-info {
+  color: #ffffff;
+  background-color: #8146F6;
+}
+
+.list-group-item-warning {
+  color: #1E1E1E;
+  background-color: #FFE046;
+}
+
+.list-group-item-danger {
+  color: #1E1E1E;
+  background-color: #FF515F;
+}
+
 .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
@@ -11037,26 +11037,6 @@ body {
 .ls6_surveytheme .thumbnail .caption {
   color: rgb(53, 54, 63);
 }
-.ls6_surveytheme .list-group-item {
-  background-color: #ffffff;
-  border: 1px solid #dadada;
-}
-.ls6_surveytheme .list-group-item-success {
-  color: #FF515F;
-  background-color: white;
-}
-.ls6_surveytheme .list-group-item-info {
-  color: #ff6b76;
-  background-color: #f3a5a6;
-}
-.ls6_surveytheme .list-group-item-warning {
-  color: #fffeff;
-  background-color: #ebe3fc;
-}
-.ls6_surveytheme .list-group-item-danger {
-  color: #a94442;
-  background-color: #bec6fd;
-}
 .ls6_surveytheme .card {
   background-color: #ffffff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -15368,6 +15348,31 @@ a [class^=ri-], a [class*=" ri-"] {
   box-shadow: none;
 }
 
+.list-group-item {
+  background-color: #ffffff;
+  border: 1px solid #1E1E1E;
+}
+
+.list-group-item-success {
+  color: #ffffff;
+  background-color: #FF515F;
+}
+
+.list-group-item-info {
+  color: #ffffff;
+  background-color: #8146F6;
+}
+
+.list-group-item-warning {
+  color: #1E1E1E;
+  background-color: #FFE046;
+}
+
+.list-group-item-danger {
+  color: #1E1E1E;
+  background-color: #FF515F;
+}
+
 .darkmode-on {
   background-color: #333641;
   color: white;

diff --git a/themes/survey/ls6_surveytheme/views/subviews/navigation/clearall_buttons.twig b/themes/survey/ls6_surveytheme/views/subviews/navigation/clearall_buttons.twig
@@ -4,11 +4,9 @@
     This file render the exit button accessible without javascript
 #}
 
-<div class="{{ aSurveyInfo.class.clearallwrapper }}">
-    <div class="{{ aSurveyInfo.class.clearallwrapper }}">
-        <label class="col-form-label fw-bold {{ aSurveyInfo.class.clearalllabel }}">
-            <input {{ aSurveyInfo.attr.clearallconfirm }} class="me-2 {{ aSurveyInfo.class.clearallconfirm }}"><span class="control-label">{{gT("Please confirm you want to clear your response?")}}</span>
-        </label>
-        <button {{ aSurveyInfo.attr.clearallbutton }} class="{{ aSurveyInfo.class.clearallbutton }} btn btn-link" title="{{ gT("This action need to be confirmed.") }}">{{gT("Exit and clear survey")}}</button>
-    </div>
+<div class="{{ aSurveyInfo.class.clearallwrapper }} mb-3 pe-2">
+    <label class="col-form-label fw-bold {{ aSurveyInfo.class.clearalllabel }}">
+        <input {{ aSurveyInfo.attr.clearallconfirm }} class="me-2 {{ aSurveyInfo.class.clearallconfirm }}"><span class="control-label">{{gT("Please confirm you want to clear your response?")}}</span>
+    </label>
+    <button {{ aSurveyInfo.attr.clearallbutton }} class="{{ aSurveyInfo.class.clearallbutton }} btn btn-outline-secondary" title="{{ gT("This action need to be confirmed.") }}">{{gT("Exit and clear survey")}}</button>
 </div>
diff --git a/themes/survey/ls6_surveytheme/views/subviews/navigation/navigator_complement.twig b/themes/survey/ls6_surveytheme/views/subviews/navigation/navigator_complement.twig
@@ -7,7 +7,7 @@
     <!-- extra tools, can be shown with javascript too (just remove ls-js-hidden class -->
     <div class="row ls-js-hidden">
         <!-- Extra button container -->
-        <div class="col-6 clearall-saveall-wrapper">
+        <div class="col-6 clearall-saveall-wrapper d-flex justify-content-start">
             {% if aSurveyInfo.aNavigator.load.show == "Y" or aSurveyInfo.aNavigator.save.show == "Y" %}
                 {{ include('./subviews/navigation/save_buttons.twig') }}
             {% endif %}

diff --git a/themes/survey/ls6_surveytheme/views/subviews/navigation/save_buttons.twig b/themes/survey/ls6_surveytheme/views/subviews/navigation/save_buttons.twig
@@ -4,10 +4,14 @@
     This file render the load or save buttons without javascript needed
 #}
 {% if aSurveyInfo.aNavigator.load.show == "Y" %}
-    <button {{ aSurveyInfo.attr.loadbutton }} accesskey="l" class="{{ aSurveyInfo.class.loadbutton }} action--ls-button-submit btn btn-outline-secondary">{{ gT("Load unfinished survey") }}</button>
+<div class="mb-3 pe-2">
+    <button {{ aSurveyInfo.attr.loadbutton }} accesskey="l" class="{{ aSurveyInfo.class.loadbutton }} action--ls-button-submit btn btn-outline-secondary mb-3">{{ gT("Load unfinished survey") }}</button>
+</div>
 {% endif %}
 {% if aSurveyInfo.aNavigator.save.show == "Y" %}
-<button {{ aSurveyInfo.attr.savebutton }} accesskey="s" class='{{ aSurveyInfo.class.savebutton }} action--ls-button-submit btn btn-outline-secondary'>
-    {{ gT('Resume later') }}
-</button>
+<div class="mb-3 pe-2">
+    <button {{ aSurveyInfo.attr.savebutton }} accesskey="s" class='{{ aSurveyInfo.class.savebutton }} action--ls-button-submit btn btn-outline-secondary mb-3'>
+        {{ gT('Resume later') }}
+    </button>
+</div>
 {% endif %}