Merge pull request #8637 from marcellamaki/design-updates

Design updates
learningequality · Nov 12, 2021 · 67349b9 · 67349b9
2 parents aff5290 + 6b9a846
commit 67349b9
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 19 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
@@ -12,7 +12,11 @@
       dir="auto"
       :style="{ borderBottom: `1px solid ${$themeTokens.fineLine}` }"
     >
-      {{ title }}
+      <TextTruncator
+        :text="title"
+        :maxHeight="titleHeight"
+        :showTooltip="true"
+      />
     </h3>
 
 
@@ -128,6 +132,9 @@
           minHeight: `${this.overallHeight}px`,
         };
       },
+      titleHeight() {
+        return 60;
+      },
       taglineHeight() {
         return 165;
       },
@@ -157,6 +164,7 @@
     position: relative;
     display: inline-block;
     width: 100%;
+    max-height: 258px;
     padding-bottom: $margin;
     text-decoration: none;
     vertical-align: top;

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage.vue
@@ -63,7 +63,7 @@
 
       <!-- First section is the results title and the various display buttons  -->
       <!-- for interacting or updating the results   -->
-      <div v-else-if="!searchLoading" class="results-title">
+      <div v-else-if="!searchLoading">
         <h2 class="results-title">
           {{ $tr('results', { results: results.length }) }}
         </h2>
@@ -319,9 +319,7 @@
         return 300;
       },
       numCols() {
-        if (this.currentViewStyle === 'list' || this.windowBreakpoint < 1) {
-          return null;
-        } else if (this.windowIsSmall) {
+        if (this.windowIsSmall) {
           return 2;
         } else {
           return 3;

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -24,7 +24,10 @@
             :layout12="{ span: 12 }"
           >
             <h1 class="title">
-              {{ topic.title }}
+              <TextTruncator
+                :text="topic.title"
+                :maxHeight="maxTitleHeight"
+              />
             </h1>
           </KGridItem>
 
@@ -53,14 +56,16 @@
             :layout8="{ span: topic.thumbnail ? 6 : 8 }"
             :layout12="{ span: topic.thumbnail ? 10 : 12 }"
           >
-            {{ topic.description }}
+            <TextTruncator
+              :text="topic.description"
+              :maxHeight="maxDescriptionHeight"
+            />
           </KGridItem>
         </KGrid>
         <!-- Nested tabs within the header, for toggling sidebar options -->
         <!-- larger screens -->
         <div class="tabs">
           <KRouterLink
-            v-if="topics.length"
             ref="tab_button"
             :to="foldersLink"
             :text="coreString('folders')"
@@ -93,7 +98,6 @@
         <div class="mobile-header-contents">
           <div class="mobile-tabs">
             <KRouterLink
-              v-if="topics.length"
               ref="tab_button"
               :to="foldersLink"
               :text="coreString('folders')"
@@ -133,18 +137,24 @@
           </div>
           <!-- default/preview display of nested folder structure, not search -->
           <div v-if="!displayingSearchResults">
+            <h2>
+              <TextTruncator
+                :text="topic.title"
+                :maxHeight="maxTitleHeight"
+              />
+            </h2>
             <!-- display for each nested topic/folder  -->
             <div v-for="t in topicsForDisplay" :key="t.id">
               <!-- header link to folder -->
-              <h2>
+              <h3>
                 <KRouterLink
                   :text="t.title"
                   :to="genContentLink(t.id)"
                   class="folder-header-link"
                   iconAfter="chevronRight"
                   :appearanceOverrides="{ color: $themeTokens.text }"
                 />
-              </h2>
+              </h3>
               <!-- card grid of items in folder -->
               <HybridLearningCardGrid
                 v-if="t.children && t.children.length"
@@ -195,7 +205,7 @@
               <KCircularLoader v-else />
             </div>
           </div>
-          <div v-else-if="!searchLoading" class="results-title">
+          <div v-else-if="!searchLoading">
             <h2 class="results-title">
               {{ translator.$tr('results', { results: results.length }) }}
             </h2>
@@ -349,6 +359,7 @@
   import { mapActions, mapState } from 'vuex';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+  import TextTruncator from 'kolibri.coreVue.components.TextTruncator';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import FullScreenSidePanel from 'kolibri.coreVue.components.FullScreenSidePanel';
@@ -395,6 +406,7 @@
       FullScreenSidePanel,
       BrowseResourceMetadata,
       SearchChips,
+      TextTruncator,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],
     setup() {
@@ -431,7 +443,7 @@
     },
     data: function() {
       return {
-        stickyTop: '364px',
+        stickyTop: '388px',
         currentViewStyle: 'card',
         currentCategory: null,
         showSearchModal: false,
@@ -592,11 +604,9 @@
         return 300;
       },
       numCols() {
-        if (this.currentViewStyle === 'list' || this.windowBreakpoint < 1) {
-          return 1;
-        } else if (this.windowBreakpoint < 2) {
+        if (this.windowBreakpoint < 2) {
           return 2;
-        } else if (this.windowBreakpoint < 3) {
+        } else if (this.windowBreakpoint <= 4) {
           return 3;
         } else {
           return 4;
@@ -618,6 +628,12 @@
       topicMore() {
         return this.topic.children && this.topic.children.more;
       },
+      maxTitleHeight() {
+        return 60;
+      },
+      maxDescriptionHeight() {
+        return 110;
+      },
     },
     watch: {
       topic() {
@@ -661,10 +677,14 @@
       },
       stickyCalculation() {
         let header = document.getElementsByClassName('header')[0];
+        let topbar = document.getElementsByClassName('ui-toolbar')[0];
         if (header) {
           let position = header.getBoundingClientRect();
+          let topbarPosition = topbar.getBoundingClientRect();
           if (position.bottom >= 64) {
             this.stickyTop = `${position.bottom}px`;
+          } else if (position.bottom < 0 && topbarPosition.bottom < 0) {
+            this.stickyTop = '0px';
           } else {
             this.stickyTop = '64px';
           }
@@ -726,7 +746,7 @@
     position: relative;
     // z-index: 4;
     width: 100%;
-    height: 300px;
+    height: 324px;
     padding-top: 32px;
     padding-bottom: 0;
     padding-left: 32px;
@@ -743,6 +763,10 @@
     }
   }
 
+  .title {
+    margin: 12px;
+  }
+
   .tabs {
     position: absolute;
     bottom: 0;
@@ -765,7 +789,6 @@
   /deep/.card-thumbnail-wrapper {
     max-width: 100%;
     height: 110px;
-    border: 1px solid #dedede;
   }
 
   .results-title {

diff --git a/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/LearningActivityLabel.vue b/kolibri/plugins/learn/assets/src/views/cards/ResourceCard/LearningActivityLabel.vue
@@ -3,6 +3,7 @@
   <div v-if="contentNode">
     <div class="learning-activity">
       <span
+        v-if="!labelAfter"
         class="label"
         data-test="label"
       >
@@ -16,6 +17,13 @@
           :kind="learningActivity"
           :style="{ fontSize: '18px' }"
         />
+        <span
+          v-if="labelAfter"
+          class="label"
+          data-test="label"
+        >
+          {{ label }}
+        </span>
       </template>
     </div>
     <div
@@ -69,6 +77,12 @@
         required: false,
         default: false,
       },
+      // allows for switching the order of the label and the icon
+      labelAfter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     computed: {
       LearningActivityToLabelMap() {
@@ -157,6 +171,7 @@
 
     .label {
       padding-right: 4px;
+      padding-left: 4px;
     }
 
     .icon {