Merge pull request #728 from rubyforgood/feature/collapsible-filters

Make filters collapsible fixes #724
rubyforgood · Sep 23, 2020 · 1ffa1ac · 1ffa1ac
2 parents 4b35468 + 461586a
commit 1ffa1ac
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 21 deletions.
diff --git a/app/javascript/pages/Browse.vue b/app/javascript/pages/Browse.vue
@@ -7,13 +7,18 @@
       </p>
     </div>
 
-    <section class="section columns">
-      <section class="column is-one-quarter">
+    <section>
+      <section class="mt-3 mb-3">
+        <div class="card">
+          <div class="card-content">
+            <Filters :filterTypes="filterTypes" v-model="activeFilters" />
+          </div>
+        </div>
+      </section>
+      <section>
         <BrowserSelector :browser="browser" @clicked="browser = $event" />
-
-        <Filters :filterTypes="filterTypes" v-model="activeFilters" />
       </section>
-      <component :is="browser" :contributions="activeContributions" class="column" />
+      <component :is="browser" :contributions="activeContributions" class="row" />
     </section>
   </div>
 </template>

diff --git a/app/javascript/pages/browse/Filters.vue b/app/javascript/pages/browse/Filters.vue
@@ -1,23 +1,47 @@
 <template>
   <section>
-    <h5 class="subtitle is-5">Filters</h5>
+    <b-collapse :open="false" id="collapse-filters">
+      <span
+        class="subtitle is-4"
+        slot="trigger"
+        slot-scope="props"
+      >
+        <b-icon :icon="props.open ? 'caret-down' : 'caret-right'"></b-icon>
+        Filters
+      </span>
 
-    <b-collapse v-for="(type, index) of filterTypes" :key="index" :open="initialOpenStatus(index)">
-      <h4 slot="trigger" slot-scope="props">
-        {{ type.name }} <a>{{ props.open ? '-' : '+' }}</a>
-      </h4>
-      <ul>
-        <li v-for="filter of type.filters" :key="filter.id">
-          <b-checkbox
-            :native-value="filter.id"
-            :value="currentFilters"
-            @input="$emit('change', $event)"
+      <div class="columns mt-1">
+        <b-collapse
+          class="column"
+          v-for="(type, index) of filterTypes"
+          :key="index"
+          :open="initialOpenStatus(index)"
+        >
+          <span
+            class="subtitle is-5"
+            slot="trigger"
+            slot-scope="props"
           >
-            {{ filter.name }}
-            <MappedIconList :iconTypes="[{id: filter.name, name: filter.name}]" v-if="showIconsForFilter(filter.name)"  class="is-inline"/>
-          </b-checkbox>
-        </li>
-      </ul>
+            {{ type.name }} <a>{{ props.open ? '-' : '+' }}</a>
+          </span>
+          <ul class="mt-1">
+            <li v-for="filter of type.filters" :key="filter.id">
+              <b-checkbox
+                :native-value="filter.id"
+                :value="currentFilters"
+                @input="$emit('change', $event)"
+              >
+                {{ filter.name }}
+                <MappedIconList
+                  :iconTypes="[{id: filter.name, name: filter.name}]"
+                  v-if="showIconsForFilter(filter.name)"
+                  class="is-inline"
+                />
+              </b-checkbox>
+            </li>
+          </ul>
+        </b-collapse>
+      </div>
     </b-collapse>
   </section>
 </template>