Merge pull request #8884 from nucleogenesis/bug/coach-perseus-halfwid…

…th-aaaaaaannnnnd-more Perseus in Coach full width - some coach alignment fixes
learningequality · Dec 10, 2021 · 3e92b9f · 3e92b9f
2 parents fa6f14c + d69c765
commit 3e92b9f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/kolibri/core/assets/src/views/AttemptLogList.vue b/kolibri/core/assets/src/views/AttemptLogList.vue
@@ -203,6 +203,7 @@
 
   .coach-content-label {
     display: inline-block;
+    width: auto; // keeps on same line as question
     margin-top: -4px;
     margin-left: 8px;
     vertical-align: middle;

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonExerciseHeader.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonExerciseHeader.vue
@@ -3,7 +3,7 @@
   <div>
 
     <section>
-      <HeaderWithOptions>
+      <HeaderWithOptions style="position: relative; top: 24px">
         <template #header>
           <BackLink
             :to="classRoute('ReportsLessonReportPage')"
@@ -68,4 +68,12 @@
     margin-right: 16px;
   }
 
+  /deep/ .pad-button {
+    // TODO revisit how HeaderWithOptions is styled - this ensures the backlink is aligned with
+    // the preview button. Changing it in HeaderWithOptions to fix this breaks elsewhere and this
+    // seems isolated to two places right now
+    padding-top: 0 !important;
+    padding-bottom: 16px;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonResourceLearnerListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonResourceLearnerListPage.vue
@@ -13,7 +13,7 @@
 
     <KPageContainer>
       <section>
-        <HeaderWithOptions>
+        <HeaderWithOptions style="position: relative; top: 24px">
           <template #header>
             <BackLink
               :to="classRoute('ReportsLessonReportPage', {})"
@@ -312,4 +312,12 @@
     margin-bottom: 24px;
   }
 
+  /deep/ .pad-button {
+    // TODO revisit how HeaderWithOptions is styled - this ensures the backlink is aligned with
+    // the preview button. Changing it in HeaderWithOptions to fix this breaks elsewhere and this
+    // seems isolated to two places right now
+    padding-top: 0 !important;
+    padding-bottom: 16px;
+  }
+
 </style>
diff --git a/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue b/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue
@@ -18,8 +18,9 @@
           <!-- Layout notes
             - Layout12 span8 -> ~66% width on windowIsLarge
             - No other layout definitions means span will be 100%
+            - When not interactive, this should be full width
           -->
-          <KGridItem :layout12="{ span: 6 }">
+          <KGridItem :layout12="{ span: interactive ? 6 : 12 }">
             <div
               id="problem-area"
               class="problem-area"
@@ -29,7 +30,14 @@
             </div>
           </KGridItem>
 
-          <KGridItem :layout12="{ span: 6 }">
+          <!--
+              - Only show the hints section at all if in interactive mode
+                Initially done to hide it in Coach reports after recent improvements to
+                the styles here for Learners.
+              - It is a v-show because seems without the proper anchors in place
+                it will fail to properly mount the react component
+          -->
+          <KGridItem v-show="interactive" :layout12="{ span: 6 }">
             <div v-if="hinted" id="hintlabel" class="hintlabel" :dir="contentDirection">
               {{ $tr("hintLabel") }}
             </div>