Merge branch 'WikiEducationFoundation:master' into fix-survey-conditi…

…onal-question
WikiEducationFoundation · Feb 25, 2025 · 2b17c2c · 2b17c2c
2 parents 20beeb7 + c9369c7
commit 2b17c2c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 31 deletions.
diff --git a/app/assets/javascripts/components/overview/admin_quick_actions.jsx b/app/assets/javascripts/components/overview/admin_quick_actions.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import GreetStudentsButton from './greet_students_button.jsx';
 import { format, toDate, parseISO } from 'date-fns';
 import { getUTCDateString } from '../../utils/date_utils.js';
 import NotesPanel from '../../components/admin_notes/notes_panel.jsx';
 import AdminStatusPanel from '../../components/overview/admin_status_panel.jsx';
+import { updateCourse } from '@actions/course_actions.js';
 
 // Helper Functions
 const DetailsText = ({ flags }) => (
@@ -40,6 +42,8 @@ export const AdminQuickActions = ({ course, current_user, persistCourse, greetSt
     }
     : {};
 
+  const dispatch = useDispatch();
+
   return (
     <div className="module admin-quick-actions" style={{ textAlign: 'center', ...closedCourseStyle }}>
       {isCourseClosed(course.flags) && (
@@ -60,10 +64,13 @@ export const AdminQuickActions = ({ course, current_user, persistCourse, greetSt
           <button
             className="button mark-as-review"
             onClick={() => {
-              course.last_reviewed = {
-                username: current_user.username,
-                timestamp: getUTCDateString(),
-              };
+              dispatch(updateCourse({
+                ...course,
+                last_reviewed: {
+                  username: current_user.username,
+                  timestamp: getUTCDateString(),
+                }
+              }));
               persistCourse(course.slug);
             }}
           >

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%
diff --git a/spec/features/surveys_spec.rb b/spec/features/surveys_spec.rb
@@ -132,7 +132,7 @@
       visit survey_path(@survey)
       # Sets the course automatically
       expect(page).to have_content 'Survey for My Active Course'
-      expect(page).to have_content 'progress'
+      expect(page).to have_content 'Progress'
     end
 
     it 'sets the course and shows the progress bar by going to the course page' do
@@ -144,7 +144,7 @@
       click_link 'Take Survey'
       # Sets the course automatically
       expect(page).to have_content 'Survey for My Active Course'
-      expect(page).to have_content 'progress'
+      expect(page).to have_content 'Progress'
     end
 
     it 'renders an optout page' do