Redesign filter-panel in audios and memories page

frontend/src/_includes/partials/filter-section.html

@@ -0,0 +1,35 @@
+<!--
+  Declaring a data attribute to use it further with `group-data-[expanded]` modifier.
+  https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
+  https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes
+  This is better than using :class because we stay in the Tailwind paradigm, avail of class sorting etc.
+-->
+<div
+  x-data="{ expanded: true }"
+  :data-expanded="expanded"
+  class="group mb-2 overflow-hidden text-neutral-600"
+>
+  <header
+    @click="expanded = !expanded"
+    class="flex cursor-pointer select-none rounded-md border border-neutral-200 px-2 py-2 text-left align-baseline text-sm font-medium uppercase transition-colors group-data-[expanded]:bg-neutral-100 group-data-[expanded]:text-neutral-800"
+  >
+    <span class="mr-2 flex-grow">{{ title }}</span>
+    <svg class="h-5 w-3 shrink-0 group-data-[expanded]:rotate-180 motion-safe:transition-transform" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
+    </svg>
+  </header>
+  <main
+    x-show="expanded"
+    class="-mt-1 rounded-b-md border border-t-0 border-neutral-200 p-2 pt-3 transition-opacity dark:border-neutral-700 dark:bg-neutral-900"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+  >
+    {% if subtitle -%}
+      <p class="mb-2 text-xs font-light lowercase">{{ subtitle }}</p>
+    {%- endif %}
+    <!-- Slot for Instant Search, should be empty for selectors to work -->
+    <div></div>
+  </main>
+</div>

frontend/src/_layouts/base.html

@@ -89,7 +89,7 @@
     </header>
 
     <!-- Page Content -->
-    <section class="flex-1">
+    <section class="flex-1 md:py-3">
       <div class="mx-auto max-w-screen-xl">{{ content }}</div>
     </section>
 

frontend/src/audios.html

@@ -16,26 +16,44 @@
     x-cloak
     @keydown.escape="open = false"
     :class="open ? 'translate-x-0': '-translate-x-full'"
-    class="fixed top-0 z-20 flex h-full w-64 flex-col bg-white text-sm transition-transform ease-linear md:static md:z-auto md:flex md:w-1/5 md:max-w-sm md:translate-x-0"
+    class="fixed top-0 z-20 flex h-full w-64 flex-col bg-white transition-transform ease-linear md:static md:z-auto md:flex md:w-1/5 md:max-w-sm md:translate-x-0"
   >
-    <div class="flex-none bg-submarine-500 p-2 text-center font-bold uppercase text-neutral-600 md:hidden">Filter</div>
-    <div class="grow overflow-y-auto overflow-x-hidden p-2 pb-40 pt-0">
-      <div id="language-list"></div>
-      <div id="sound-quality-list"></div>
-      <div id="duration-menu"></div>
-      <div id="percentage-menu"></div>
-      <div id="category-list"></div>
-      <div id="year-list"></div>
-      <div id="location-list"></div>
+    <header class="flex-none border-b p-4 font-bold text-neutral-600 md:hidden">Filter</header>
+    <div class="grow overflow-y-auto overflow-x-hidden p-2 pb-40">
+      <div id="language-list">
+        {% render 'partials/filter-section.html', title: 'Languages' -%}
+      </div>
+      <div id="sound-quality-list">
+        {% render 'partials/filter-section.html', title: 'Sound Quality' -%}
+      </div>
+      <div id="duration-menu">
+        {% render 'partials/filter-section.html', title: 'Duration' -%}
+      </div>
+      <div id="percentage-menu">
+        {% render 'partials/filter-section.html', title: 'Srila Gurudeva Timing' -%}
+      </div>
+      <div id="category-list">
+        {% render 'partials/filter-section.html', title: 'Category' -%}
+      </div>
+      <!-- Columns is not an ideal solution, waiting for better suggestions: https://stackoverflow.com/q/76898065/3082178 -->
+      <div
+        id="year-list"
+        class="[&_.ais-RefinementList-labelText]:whitespace-nowrap [&_.ais-RefinementList]:columns-[5rem]"
+      >
+        {% render 'partials/filter-section.html', title: 'Year' -%}
+      </div>
+      <div id="location-list">
+        {% render 'partials/filter-section.html', title: 'Location' -%}
+      </div>
     </div>
-    <div class="flex-none border-t p-2 md:hidden">
+    <footer class="flex-none border-t p-4 md:hidden">
       <button
         @click="open = false"
-        class="w-full rounded-md bg-neutral-600 p-2 font-semibold uppercase text-white shadow-sm"
+        class="rounded-md bg-neutral-600 px-10 py-2 text-sm font-semibold text-white"
       >
         Close
       </button>
-    </div>
+    </footer>
   </div>
   <main class="w-full grow px-2 sm:w-4/5 sm:px-4">
     <div id="searchbox" class="flex flex-none">

frontend/src/css/algolia.css

@@ -182,7 +182,10 @@ a[class^='ais-'] {
 .ais-NumericMenu-list,
 .ais-RatingMenu-list,
 .ais-RefinementList-list {
-  @apply font-normal leading-normal;
+  @apply space-y-2;
+}
+
+.ais-RefinementList-item {
 }
 
 .ais-HierarchicalMenu-link {
@@ -195,27 +198,26 @@ a[class^='ais-'] {
   }
 }
 
-.ais-RefinementList-item {
-  @apply break-inside-avoid py-1;
-}
-
+.ais-NumericMenu-label,
 .ais-RefinementList-label {
-  @apply flex items-baseline;
+  @apply flex break-inside-avoid items-center;
 }
 
+.ais-NumericMenu-radio,
 .ais-RefinementList-checkbox {
   @apply flex-none;
 }
 
+.ais-NumericMenu-labelText,
 .ais-RefinementList-labelText {
-  @apply grow overflow-x-hidden break-words px-1;
+  @apply mx-2 overflow-x-hidden break-words text-sm;
 }
 
 .ais-HierarchicalMenu-count,
 .ais-Menu-count,
 .ais-RefinementList-count,
 .ais-ToggleRefinement-count {
-  @apply flex-none text-xs text-gray-400;
+  @apply ml-auto flex-none text-xs font-semibold;
 }
 
 .ais-HierarchicalMenu-showMore,
@@ -279,7 +281,7 @@ a[class^='ais-'] {
   @apply block rounded border px-3 py-1 transition-colors duration-200 ease-out focus:outline-none;
 
   .ais-Pagination-item--disabled & {
-    @apply cursor-not-allowed text-gray-400 opacity-60;
+    @apply cursor-not-allowed text-neutral-400 opacity-60;
   }
 
   .ais-Pagination-item--selected & {
@@ -299,7 +301,7 @@ a[class^='ais-'] {
   }
 
   & .ais-SearchBox-input {
-    @apply h-8 px-8 text-sm;
+    @apply h-8 px-8;
   }
 
   & .ais-SearchBox-submit,
@@ -356,10 +358,6 @@ a[class^='ais-'] {
   @apply flex flex-wrap max-sm:justify-center;
 }
 
-.ais-NumericMenu-labelText {
-  @apply pl-1;
-}
-
 .ais-Stats-text {
   @apply font-bold italic text-neutral-600;
 }

frontend/src/css/app.css

@@ -12,6 +12,28 @@
     font-style: normal;
   }
 
+  [type='checkbox'],
+  [type='radio'] {
+    @apply h-4 w-4 shrink-0 select-none appearance-none border border-neutral-300 bg-white bg-origin-border;
+    &:checked {
+      @apply border-transparent bg-current bg-contain bg-center bg-no-repeat;
+    }
+  }
+
+  input[type='checkbox'] {
+    @apply rounded;
+    &:checked {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
+    }
+  }
+
+  input[type='radio'] {
+    @apply rounded-full;
+    &:checked {
+      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
+    }
+  }
+
   button {
     @apply focus:outline-none;
   }

frontend/src/js/audios.js

@@ -10,7 +10,6 @@ import {
   hits,
   numericMenu,
   pagination,
-  panel,
   refinementList,
   stats,
 } from 'instantsearch.js/es/widgets';
@@ -84,24 +83,16 @@ search.addWidgets([
         document.getElementById('under-progress').classList.remove('hidden');
     },
   },
-  panel({
-    templates: {
-      header: () => 'Location',
-    },
-  })(refinementList)({
-    container: '#location-list',
+  refinementList({
+    container: '#location-list div:empty',
     attribute: 'location',
     searchable: true,
     showMore: true,
     showMoreLimit: 50,
     sortBy: ['name:asc'],
   }),
-  panel({
-    templates: {
-      header: () => 'Languages',
-    },
-  })(refinementList)({
-    container: '#language-list',
+  refinementList({
+    container: '#language-list div:empty',
     attribute: 'languageCategory',
     transformItems: (items) =>
       items
@@ -116,12 +107,8 @@ search.addWidgets([
           highlighted: languageCategories[item.label].label,
         })),
   }),
-  panel({
-    templates: {
-      header: () => 'Sound Quality',
-    },
-  })(refinementList)({
-    container: '#sound-quality-list',
+  refinementList({
+    container: '#sound-quality-list div:empty',
     attribute: 'soundQualityRating',
     sortBy: (a, b) =>
       soundQualityRatingMapping[a.name].order -
@@ -133,47 +120,28 @@ search.addWidgets([
         highlighted: soundQualityRatingMapping[item.label].label || item.label,
       })),
   }),
-  panel({
-    templates: {
-      header: () => 'Category',
-    },
-  })(refinementList)({
-    container: '#category-list',
+  refinementList({
+    container: '#category-list div:empty',
     attribute: 'category',
     sortBy: ['name:asc'],
   }),
-  panel({
-    templates: {
-      header: () => 'Year',
-    },
-  })(refinementList)({
-    container: '#year-list',
+  refinementList({
+    container: '#year-list div:empty',
     attribute: 'year',
     limit: 100,
     sortBy: ['name:asc'],
-    cssClasses: {
-      list: 'columns-[5rem]',
-    },
   }),
-  panel({
-    templates: {
-      header: () => 'Srila Gurudeva Timing',
-    },
-  })(numericMenu)({
-    container: '#percentage-menu',
+  numericMenu({
+    container: '#percentage-menu div:empty',
     attribute: 'percentage',
     items: [
       { label: 'Any' },
       { label: 'More than 50%', start: 0.5 },
       { label: 'More than 90%', start: 0.9 },
     ],
   }),
-  panel({
-    templates: {
-      header: () => 'Duration',
-    },
-  })(numericMenu)({
-    container: '#duration-menu',
+  numericMenu({
+    container: '#duration-menu div:empty',
     attribute: 'duration',
     items: [
       { label: 'Any' },

frontend/src/js/memories.js

@@ -10,7 +10,6 @@ import {
   hits,
   numericMenu,
   pagination,
-  panel,
   refinementList,
   stats,
 } from 'instantsearch.js/es/widgets';
@@ -60,39 +59,23 @@ search.addWidgets([
         document.getElementById('results-footer').classList.remove('hidden');
     },
   },
-  panel({
-    templates: {
-      header: () => 'Program Name',
-    },
-  })(refinementList)({
-    container: '#program-name-list',
+  refinementList({
+    container: '#program-name-list div:empty',
     attribute: 'programName',
     sortBy: ['name:asc'],
   }),
-  panel({
-    templates: {
-      header: () => 'Speaker Country',
-    },
-  })(refinementList)({
-    container: '#speaker-country-list',
+  refinementList({
+    container: '#speaker-country-list div:empty',
     attribute: 'speakerCountry',
     sortBy: ['name:asc'],
   }),
-  panel({
-    templates: {
-      header: () => 'Languages',
-    },
-  })(refinementList)({
-    container: '#language-list',
+  refinementList({
+    container: '#language-list div:empty',
     attribute: 'language',
     sortBy: ['name:asc'],
   }),
-  panel({
-    templates: {
-      header: () => 'Duration',
-    },
-  })(numericMenu)({
-    container: '#duration-menu',
+  numericMenu({
+    container: '#duration-menu div:empty',
     attribute: 'duration',
     items: [
       { label: 'Any' },
@@ -101,21 +84,12 @@ search.addWidgets([
       { label: '45+ minutes', start: 2700 },
     ],
   }),
-  panel({
-    templates: {
-      header: (options, { html }) => html`
-        <span>Initiating Guru(s)</span>
-        <p class="text-xs font-normal lowercase">
-          [Sorted by decreasing count of matching records]
-        </p>
-      `,
-    },
-  })(refinementList)({
-    container: '#gurus-list',
+  refinementList({
+    container: '#gurus-list div:empty',
     attribute: 'gurus.fullName',
     showMore: true,
     showMoreLimit: 20,
-    sortBy: ['gurus:desc'],
+    sortBy: ['count:desc'],
   }),
   hits({
     container: '#hits',