From 4e7e96ff4d6aeeb9409e96d0d776aa5573c7ff3c Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 7 Nov 2024 13:22:50 -0800
Subject: [PATCH] WIP

---
 .../plan/CreateExamPage/ResourceSelection.vue |  1 -
 .../assets/src/views/LibraryPage/index.vue    | 27 +++++++----
 .../assets/src/views/TopicsPage/index.vue     | 47 +++++++++++--------
 .../ActivityButtonsGroup.vue                  |  2 +-
 .../components/SearchFiltersPanel/index.vue   | 11 +----
 5 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 49bdec8308..a3f82b8e6e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -183,7 +183,6 @@
       ref="sidePanel"
       v-model="searchTerms"
       data-test="side-panel"
-      style="position: absolute"
       width="100%"
       :accordion="true"
       :showActivities="true"
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index aa2f81a92f..59ffd0f50b 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -102,14 +102,25 @@
       </main>
 
       <!-- Side Panels for filtering and searching  -->
-      <SearchFiltersPanel
-        v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
-        ref="sidePanel"
-        v-model="searchTerms"
-        data-test="side-panel"
-        :width="`${sidePanelWidth}px`"
-        @close="toggleSidePanelVisibility"
-      />
+      <SidePanelModal
+        v-if="mobileSidePanelIsOpen && !windowIsLarge"
+        @closePanel="toggleSidePanelVisibility"
+      >
+        <SearchFiltersPanel
+          ref="sidePanel"
+          v-model="searchTerms"
+          data-test="side-panel"
+          :width="`${sidePanelWidth}px`"
+        />
+      </SidePanelModal>
+      <div v-else-if="!isLocalLibraryEmpty || deviceId">
+        <SearchFiltersPanel
+          ref="sidePanel"
+          v-model="searchTerms"
+          data-test="side-panel"
+          :width="`${sidePanelWidth}px`"
+        />
+      </div>
 
       <!-- Side Panel for metadata -->
       <SidePanelModal
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 0ba3a3c6f3..45aa12e66e 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -186,26 +186,24 @@
 
         <!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
         <template v-if="!windowIsLarge && sidePanelIsOpen">
-          <SearchFiltersPanel
-            v-if="searchActive"
-            ref="embeddedPanel"
-            v-model="searchTerms"
-            class="full-screen-side-panel"
-            :showChannels="false"
-            :style="sidePanelStyleOverrides"
-            @close="sidePanelIsOpen = false"
-          />
-          <TopicsPanelModal
-            v-else
-            ref="embeddedPanel"
-            class="full-screen-side-panel"
-            :topics="topics"
-            :topicMore="Boolean(topicMore)"
-            :topicsLoading="topicMoreLoading"
-            :style="sidePanelStyleOverrides"
-            @loadMoreTopics="handleLoadMoreInTopic"
-            @close="sidePanelIsOpen = false"
-          />
+          <SidePanelModal @closePanel="sidePanelIsOpen = false">
+            <SearchFiltersPanel
+              v-if="searchActive"
+              ref="embeddedPanel"
+              v-model="searchTerms"
+              :showChannels="false"
+              :style="sidePanelStyleOverrides"
+            />
+            <TopicsPanelModal
+              v-else
+              ref="embeddedPanel"
+              :topics="topics"
+              :topicMore="Boolean(topicMore)"
+              :topicsLoading="topicMoreLoading"
+              :style="sidePanelStyleOverrides"
+              @loadMoreTopics="handleLoadMoreInTopic"
+            />
+          </SidePanelModal>
         </template>
       </div>
 
@@ -1049,4 +1047,13 @@
     margin-bottom: 24px;
   }
 
+  /deep/ .activities-wrapper {
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  }
+
+  /deep/ .btn-activity {
+    width: 80px;
+    height: 80px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue
index df49a5b2c3..66e1b6c404 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/ActivityButtonsGroup.vue
@@ -130,7 +130,7 @@
 
   .wrapper {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
   }
 
 </style>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 79404300c9..14e8796272 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -1,7 +1,6 @@
 <template>
 
-  <component
-    :is="windowIsLarge ? 'section' : 'SidePanelModal'"
+  <section
     alignment="left"
     role="region"
     :class="windowIsLarge ? 'side-panel' : ''"
@@ -150,7 +149,7 @@
       @cancel="currentCategory = null"
       @input="selectCategory"
     />
-  </component>
+  </section>
 
 </template>
 
@@ -167,8 +166,6 @@
   //   in https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue#L366-L378
   //
 
-  import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
-  import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
   import { NoCategories } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
@@ -176,7 +173,6 @@
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
   import SearchBox from '../SearchBox';
-  import SidePanelModal from '../SidePanelModal';
   import ActivityButtonsGroup from './ActivityButtonsGroup';
   import CategorySearchModal from './CategorySearchModal';
   import SelectGroup from './SelectGroup';
@@ -189,9 +185,6 @@
       ActivityButtonsGroup,
       SelectGroup,
       CategorySearchModal,
-      SidePanelModal,
-      AccordionItem,
-      AccordionContainer,
       AccordionSelectGroup,
     },
     mixins: [commonCoreStrings],