Merge pull request #10903 from marcellamaki/side-bar-yet-again

Refactor sidebar to use slots
learningequality · Jun 23, 2023 · 39fbfc1 · 39fbfc1
2 parents a196c1e + b130a63
commit 39fbfc1
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 56 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
@@ -4,7 +4,8 @@
     v-show="!$isPrint"
     class="tab-block"
     :style="{
-      borderBottomColor: !$isPrint ? $themeTokens.fineLine : 'transparent',
+      backgroundColor: $themeTokens.surface,
+      borderBottom: `1px solid ${$themeTokens.fineLine}`
     }"
   >
     <router-link
@@ -106,18 +107,21 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  // Stolen from Coach HeaderTab(s) components
   .tab-block {
-    position: fixed;
-    top: 324px;
+    position: absolute;
+    top: 253px;
+    right: 0;
+    left: 0;
+    width: 100%;
   }
 
   .header-tab {
     display: inline-table; // helps with vertical layout
     min-width: 64px;
     max-width: 100%;
     min-height: 36px;
-    margin-left: 24px;
+    padding: 0 12px;
+    margin: 0 12px;
     overflow: hidden;
     font-size: 14px;
     font-weight: bold;

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
@@ -5,7 +5,6 @@
     class="header"
     :style="{
       backgroundColor: $themeTokens.surface,
-      borderBottom: `1px solid ${$themeTokens.fineLine}`
     }"
   >
     <KGrid gutter="0">
@@ -63,8 +62,9 @@
         />
       </KGridItem>
     </KGrid>
-
-
+    <div>
+      <slot name="sticky-sidebar"></slot>
+    </div>
   </div>
 
 </template>
@@ -114,7 +114,7 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  $header-height: 324px;
+  $header-height: 274px;
   $toolbar-height: 70px;
 
   .header {

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -36,7 +36,33 @@
           :description="topic && topic.description"
           :thumbnail="topic && topic.thumbnail"
           :breadcrumbs="breadcrumbs"
-        />
+        >
+          <template #sticky-sidebar>
+            <ToggleHeaderTabs
+              v-if="!!windowIsLarge"
+              :topic="topic"
+              :topics="topics"
+              :style="tabPosition"
+            />
+            <SearchFiltersPanel
+              v-if="!!windowIsLarge"
+              ref="sidePanel"
+              v-model="searchTerms"
+              :topicsListDisplayed="!desktopSearchActive"
+              class="side-panel"
+              topicPage="True"
+              :topics="topics"
+              :topicsLoading="topicMoreLoading"
+              :more="topicMore"
+              :width="`${sidePanelWidth}px`"
+              :showChannels="false"
+              position="embedded"
+              :style="sidePanelStyleOverrides"
+              @currentCategory="handleShowSearchModal"
+              @loadMoreTopics="handleLoadMoreInTopic"
+            />
+          </template>
+        </TopicsHeader>
 
         <!-- mobile tabs (different alignment and interactions) -->
         <TopicsMobileHeader v-else :topic="topic" />
@@ -157,31 +183,6 @@
           @loadMoreTopics="handleLoadMoreInTopic"
           @close="sidePanelIsOpen = false"
         />
-
-        <!-- Embedded Side panel is on larger views, and exists next to content -->
-        <ToggleHeaderTabs
-          v-if="!!windowIsLarge"
-          :topic="topic"
-          :topics="topics"
-          :style="tabPosition"
-        />
-        <SearchFiltersPanel
-          v-if="!!windowIsLarge"
-          ref="sidePanel"
-          v-model="searchTerms"
-          :topicsListDisplayed="!desktopSearchActive"
-          class="side-panel"
-          topicPage="True"
-          :topics="topics"
-          :topicsLoading="topicMoreLoading"
-          :more="topicMore"
-          :width="`${sidePanelWidth}px`"
-          :showChannels="false"
-          position="embedded"
-          :style="sidePanelStyleOverrides"
-          @currentCategory="handleShowSearchModal"
-          @loadMoreTopics="handleLoadMoreInTopic"
-        />
         <!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
         <!-- FullScreen is a container component, and then the SearchFiltersPanel sits within -->
         <SidePanelModal
@@ -589,10 +590,6 @@
       throttledStickyCalculation() {
         return throttle(this.stickyCalculation);
       },
-      // calls handleScroll no more than every 17ms
-      throttledTabPositionCalculation() {
-        return throttle(this.tabPositionCalculation);
-      },
       topicMore() {
         return this.topic && this.topic.children && this.topic.children.more;
       },
@@ -643,7 +640,6 @@
       ...mapActions('topicsTree', ['loadMoreContents', 'loadMoreTopics']),
       throttledHandleScroll() {
         this.throttledStickyCalculation();
-        this.throttledTabPositionCalculation();
       },
       handleShowSearchModal(value) {
         this.currentCategory = value;
@@ -667,19 +663,6 @@
         }
         this.toggleFolderSearchSidePanel();
       },
-      tabPositionCalculation() {
-        const tabBottom = this.$refs.sidePanel
-          ? this.$refs.sidePanel.$el.getBoundingClientRect().top
-          : 0;
-        if (tabBottom > 0) {
-          this.tabPosition = {
-            position: 'fixed',
-            top: `${tabBottom - 70}px`,
-          };
-        } else {
-          this.tabPosition = {};
-        }
-      },
       // Stick the side panel to top. That can be on the very top of the viewport
       // or right under the 'Browse channel' toolbar, depending on whether the toolbar
       // is visible or no (the toolbar hides on smaller resolutions when scrolling
@@ -692,7 +675,7 @@
         const headerBottom = header ? header.getBoundingClientRect().bottom : 0;
         const topbarBottom = topbar ? topbar.getBoundingClientRect().bottom : 0;
 
-        if (headerBottom < Math.max(topbarBottom, 0)) {
+        if (header && headerBottom < Math.max(topbarBottom, 0)) {
           this.sidePanelStyleOverrides = {
             position: 'fixed',
             top: `${Math.max(0, headerBottom, topbarBottom)}px`,
@@ -751,7 +734,7 @@
 
   $header-height: 324px;
   $toolbar-height: 70px;
-  $total-height: 394px;
+  $total-height: 324px;
 
   .page {
     position: relative;
@@ -762,12 +745,13 @@
   .side-panel {
     position: absolute;
     top: $total-height;
+    min-height: calc(100vh - #{$toolbar-height});
     padding-top: 16px;
   }
 
   .main-content-grid {
     position: relative;
-    top: $toolbar-height;
+    top: 120px;
     margin: 24px;
   }