Merge pull request #12492 from rtibbles/back_in_timer

Cherry-pick #12485
learningequality · Jul 26, 2024 · a4b90fe · a4b90fe
2 parents f2e9827 + 9b04326
commit a4b90fe
Showing 1 changed file with 40 additions and 17 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -37,10 +37,11 @@
         >
           <main :class="{ 'column-contents-wrapper': !windowIsSmall }">
             <KPageContainer
+              v-if="windowIsLarge"
               dir="auto"
               style="overflow-x: visible"
             >
-              <KGrid v-if="windowIsLarge">
+              <KGrid>
                 <KGridItem :layout12="{ span: 8 }">
                   <h2 class="section-title">
                     {{ displaySectionTitle(currentSection, currentSectionIndex) }}
@@ -59,15 +60,30 @@
                   </div>
                 </KGridItem>
               </KGrid>
-              <div
-                v-else
-                style="overflow-x: visible"
+            </KPageContainer>
+            <div v-else>
+              <KPageContainer
+                dir="auto"
+                class="quiz-container"
+              >
+                <span>{{ coreString('timeSpentLabel') }}:</span>
+                <TimeDuration
+                  class="timer"
+                  aria-live="polite"
+                  role="timer"
+                  :seconds="time_spent"
+                />
+              </KPageContainer>
+              <KPageContainer
+                dir="auto"
+                class="quiz-container"
               >
                 <div v-if="windowIsSmall || windowIsMedium">
                   <KSelect
                     v-if="sectionSelectOptions.length > 1"
                     :value="currentSectionOption"
                     :options="sectionSelectOptions"
+                    :label="quizSectionsLabel$()"
                     @select="handleSectionOptionChange"
                   >
                     <template #display>
@@ -94,32 +110,24 @@
                     {{ currentSectionOption.label }}
                   </h2>
                 </div>
-                <p>{{ currentSection.description }}</p>
+                <p v-if="currentSection.description">{{ currentSection.description }}</p>
                 <p v-if="content && content.duration">
                   {{ learnString('suggestedTime') }}
                 </p>
-                <div :style="{ margin: '0 auto', textAlign: 'center', width: '100%' }">
-                  <span>{{ coreString('timeSpentLabel') }}:</span>
-                  <TimeDuration
-                    class="timer"
-                    aria-live="polite"
-                    role="timer"
-                    :seconds="time_spent"
-                  />
-                </div>
                 <SuggestedTime
                   v-if="content && content.duration"
                   class="timer"
                   :seconds="content.duration"
                 />
-              </div>
-            </KPageContainer>
+              </KPageContainer>
+            </div>
             <KPageContainer style="overflow-x: visible">
               <KSelect
                 v-if="windowIsSmall || windowIsMedium"
                 style="margin-top: 1em"
                 :value="currentQuestionOption"
                 :options="questionSelectOptions"
+                :label="questionsLabel$()"
                 @select="handleQuestionOptionChange"
               >
                 <template #display>
@@ -305,7 +313,10 @@
 
   import { mapState } from 'vuex';
   import isEqual from 'lodash/isEqual';
-  import { displaySectionTitle } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import {
+    displaySectionTitle,
+    enhancedQuizManagementStrings,
+  } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import debounce from 'lodash/debounce';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -345,7 +356,10 @@
       } = useProgressTracking();
       const { windowBreakpoint, windowIsMedium, windowIsLarge, windowIsSmall } =
         useKResponsiveWindow();
+      const { quizSectionsLabel$, questionsLabel$ } = enhancedQuizManagementStrings;
       return {
+        questionsLabel$,
+        quizSectionsLabel$,
         displaySectionTitle,
         pastattempts,
         time_spent,
@@ -880,4 +894,13 @@
     margin-right: 5px;
   }
 
+  .section-select {
+    margin: 0;
+  }
+
+  .quiz-container {
+    padding: 1em !important;
+    overflow-x: visible;
+  }
+
 </style>