chore: make circles on map clickable

SlovakNationalGallery · Sep 24, 2024 · d0f28cc · d0f28cc
1 parent 4f3b201
commit d0f28cc
Showing 1 changed file with 25 additions and 11 deletions.
diff --git a/resources/js/components/DistrictWrapper.vue b/resources/js/components/DistrictWrapper.vue
@@ -11,28 +11,42 @@
             enter-active-class="transition-opacity ease-out duration-300"
             leave-active-class="transition-opacity ease-out duration-300"
         >
-            <div
+            <a
+                :href="filterURL"
                 v-if="!isHovered && locationCount"
                 :class="[
                     { 'w-[2.5rem] h-[2.5rem]': locationCount < 10 },
-                    { 'w-[3.25rem] h-[3.25rem]': locationCount > 9 && locationCount < 50 },
-                    { 'w-[4rem] h-[4rem]': locationCount > 49 && locationCount < 100 },
+                    {
+                        'w-[3.25rem] h-[3.25rem]':
+                            locationCount > 9 && locationCount < 50,
+                    },
+                    {
+                        'w-[4rem] h-[4rem]':
+                            locationCount > 49 && locationCount < 100,
+                    },
                     { 'w-[4.5rem] h-[4.5rem]': locationCount > 99 },
-                    'absolute text-white bg-red-500 left-1/4 top-1/2 rounded-full font-semibold flex justify-center items-center',
+                    'absolute text-white bg-red-500 left-1/4 top-1/2 rounded-full font-semibold flex justify-center items-center pointer-events-auto',
                 ]"
             >
                 <span class="absolute z-10 bg-red-500">{{
                     locationCount
                 }}</span>
                 <div
-                :class="[
-                    { 'w-[1.75rem] h-[1.75rem]': locationCount < 10 },
-                    { 'w-[2.125rem] h-[2.125rem]': locationCount > 9 && locationCount < 50 },
-                    { 'w-[2.5rem] h-[2.5rem]': locationCount > 49 && locationCount < 100 },
-                    { 'w-[2.75rem] h-[2.75rem]': locationCount > 99 },
-                    'animate-[ping_2s_ease-out_infinite] bg-red-500 rounded-full']"
+                    :class="[
+                        { 'w-[1.75rem] h-[1.75rem]': locationCount < 10 },
+                        {
+                            'w-[2.125rem] h-[2.125rem]':
+                                locationCount > 9 && locationCount < 50,
+                        },
+                        {
+                            'w-[2.5rem] h-[2.5rem]':
+                                locationCount > 49 && locationCount < 100,
+                        },
+                        { 'w-[2.75rem] h-[2.75rem]': locationCount > 99 },
+                        'animate-[ping_2s_ease-out_infinite] bg-red-500 rounded-full',
+                    ]"
                 ></div>
-            </div>
+            </a>
         </transition>
         <transition
             enter-from-class="opacity-0 translate-y-6"