feat: improve layout and logic

Rule-34 · Sep 11, 2020 · 4293de6 · 4293de6
1 parent cc46af6
commit 4293de6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/components/pages/posts/navigation/search/SearchBar.vue b/components/pages/posts/navigation/search/SearchBar.vue
@@ -51,6 +51,7 @@
     <transition name="page">
       <SearchTagCollections
         v-if="tagCollections.isActive"
+        class="absolute inset-0 z-30 bg-black bg-opacity-25"
         @toggleTagCollections="toggleTagCollections()"
       />
     </transition>
@@ -62,7 +63,7 @@ import { mapGetters, mapActions } from 'vuex'
 import { TagIcon, SearchIcon, FilterIcon, TrashIcon } from 'vue-feather-icons'
 import debounce from 'lodash/debounce'
 
-import SearchTagCollections from './SearchTagCollections'
+const SearchTagCollections = () => import('./SearchTagCollections')
 
 export default {
   name: 'SearchBar',

diff --git a/components/pages/posts/navigation/search/SearchTagCollections.vue b/components/pages/posts/navigation/search/SearchTagCollections.vue
@@ -1,36 +1,34 @@
 <template>
-    <div class="p-4 m-auto pointer-events-auto material-container">
-  <div class="absolute inset-0 z-30 flex pointer-events-none">
-      <h2
-        class="text-lg font-semibold tracking-wide text-center text-gradient-one"
+  <div class="flex" @click.self.stop="toggleTagCollections()">
+    <menu class="flex flex-col w-4/5 p-4 m-auto h-3/5 material-container">
+      <!-- Title -->
+      <header
+        class="mb-4 text-xl font-semibold tracking-wide text-center text-gradient-one"
       >
         Tag Collections
-      </h2>
+      </header>
 
       <!-- Tag Collections -->
-      <div class="mt-4">
+      <section class="flex-grow space-y-2 overflow-y-scroll text-default-text">
         <template v-if="getTagCollections.length">
-          <div
+          <article
             v-for="(tagCollection, index) in getTagCollections"
             :key="tagCollection.name"
-            class="flex items-center justify-between"
+            class="flex items-center justify-between px-2 py-1 material-container bg-background"
+            @click="addTagCollectionToAddedTags(index)"
           >
             <p class="truncate">{{ tagCollection.name }}</p>
 
-            <p
-              class="flex-shrink-0 tag text-default-text hover:text-default-text-muted"
-              @click="addTagCollectionToAddedTags(index)"
-            >
-              {{ `${tagCollection.tags.length} tags` }}
-            </p>
-          </div>
+            <div class="flex-shrink-0 color-util">
+              {{ tagCollection.tags.length }}
+
+              <TagIcon class="inline w-5 h-5 icon" />
+            </div>
+          </article>
         </template>
 
         <template v-else>
-          <div class="text-center">
-            <h3>No Tag Collections available</h3>
-            <nuxt-link to="/premium">Create one?</nuxt-link>
-          </div>
+          <article class="text-center">
             <Error
               :render-borders="false"
               error-data="No Tag Collections available"
@@ -39,21 +37,29 @@
                 <nuxt-link to="/premium">Create one?</nuxt-link>
               </template>
             </Error>
+          </article>
         </template>
-      </div>
-    </div>
+      </section>
+
+      <!-- CTA -->
+      <footer class="-mb-2 text-center">
+        <nuxt-link class="text-sm" to="/premium"> Create more </nuxt-link>
+      </footer>
+    </menu>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import { TagIcon } from 'vue-feather-icons'
 
 import Error from '~/components/utils/Error.vue'
 
 export default {
   name: 'SearchBar',
 
   components: {
+    TagIcon,
     Error,
   },
 
@@ -70,6 +76,10 @@ export default {
         value: this.getTagCollections[tagCollectionIndex].tags,
       })
 
+      this.toggleTagCollections()
+    },
+
+    toggleTagCollections() {
       this.$emit('toggleTagCollections')
     },
   },