Renderers at full-height across the board, misc ui fixes

EPUB - 1px tokens.fineLine border - full height on all screens (minus padding per specs) PDF - Automatically scales the page back the larger the screen per our responsive screen mixin sizes. This is done by applying a multiplier to the denominator of the math establishing the initial width. We divide an HTML elements width by the width of the first page - and now we make the width higher by 1x on small, 1.25x on large and 1.125x for in between, effectively zooming out of the page when it loads so that the user sees more page content at a normal size (or closer to it) than before. EXERCISES - Removed gold star & checkmark from LessonMasteryBar - Applied 1px tokens.fineLine to LearningActivityBar in place of the normal drop shadow - only on exercises. This gives the two top bar appearance a more unified look as if there are two sections of one overall top bar. - Max width of 1200px applied to the content window, left aligned (right in RTL). HTML5 - Takes up full height and width of the available screen, permits scrolling for tall content (ie, Flexbook) so that it looks and feels natural. - This was done by removing all of the watchers/activity around Hashi watching for resizing.
learningequality · Oct 4, 2021 · df2b810 · df2b810
1 parent 9ff6889
commit df2b810
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 87 deletions.
diff --git a/kolibri/core/assets/src/views/KeenUiToolbar.vue b/kolibri/core/assets/src/views/KeenUiToolbar.vue
@@ -18,7 +18,7 @@
   }
 
   .ui-toolbar {
-    padding: 0 16px 0 30px;
+    padding: 0 32px;
   }
 
 </style>
diff --git a/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue b/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
@@ -14,6 +14,7 @@
 
     <div
       class="epub-renderer-content"
+      :style="{ 'border-color': $themeTokens.fineLine }"
       :dir="contentDirection"
       @mousedown.stop="handleMouseDown"
       @keyup.esc="closeSideBar"
@@ -311,7 +312,6 @@
       epubRendererStyle() {
         return {
           backgroundColor: this.$themeTokens.surface,
-          borderColor: this.$themePalette.grey.v_300,
         };
       },
       navigationButtonColor() {
@@ -766,22 +766,20 @@
     padding: 32px 24px;
     overflow: hidden;
     font-size: smaller;
-    border: solid 1px;
     border-radius: $radius;
   }
 
   .epub-renderer:fullscreen,
   .epub-renderer.small:fullscreen {
     padding: 0;
-
-    .epub-renderer-content {
-      height: 100%;
-    }
   }
 
   .epub-renderer-content {
     position: relative;
-    height: calc(100% - #{$bottom-bar-height});
+    height: 100%;
+    overflow: hidden;
+    border: solid 1px;
+    border-radius: $radius;
   }
 
   .top-bar-component {

diff --git a/kolibri/plugins/html5_viewer/assets/src/views/Html5AppRendererIndex.vue b/kolibri/plugins/html5_viewer/assets/src/views/Html5AppRendererIndex.vue
@@ -3,7 +3,7 @@
   <CoreFullscreen
     ref="html5Renderer"
     class="html5-renderer"
-    :style="{ height: contentRendererHeight, width: iframeWidth }"
+    :style="{ width: iframeWidth }"
     @changeFullscreen="isInFullscreen = $event"
   >
 
@@ -59,7 +59,6 @@
 
   const defaultContentHeight = '500px';
   const frameTopbarHeight = '37px';
-  const pxStringAdd = (x, y) => parseInt(x, 10) + parseInt(y, 10) + 'px';
   export default {
     name: 'Html5AppRendererIndex',
     components: {
@@ -93,9 +92,6 @@
       iframeWidth() {
         return (this.options && this.options.width) || 'auto';
       },
-      contentRendererHeight() {
-        return pxStringAdd(this.iframeHeight, frameTopbarHeight);
-      },
       fullscreenText() {
         return this.isInFullscreen ? this.$tr('exitFullscreen') : this.$tr('enterFullscreen');
       },
@@ -117,7 +113,7 @@
             bottom: 0,
           };
         }
-        return { height: this.iframeHeight };
+        return {};
       },
       /* eslint-disable kolibri/vue-no-unused-properties */
       /**
@@ -206,6 +202,9 @@
 <style lang="scss" scoped>
 
   @import '~kolibri-design-system/lib/styles/definitions';
+  $frame-topbar-height: 37px;
+  $ui-toolbar-height: 56px;
+
   .fullscreen-header {
     text-align: right;
   }
@@ -227,7 +226,9 @@
     @extend %momentum-scroll;
 
     width: 100%;
-    overflow: visible;
+    height: calc(100vh - #{$frame-topbar-height} - #{$ui-toolbar-height});
+    margin-bottom: -8px;
+    overflow: hidden;
   }
 
   .loader {

diff --git a/kolibri/plugins/learn/assets/src/views/LearnImmersiveLayout.vue b/kolibri/plugins/learn/assets/src/views/LearnImmersiveLayout.vue
@@ -16,6 +16,7 @@
       :isCoachContent="isCoachContent"
       :contentProgress="contentProgress"
       :allowMarkComplete="allowMarkComplete"
+      :contentKind="content.kind"
       data-test="learningActivityBar"
       @navigateBack="navigateBack"
       @toggleBookmark="toggleBookmark"

diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <UiToolbar style="z-index: 8;">
+  <UiToolbar style="z-index: 8;" :style="contentSpecificStyles" class="toolbar">
     <CoachContentLabel
       :value="isCoachContent"
       style="margin-top: 8px; width: auto;"
@@ -103,6 +103,7 @@
   import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
+  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import UiToolbar from 'kolibri.coreVue.components.UiToolbar';
@@ -192,6 +193,14 @@
         required: false,
         default: 0,
       },
+      /**
+      The ContentNodeKinds kind of the content being viewed
+      */
+      contentKind: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {
@@ -260,6 +269,15 @@
       menuActions() {
         return difference(this.allActions, this.barActions);
       },
+      contentSpecificStyles() {
+        // The prime difference is that Exercises won't have shadows under the UiToolbar
+        // because the LessonMasteryBar lives under it and has its own drop shadow.
+        if (this.contentKind === ContentNodeKinds.EXERCISE) {
+          return { border: `1px solid ${this.$themeTokens.fineLine}`, 'box-shadow': 'none' };
+        } else {
+          return {};
+        }
+      },
     },
     created() {
       window.addEventListener('click', this.onWindowClick);
@@ -340,20 +358,6 @@
     transform: translateY(16px);
   }
 
-  // decrease the gap between the back navigation
-  // icon and a resource icon + title
-  /deep/ .ui-toolbar__left {
-    .ui-toolbar__nav-icon {
-      margin-right: 12px;
-    }
-  }
-
-  // increase the gap between the resource title
-  // and the action buttons on the right
-  /deep/ .ui-toolbar__right {
-    margin-left: 16px;
-  }
-
   /deep/ .progress-icon .ui-icon {
     margin-top: -2px;
 

diff --git a/kolibri/plugins/learn/assets/src/views/classes/OverallStatus.vue b/kolibri/plugins/learn/assets/src/views/classes/OverallStatus.vue
@@ -1,21 +1,10 @@
 <template>
 
   <div class="overall-container" :style="{ color: $themeTokens.text }">
-    <KIconButton
-      icon="mastered"
-      :disabled="true"
-      :color="success ? $themeTokens.mastered : $themePalette.grey.v_200"
-    />
     <div class="overall-status">
       <span>
         {{ $tr('goal', { count: totalCorrectRequiredM }) }}
       </span>
-      <KIconButton
-        v-if="success"
-        icon="done"
-        :disabled="true"
-        :color="$themeTokens.mastered"
-      />
     </div>
   </div>
 
@@ -35,21 +24,9 @@
 
     computed: {
       ...mapState('topicsTree', ['content']),
-      ...mapState({
-        mastered: state => state.core.logging.mastery.complete,
-      }),
       masteryModel() {
         return this.content.masteryModel;
       },
-      success() {
-        return this.exerciseProgress === 1;
-      },
-      exerciseProgress() {
-        if (this.mastered) {
-          return 1;
-        }
-        return 0; //TODO: switch back to 0
-      },
       mOfNMasteryModel() {
         return MasteryModelGenerators[this.masteryModel.type](
           this.assessmentIds,
@@ -78,14 +55,9 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  .overall-container {
-    // Aligns icon itself to others on its side ltr & rtl
-    margin: 0 -16px !important;
-  }
-
   .overall-status {
     display: inline-block;
-    margin-left: 4px;
+    margin-left: 8px;
   }
 
 </style>
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -230,7 +230,8 @@
         return this.getPage(firstPageToRender + 1).then(firstPage => {
           this.firstPageHeight = firstPage.view[3];
           this.firstPageWidth = firstPage.view[2];
-          this.scale = this.elementWidth / (this.firstPageWidth + MARGIN);
+          const screenSizeMultiplier = this.windowIsLarge ? 1.25 : this.windowIsSmall ? 1 : 1.125;
+          this.scale = this.elementWidth / (this.firstPageWidth * screenSizeMultiplier);
           // Set the firstPageToRender into the pdfPages object so that we do not refetch the page
           // from PDFJS when we do our initial render
           // splice so changes are detected

diff --git a/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue b/kolibri/plugins/perseus_viewer/assets/src/views/PerseusRendererIndex.vue
@@ -686,6 +686,8 @@
   }
 
   .framework-perseus {
+    max-width: 1200px;
+    padding-bottom: 104px;
     margin: 32px 24px 0;
   }
 

diff --git a/packages/hashi/src/iframeClient.js b/packages/hashi/src/iframeClient.js
@@ -36,10 +36,6 @@ export default class SandboxEnvironment {
 
     this.xAPI = new xAPI(this.mediator);
 
-    this.resize = this.resize.bind(this);
-
-    this.mutationObserver = new MutationObserver(this.resize);
-
     this.lastSentHeight = null;
 
     // We initialize SCORM here, as the usual place for SCORM
@@ -106,20 +102,6 @@ export default class SandboxEnvironment {
     this.lastSentHeight = null;
   }
 
-  resize() {
-    if (this.iframe && this.iframe.contentDocument.body) {
-      const documentHeight = this.iframe.contentDocument.documentElement.scrollHeight;
-      if (documentHeight > this.iframe.getBoundingClientRect().height && !this.lastSentHeight) {
-        this.lastSentHeight = documentHeight;
-        this.mediator.sendMessage({
-          nameSpace,
-          event: events.RESIZE,
-          data: documentHeight,
-        });
-      }
-    }
-  }
-
   createIframe({ contentNamespace, startUrl = '' } = {}) {
     if (this.iframe) {
       this.clearIframe(this.iframe);

diff --git a/packages/hashi/src/mainClient.js b/packages/hashi/src/mainClient.js
@@ -33,7 +33,6 @@ export default class MainClient {
     this.contentNamespace = null;
     this.startUrl = null;
     this.__setData = this.__setData.bind(this);
-    this.resize = this.resize.bind(this);
   }
   initialize(contentState, userData, startUrl, contentNamespace) {
     /*
@@ -57,8 +56,6 @@ export default class MainClient {
     // document size may not be updated before the content resizes.
     this.iframe.getBoundingClientRect();
 
-    this.on(this.events.RESIZE, this.resize);
-
     // Set this here so that any time the inner frame declares it is ready
     // it can reinitialize its SandboxEnvironment.
     this.on(this.events.IFRAMEREADY, () => {
@@ -187,10 +184,4 @@ export default class MainClient {
   onProgressUpdate(callback) {
     this.on(events.PROGRESSUPDATE, callback);
   }
-
-  resize(scrollHeight) {
-    if (this.iframe.getBoundingClientRect().height !== scrollHeight) {
-      this.iframe.style.height = scrollHeight + 'px';
-    }
-  }
 }