WIP

learningequality · Nov 7, 2024 · 4e7e96f · 4e7e96f
1 parent 6cf20cb
commit 4e7e96f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,16 +166,13 @@
   //   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';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   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],