feat: add dismiss button to bottom sheet

Rule-34 · Mar 13, 2024 · ee8d73a · ee8d73a
1 parent 04eb5a6
commit ee8d73a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/components/layout/navigation/BottomSheetWrapper.vue b/components/layout/navigation/BottomSheetWrapper.vue
@@ -37,10 +37,21 @@
             leave-from="translate-y-0"
             leave-to="translate-y-full"
           >
-            <HeadlessDialogPanel class="relative mx-auto flex max-h-[80vh] w-full max-w-2xl flex-1 self-end px-4">
+            <HeadlessDialogPanel class="relative mx-auto flex max-h-[90vh] w-full max-w-2xl flex-1 self-end">
               <!-- Sidebar -->
-              <div class="flex grow flex-col overflow-y-auto rounded-t-md bg-base-1000 px-4 py-4 ring-1 ring-base-0/10">
-                <slot />
+              <div class="flex grow flex-col gap-2 rounded-t-xl bg-base-1000 ring-1 ring-base-0/20">
+                <div class="grow overflow-y-auto">
+                  <slot />
+                </div>
+
+                <!-- Dismiss -->
+                <button
+                  type="button"
+                  @click="isOpen = false"
+                  class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util mx-auto inline-flex w-full items-center justify-center border-t border-base-0/20 px-3 py-2 text-base"
+                >
+                  Dismiss
+                </button>
               </div>
             </HeadlessDialogPanel>
           </HeadlessTransitionChild>

diff --git a/components/pages/posts/navigation/search/SearchMenu.vue b/components/pages/posts/navigation/search/SearchMenu.vue
@@ -307,10 +307,12 @@
         </button>
 
         <BottomSheetWrapper v-model="isTagCollectionsActive">
-          <LazyTagCollections
-            :selectedTags="selectedTags"
-            @updateSelectedTags="onTagCollectionsSetSelectedTags"
-          />
+          <div class="px-4 py-4">
+            <TagCollections
+              :selectedTags="selectedTags"
+              @updateSelectedTags="onTagCollectionsSetSelectedTags"
+            />
+          </div>
         </BottomSheetWrapper>
       </div>
 

diff --git a/components/pages/posts/post/Post.vue b/components/pages/posts/post/Post.vue
@@ -127,7 +127,7 @@
       <BottomSheetWrapper v-model="areTagsOpen">
         <!--  -->
 
-        <div class="space-y-2">
+        <div class="space-y-2 px-4 py-4">
           <!--  -->
 
           <template v-for="tagType of tagTypesWithTags">