fix: z-index on elements with popper

feat: add sort to popper style: paddings on new sort
SlovakNationalGallery · May 11, 2023 · 94b6bb9 · 94b6bb9
1 parent 456b208
commit 94b6bb9
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/resources/js/components/catalog-new/NewSort.vue b/resources/js/components/catalog-new/NewSort.vue
@@ -2,11 +2,13 @@
     <div>
         <span class="tw-font-semibold">
             <slot name="artwork-counter"></slot>
-            <div class="tw-inline-block">
-                <a
+            <div class="tw-inline-block tw-z-10">
+                <button
+                    ref="button"
                     class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4"
                     @click="toggleIsOpen()"
-                    >{{ selectedOptionValue
+                >
+                    {{ selectedOptionValue
                     }}<svg
                         class="tw-inline tw-w-4 tw-h-4 tw-fill-current"
                         xmlns="http://www.w3.org/2000/svg"
@@ -16,21 +18,24 @@
                             d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"
                         ></path>
                     </svg>
-                </a>
-                <div
-                    v-if="isOpen"
-                    class="tw-absolute tw-p-4 tw-bg-white tw-z-10 tw-border-2 tw-border-gray-800 tw-w-80"
-                >
-                    <ul>
-                        <li
-                            class="tw-pl-2 hover:tw-bg-gray-200"
-                            v-for="option in selectableOptions"
-                        >
-                            <a class="tw-w-full tw-block" @click="onSortChange(option.value)">{{
-                                option.text
-                            }}</a>
-                        </li>
-                    </ul>
+                </button>
+                <div ref="body" class="tw-z-10">
+                    <div
+                        v-if="isOpen"
+                        v-on-clickaway="toggleIsOpen"
+                        class="tw-mt-2 tw-p-4 tw-bg-white tw-border-2 tw-border-gray-800 tw-w-80"
+                    >
+                        <ul>
+                            <li
+                                class="tw-pl-2 hover:tw-bg-gray-200"
+                                v-for="option in selectableOptions"
+                            >
+                                <a class="tw-w-full tw-block" @click="onSortChange(option.value)">{{
+                                    option.text
+                                }}</a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
             </div>
             <slot name="random-select"></slot>
@@ -39,7 +44,13 @@
 </template>
 
 <script>
+import { directive as onClickaway } from 'vue-clickaway'
+import { createPopper } from '@popperjs/core'
+
 export default {
+    directives: {
+        onClickaway: onClickaway,
+    },
     props: {
         options: Array,
         sort: String,
@@ -48,8 +59,16 @@ export default {
     data() {
         return {
             isOpen: false,
+            popper: null,
         }
     },
+    mounted() {
+        const button = this.$refs.button
+        const body = this.$refs.body
+        this.popper = createPopper(button, body, {
+            placement: 'bottom-start',
+        })
+    },
     computed: {
         selectedOptionValue() {
             const selectedOption = this.options.find((sortItem) => this.sort === sortItem.value)

diff --git a/resources/js/components/catalog-new/PopoverFilter.vue b/resources/js/components/catalog-new/PopoverFilter.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="tw-pb-2">
+    <div class="tw-pb-2 tw-z-10">
         <button
             ref="button"
             class="tw-border tw-border-gray-300 tw-bg-white tw-py-3.5 tw-px-4 tw-text-lg tw-font-bold hover:tw-border-gray-800"
@@ -35,7 +35,7 @@
                 </div>
             </div>
         </button>
-        <div ref="body" class="tw-z-50">
+        <div ref="body">
             <div @click.stop v-if="isOpen" v-on-clickaway="closeOpenedPopover" id="popover">
                 <slot name="body"></slot>
             </div>

diff --git a/resources/views/frontend/catalog-new/index-new.blade.php b/resources/views/frontend/catalog-new/index-new.blade.php
@@ -10,7 +10,7 @@
                         {{-- Desktop filter --}}
                         <filter-new-popover.group-controller>
                             <div
-                                class="tw-hidden tw-gap-x-3 tw-overflow-x-auto md:tw-flex md:tw-flex-wrap md:tw-overflow-visible">
+                                class="tw-z-50 tw-hidden tw-gap-x-3 tw-overflow-x-auto md:tw-flex md:tw-flex-wrap md:tw-overflow-visible">
                                 <filter-new-popover name="author">
                                     <template #popover-label>
                                         <filter-new-custom-select-popover-label name="author"
@@ -724,7 +724,7 @@ class="tw-flex tw-min-w-max tw-items-center tw-border tw-border-gray-300 tw-bg-w
                         </div>
                     </div>
                     <div class="tw-min-h-screen">
-                        <div class="tw-px-4 md:tw-p-16">
+                        <div class="tw-px-4 md:tw-px-16 md:tw-py-10">
                             <div v-if="artworks.length === 0"
                                 class="tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-py-40 tw-text-lg">
                                 <div class="tw-w-72">
@@ -738,7 +738,7 @@ class="tw-font-bold tw-underline tw-underline-offset-8">skús náhodný
                                     výber</a>
                             </div>
                             <div v-else>
-                                <div class="tw-px-4 md:tw-p-16">
+                                <div class="tw-px-2 tw-py-6 md:tw-pb-8 md:tw-pt-0">
                                     <filter-new-sort :sort="query . sort" :handle-sort-change="handleSortChange"
                                         :options="[{ value: null, text: 'poslednej zmeny'}, { value: 'created_at', text: 'dátumu pridania',},  { value: 'title', text: 'názvu', }, { value: 'author', text: 'autora', }, { value: 'date_earliest', text: 'datovanie - od najnovšieho', }, { value: 'date_latest', text: 'datovanie - od najstaršieho' }, { value: 'view_count', text: 'počtu videní' }, { value: 'random', text: 'náhodného poradia' }]">
                                         <template #artwork-counter>