Merge pull request learningequality#11573 from marcellamaki/more-card…

…-nonsense trying to make all of the card layouts be in sync with one another
vkWeb · Dec 15, 2023 · 83d797d · 83d797d
2 parents 62db7dc + 82ce7f9
commit 83d797d
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 27 deletions.
diff --git a/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js b/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
@@ -8,10 +8,10 @@ export default function useCardLayoutSpan() {
     if (get(windowIsSmall)) {
       return 1;
     }
-    if (get(windowBreakpoint) < 5) {
+    if (get(windowBreakpoint) < 3) {
       return 2;
     }
-    if (get(windowBreakpoint) < 6) {
+    if (get(windowBreakpoint) < 7) {
       return 3;
     }
     return 4;

diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue b/kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <KGrid>
+  <KGrid gutter="16">
     <KGridItem
       v-for="content in contents"
       :key="content.id"
@@ -65,4 +65,10 @@
 </script>
 
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+  .grid {
+    padding-top: 8px;
+  }
+
+</style>
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
@@ -175,6 +175,8 @@
   .device-description {
     padding: 0;
     margin: 0 0 15px;
+    margin-right: -12px;
+    margin-left: -12px;
   }
 
   .library-header-sm {

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
@@ -5,6 +5,7 @@
       :is="!windowIsSmall && currentCardViewStyle === 'list' ? 'div' : 'CardGrid'"
       :data-test="`${windowIsSmall ? '' : 'non-'}mobile-card-grid`"
       :style="{ maxWidth: '1700px' }"
+      :gridType="gridType"
     >
       <component
         :is="componentType"
@@ -83,6 +84,10 @@
         type: Boolean,
         default: false,
       },
+      gridType: {
+        type: Number,
+        default: 1,
+      },
     },
     computed: {
       componentType() {

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -1,13 +1,13 @@
 <template>
 
   <div>
-    <KGrid gutter="12">
+    <KGrid gutter="0" class="grid">
       <KGridItem
         :layout12="{ span: 6 }"
         :layout8="{ span: 4 }"
         :layout4="{ span: 4 }"
       >
-        <h1>
+        <h1 :style="{ marginLeft: '-8px' }">
           {{ injectedtr('otherLibraries') }}
         </h1>
       </KGridItem>
@@ -69,10 +69,11 @@
     <h2
       v-if="!threeLibrariesOrFewer && pinnedDevicesExist && unpinnedDevicesExist"
       data-test="pinned-label"
+      :style="{ marginLeft: '-8px' }"
     >
       {{ injectedtr('pinned') }}
     </h2>
-    <FadeInTransitionGroup>
+    <FadeInTransitionGroup class="other-libraries-grid">
       <LibraryItem
         v-for="device in fullLibrariesToDisplay"
         :key="device['instance_id']"
@@ -87,7 +88,7 @@
 
     <!-- More  -->
 
-    <KGrid v-if="!threeLibrariesOrFewer && unpinnedDevicesExist">
+    <KGrid v-if="!threeLibrariesOrFewer && unpinnedDevicesExist" class="other-libraries-grid">
       <KGridItem
         :layout12="{ span: 10 }"
         :layout8="{ span: 6 }"
@@ -96,7 +97,7 @@
         <h2
           v-if="pinnedDevicesExist"
           data-test="more-label"
-          :style="{ marginTop: '0px' }"
+          :style="{ marginTop: '0px', marginLeft: '-8px' }"
         >
           {{ injectedtr('moreLibraries') }}
         </h2>
@@ -242,4 +243,12 @@
     transform: scale(1.5);
   }
 
+  .grid {
+    margin: 8px;
+  }
+
+  .other-libraries-grid {
+    margin-left: 0.75em;
+  }
+
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
@@ -30,8 +30,9 @@
       <LibraryAndChannelBrowserMainContent
         :contents="contentCardsToDisplay"
         data-test="resumable-content-card-grid"
+        class="resumable-content-card-grid"
         :currentCardViewStyle="currentCardViewStyle"
-        :gridType="1"
+        :gridType="gridType"
         @openCopiesModal="copies => displayedCopies = copies"
         @toggleInfoPanel="$emit('setSidePanelMetadataContent', $event)"
       />
@@ -127,7 +128,7 @@
     },
     computed: {
       numContentCardsToDisplay() {
-        return this.windowBreakpoint === 2 ? 4 : 3;
+        return this.windowBreakpoint === 2 || this.windowBreakpoint > 6 ? 4 : 3;
       },
       contentCardsToDisplay() {
         if (this.showMoreContentCards) {
@@ -139,6 +140,9 @@
       moreContentCards() {
         return this.resumableContentNodes.length > this.numContentCardsToDisplay;
       },
+      gridType() {
+        return this.windowBreakpoint > 6 ? 2 : 1;
+      },
     },
     methods: {
       toggleCardView(value) {
@@ -174,4 +178,9 @@
     float: right;
   }
 
+  .resumable-content-card-grid {
+    margin-right: -8px;
+    margin-left: -8px;
+  }
+
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -446,7 +446,7 @@
           (this.isLocalLibraryEmpty && !this.deviceId)
         ) {
           return 0;
-        } else if (this.windowBreakpoint < 4) {
+        } else if (this.windowBreakpoint < 5) {
           return 234;
         } else {
           return 346;

diff --git a/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue b/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
@@ -42,7 +42,7 @@
       :allowDownloads="allowDownloads"
       data-test="search-results-card-grid"
       :currentCardViewStyle="currentCardViewStyle"
-      :gridType="1"
+      :gridType="gridType"
       @openCopiesModal="copies => displayedCopies = copies"
       @toggleInfoPanel="$emit('setSidePanelMetadataContent', $event)"
     />
@@ -144,6 +144,11 @@
         displayedCopies: [],
       };
     },
+    computed: {
+      gridType() {
+        return this.windowBreakpoint > 6 ? 2 : 1;
+      },
+    },
     methods: {
       toggleCardView(value) {
         this.$emit('setCardStyle', value);

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicSubsection.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicSubsection.vue
@@ -33,6 +33,7 @@
       v-if="topic.children && topic.children.length"
       data-test="children-cards-grid"
       :contents="topic.children"
+      :gridType="gridType"
       :allowDownloads="allowDownloads"
       currentCardViewStyle="card"
       :keepCurrentBackLink="true"
@@ -93,6 +94,10 @@
         default: false,
         required: false,
       },
+      gridType: {
+        type: Number,
+        default: 1,
+      },
     },
   };
 

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -110,6 +110,7 @@
                   :key="t.id"
                   :topic="t"
                   :subTopicLoading="t.id === subTopicLoading"
+                  :gridType="gridType"
                   :allowDownloads="allowDownloads"
                   @showMore="handleShowMore"
                   @loadMoreInSubtopic="handleLoadMoreInSubtopic"
@@ -124,7 +125,7 @@
                 :allowDownloads="allowDownloads"
                 data-test="search-results"
                 :contents="resourcesDisplayed"
-                :numCols="numCols"
+                :gridType="gridType"
                 currentCardViewStyle="card"
                 @toggleInfoPanel="toggleInfoPanel"
               />
@@ -570,9 +571,6 @@
           ? this.learnString('exploreLibraries')
           : (this.topic && this.topic.title) || '';
       },
-      childrenToDisplay() {
-        return Math.max(this.numCols, 3);
-      },
       breadcrumbs() {
         if (!this.topic || !this.topic.ancestors) {
           return [];
@@ -602,6 +600,12 @@
       resources() {
         return this.contents.filter(content => content.kind !== ContentNodeKinds.TOPIC);
       },
+      childrenToDisplay() {
+        return this.windowBreakpoint === 2 || this.windowBreakpoint > 4 ? 4 : 3;
+      },
+      gridType() {
+        return this.windowBreakpoint > 4 ? 2 : 1;
+      },
       resourcesDisplayed() {
         // if no folders are shown at this level, show more resources to fill the space
         // or if the user has explicitly requested to show more resources
@@ -652,6 +656,7 @@
             // showMore is whether we should show more inline
             const showMore =
               !this.subTopicId &&
+              this.topics.length != 1 &&
               topicChildren.length > this.childrenToDisplay &&
               !this.expandedTopics[t.id];
 
@@ -696,7 +701,7 @@
       sidePanelWidth() {
         if (!this.windowIsLarge) {
           return 0;
-        } else if (this.windowBreakpoint < 4) {
+        } else if (this.windowBreakpoint < 5) {
           return 234;
         } else {
           return 346;
@@ -729,15 +734,6 @@
         }
         return style;
       },
-      numCols() {
-        if (this.windowBreakpoint > 1 && this.windowBreakpoint < 2) {
-          return 2;
-        } else if (this.windowBreakpoint >= 2 && this.windowBreakpoint <= 4) {
-          return 3;
-        } else if (this.windowBreakpoint > 4) {
-          return 4;
-        } else return null;
-      },
       throttledStickyCalculation() {
         return throttle(this.stickyCalculation);
       },