make offcanvas filters work

laws-africa · Jul 16, 2024 · a9c4c14 · a9c4c14
1 parent ac648da
commit a9c4c14
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 315 deletions.
diff --git a/peachjam/js/components/ListFacets.vue b/peachjam/js/components/ListFacets.vue
diff --git a/peachjam/js/components/document-filter-form.ts b/peachjam/js/components/document-filter-form.ts
@@ -0,0 +1,19 @@
+export default class DocumentFilterForm {
+  public root: HTMLElement;
+
+  constructor (root: HTMLElement) {
+    this.root = root;
+    // on small displays, move the filters into the offcanvas element
+    if (window.innerWidth < 992) {
+      this.moveFiltersToOffcanvas();
+    }
+  }
+
+  moveFiltersToOffcanvas () {
+    const offcanvas = this.root.querySelector('.offcanvas-body');
+    const content = this.root.querySelector('.document-list-facets');
+    if (offcanvas && content) {
+      offcanvas.appendChild(content);
+    }
+  }
+}
diff --git a/peachjam/js/components/document-list.ts b/peachjam/js/components/document-list.ts
diff --git a/peachjam/js/components/index.ts b/peachjam/js/components/index.ts
@@ -1,6 +1,6 @@
 import { CopyToClipboard } from './clipboard';
 import { RelationshipEnrichments } from './RelationshipEnrichment';
-import DocumentList from './document-list';
+import DocumentFilterForm from './document-filter-form';
 import DocumentTable from './document-table';
 import DocumentContent from './DocumentContent/index';
 import NavigationSelect from './navigation-select';
@@ -16,8 +16,8 @@ const components: Record<string, any> = {
   // Data components
   CopyToClipboard,
   DocumentContent,
+  DocumentFilterForm,
   DocumentTable,
-  DocumentList,
   NavigationSelect,
   RelationshipEnrichments,
   ToggleTab,

diff --git a/peachjam/static/js/app-prod.js b/peachjam/static/js/app-prod.js