survey progress bar

WikiEducationFoundation · Feb 25, 2025 · 6bcf5d6 · 6bcf5d6
1 parent 34d4669
commit 6bcf5d6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 25 deletions.
diff --git a/app/assets/javascripts/surveys/modules/Survey.js b/app/assets/javascripts/surveys/modules/Survey.js
@@ -440,6 +440,8 @@ const Survey = {
     const width = `${progress}%`;
     this.surveyProgress.css('width', width);
 
+    $('.survey__progress-percentage').text(`${Math.round(progress)}%`);
+
     if (progress === 100 && !this.submittedAll) {
       this.submitAllQuestionGroups();
     }

diff --git a/app/assets/stylesheets/survey_modules/survey_page.styl b/app/assets/stylesheets/survey_modules/survey_page.styl
@@ -136,29 +136,47 @@ ul.list--survey
   background white
   padding 1rem 0
 
-.survey__progress
-  background sprout-dark
+.survey__progress__container
   position relative
   float right
-  width 200px
-  height 20px
-  border-radius 5px
-  overflow hidden
-
-  +above(tablet)
-    margin-left auto
+  margin-left auto
+  display flex
+  align-items center
+  gap 10px
 
-  &-bar
-    position absolute
-    left 0
-    top 0
-    width 0%
-    height 30px
+  .survey__progress
     background lighten(sprout, 50%)
-    transition width 500ms cubic-bezier(0.19, 1, 0.22, 1)
-    border-right 2px solid darken(sprout-dark, 10%)
+    width 200px
+    height 20px
+    border-radius 5px
+    overflow hidden
+
+    +above(tablet)
+      margin-left auto
+
+    &-bar
+      position relative
+      left 0
+      top 0
+      width 0%
+      height 30px
+      background sprout-dark
+      transition width 500ms cubic-bezier(0.19, 1, 0.22, 1)
+
+    &-percentage
+      position absolute
+      right 5px
+      top 0
+      line-height 20px
+      font-size 12px
+      color #fff
+      font-weight bold
+
+  .progress-label
+    background #40ad90
+    width fit-content
+    color #fff
+    font-size 75%
+    padding 2px 6px
+    border-radius 5px
 
-    .label
-      padding-left 5px
-      font-size 85%
-      color $text_dk
diff --git a/app/views/surveys/_header.html.haml b/app/views/surveys/_header.html.haml
@@ -3,7 +3,8 @@
     %div
       %strong= survey_course_title
 
-    %div.survey__progress
-      .survey__progress-bar{data: {survey_progress: true}}
-        .label
-          progress
+    .survey__progress__container
+      .progress-label Progress
+      %div.survey__progress
+        .survey__progress-bar{data: {survey_progress: true}}
+        .survey__progress-percentage 0%