From 6feb0e7e4b5a7ee2dcb2235ee1ac18bbe318727a Mon Sep 17 00:00:00 2001
From: FrantisekMichalSebestyen <sebestyen.frantisek.michal@gmail.com>
Date: Wed, 16 Oct 2024 13:15:38 +0200
Subject: [PATCH] fix: missing red circles on homescreen

---
 resources/js/components/DistrictWrapper.vue | 53 ++++++++-------------
 resources/js/components/HomeMap.vue         | 40 +++++-----------
 2 files changed, 32 insertions(+), 61 deletions(-)

diff --git a/resources/js/components/DistrictWrapper.vue b/resources/js/components/DistrictWrapper.vue
index 92be04a..7fbfe5f 100644
--- a/resources/js/components/DistrictWrapper.vue
+++ b/resources/js/components/DistrictWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="pointer-events-none">
+    <div class="pointer-events-none group">
         <slot
             :handleHoverChange="handleHoverChange"
             :locationCount="locationCount"
@@ -13,7 +13,7 @@
         >
             <a
                 :href="filterURL"
-                v-if="!isHovered && locationCount"
+                v-if="locationCount"
                 :class="[
                     { 'w-[2.5rem] h-[2.5rem]': locationCount < 10 },
                     {
@@ -25,7 +25,7 @@
                             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 pointer-events-auto',
+                    'group-hover:opacity-0 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">{{
@@ -48,33 +48,25 @@
                 ></div>
             </a>
         </transition>
-        <transition
-            enter-from-class="opacity-0 translate-y-6"
-            leave-to-class="opacity-0 translate-y-6"
-            enter-active-class="transition-all ease-out duration-300"
-            leave-active-class="transition-all ease-out duration-300"
+        <div
+            class="opacity-0 lg:translate-y-0 lg:group-hover:translate-y-6 duration-200 translate-y-6 lg:group-hover:opacity-100 block rounded-lg absolute drop-shadow-md bg-white py-4 px-6 z-20 whitespace-nowrap left-1/2 top-1/2"
         >
-            <div
-                v-if="isHovered"
-                class="hidden lg:block rounded-lg absolute drop-shadow-md bg-white py-4 px-6 z-20 whitespace-nowrap left-1/2 top-1/2"
-            >
-                <h4 class="text-2xl font-medium">{{ name }}</h4>
-                <ul v-if="locations" class="text-xl pb-3">
-                    <li v-for="location in locations">
-                        {{ location.borough }}{{ ` (${location.count})` }}
-                    </li>
-                </ul>
-                <ul v-if="unProcessedBoroughs.length" class="text-xl">
-                    Pripravujeme:
-                    <li
-                        class="text-neutral-500"
-                        v-for="unProcessedBorough in unProcessedBoroughs"
-                    >
-                        {{ unProcessedBorough }}
-                    </li>
-                </ul>
-            </div>
-        </transition>
+            <h4 class="text-2xl font-medium">{{ name }}</h4>
+            <ul v-if="locations" class="text-xl pb-3">
+                <li v-for="location in locations">
+                    {{ location.borough }}{{ ` (${location.count})` }}
+                </li>
+            </ul>
+            <ul v-if="unProcessedBoroughs.length" class="text-xl">
+                Pripravujeme:
+                <li
+                    class="text-neutral-500"
+                    v-for="unProcessedBorough in unProcessedBoroughs"
+                >
+                    {{ unProcessedBorough }}
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
 
@@ -125,7 +117,4 @@ const unProcessedBoroughs = computed(() =>
                 .includes(district)
     )
 );
-
-const isHovered = ref(false);
-const handleHoverChange = (value) => (isHovered.value = value);
 </script>
diff --git a/resources/js/components/HomeMap.vue b/resources/js/components/HomeMap.vue
index c85473e..9a35215 100644
--- a/resources/js/components/HomeMap.vue
+++ b/resources/js/components/HomeMap.vue
@@ -57,7 +57,7 @@
         </div>
         <DistrictWrapper
             class="absolute left-[37.55%] top-[37.22%] bottom-[49.64%] right-[46.23%]"
-            v-slot="{ locationCount, handleHoverChange, filterURL }"
+            v-slot="{ locationCount, filterURL }"
             name="Bratislava I"
             :locations="locations['Bratislava I']"
         >
@@ -70,12 +70,10 @@
             >
                 <a :href="locationCount ? filterURL : null">
                     <path
-                        @mouseenter.self="handleHoverChange(true)"
-                        @mouseleave.self="handleHoverChange(false)"
                         :class="`${
                             locationCount
-                                ? 'stroke-black hover:stroke-red-500'
-                                : 'stroke-neutral-500 hover:stroke-black'
+                                ? 'stroke-black group-hover:stroke-red-500'
+                                : 'stroke-neutral-500 group-hover:stroke-black'
                         } transition-color duration-300 pointer-events-auto`"
                         d="M93.7639 48.8768L91.5677 48.3529L90.4173 47.8291L85.9203 45.7339L84.6653 45.6291L83.6195 44.8958L81.9462 45.4196L80.9004 44.6862L79.8546 43.9529L79.0179 43.01L78.0767 41.8576L77.1354 40.7053L75.4621 39.9719L73.998 40.81L73.3705 39.6576L71.488 40.4957L70.2331 41.0195L67.514 41.6481L66.0498 41.7529L64.5856 41.8576L63.2261 41.3338L62.2849 40.0767L61.1345 39.4481L59.5657 38.8195L58.2062 38.0862L57.2649 37.1433L56.3237 35.9909L54.8596 34.7337L52.8725 33.3718L51.4083 32.7432L49.4213 31.9051L48.1663 31.6956L46.8068 31.3813L45.3426 31.1718L43.9831 30.9623L42.5189 30.648L41.3685 30.1242L40.009 29.9146L38.6494 29.8099L37.0807 29.6004L35.8257 29.286L34.5707 28.5527L32.4791 28.2384L30.492 27.9241L28.8187 27.6099L27.4592 27.2956L25.4721 26.4575L24.008 25.7241L21.8117 24.2574L20.5568 23.4193L19.6155 22.5812L18.6743 21.7431L17.5239 20.3812L16.7918 19.3335L15.8506 17.8669L13.236 13.1525L12.2948 11.5811L11.5628 10.2192L10.9353 8.962L9.99403 7.49533L8.63445 5.81911L7.79781 4.87625L6.43823 3.72385L4.24204 1.94289L3.09163 1L3.50995 2.78099L3.82369 4.14289V6.55246L2.35955 8.85723L1 9.48582L1.41832 10.743L2.88246 12.0001L3.92827 12.8383L5.497 14.0954L6.43823 14.9335L7.69322 15.9811L8.52986 17.0288L9.26195 18.0764L10.0986 19.124L10.5169 20.3812L10.0986 21.8479L9.26195 23.105L8.52986 24.2574L8.00695 25.6193L8.21613 27.4003V28.7622V31.1718V32.5337L8.42531 33.8956V35.2576V36.6195L8.32072 38.0862V40.7053V42.591L8.42531 45.3148V47.4101L8.73904 49.8196L8.94821 51.1816L9.26195 53.5911L9.47112 55.1625L9.57568 56.6292L9.26195 57.9912L8.94821 59.5626L8.73904 60.8198L8.63445 62.6007L8.32072 67.4198V68.7818L8.21613 70.458L8.11154 71.9246L8.32072 73.3913L7.48404 74.3342L7.17031 75.6961L5.60159 78.6295L4.76495 79.7819L3.82369 84.9153L5.81076 85.8581L7.2749 86.2772L8.73904 86.6963L10.9353 87.3248L14.3864 87.7439L15.746 87.8487L17.1056 88.1629L19.6155 88.8963L22.0209 89.5248L23.5896 90.0487L25.5767 90.5725L26.8317 90.8868L27.9821 91.2011L31.0149 92.1439L32.8974 92.6677L35.4074 93.4011L37.6036 94.0297L39.5906 94.5535L41.1594 94.8678L42.5189 95.0773L44.4014 95.2868L46.2839 95.4964L48.7938 95.6011L51.1992 95.7059H53.0817H54.4412H55.8008H57.2649L60.0886 95.6011L64.1673 95.4964H66.1544L69.3964 95.3916H72.6384L78.9134 95.6011H79.9592L80.1683 94.0297V91.7249L81.2141 90.5725L82.6783 90.0487L83.9333 89.6296L85.1883 88.7915H86.5478L87.8028 88.8963L89.1623 89.001L90.4173 89.1058L92.0906 89.3153L94.2868 89.5248L95.5418 89.6296L97.006 89.8392L98.261 89.9439L99.6205 90.0487L100.98 89.3153L101.503 88.0582L102.13 86.3819L102.549 85.1248L103.176 83.4486L103.595 82.2962L104.013 81.1438L104.85 78.9438L105.373 77.6866L106 76.2199L104.85 75.5914L103.281 75.2771L101.608 74.9628L100.353 74.7533L98.993 74.5437L97.4243 74.2295L96.0647 74.0199L94.8097 73.9151L93.241 73.7056L93.0319 72.4485L93.5548 71.2961L93.8685 69.7246L94.3914 67.7341L94.7052 66.3722L95.1235 65.2198L95.3327 63.9626L95.6464 62.7055L95.8556 61.3436L96.1693 59.7721L96.3785 58.4102L95.1235 56.6292L94.6006 54.8483L93.3456 49.8196L93.7639 48.8768Z"
                         stroke-width="2"
@@ -89,7 +87,7 @@
             name="Bratislava II"
             :locations="locations['Bratislava II']"
             class="absolute left-[55.64%] top-[33.45%] bottom-[17.29%] right-[-0.02%]"
-            v-slot="{ locationCount, handleHoverChange, filterURL }"
+            v-slot="{ locationCount, filterURL }"
         >
             <svg
                 viewBox="0 0 289 357"
@@ -99,11 +97,7 @@
                 } w-full h-full fill-none pointer-events-none`"
             >
                 <a :href="locationCount ? filterURL : null">
-                    <g
-                        class="group pointer-events-auto"
-                        @mouseenter.self="handleHoverChange(true)"
-                        @mouseleave.self="handleHoverChange(false)"
-                    >
+                    <g class="pointer-events-auto">
                         <path
                             :class="` ${
                                 locationCount
@@ -162,7 +156,7 @@
         <DistrictWrapper
             class="absolute left-[39.57%] top-[10.83%] bottom-[59.59%] right-[18.7%]"
             :locations="locations['Bratislava III']"
-            v-slot="{ locationCount, handleHoverChange, filterURL }"
+            v-slot="{ locationCount, filterURL }"
             name="Bratislava III"
         >
             <svg
@@ -173,11 +167,7 @@
                 } w-full h-full fill-none pointer-events-none`"
             >
                 <a :href="locationCount ? filterURL : null">
-                    <g
-                        class="group pointer-events-auto"
-                        @mouseenter.self="handleHoverChange(true)"
-                        @mouseleave.self="handleHoverChange(false)"
-                    >
+                    <g class="pointer-events-auto">
                         <path
                             d="M202.588 133.6L203.451 133.504L204.794 133.408L206.426 133.312L207.577 133.216L209.016 133.121L210.36 133.025L211.607 132.929L212.95 132.833L214.198 132.737L215.445 132.641L216.98 132.545L218.227 132.449L219.667 132.354L220.818 132.258L224.368 131.874L227.151 131.586L230.509 131.107L232.62 130.819L235.594 130.436L238.953 130.052L242.407 129.573L244.422 129.381L245.957 129.19L248.739 128.902L252.002 128.614L255.168 128.422L259.582 128.135L259.006 125.834L259.102 124.204L260.253 122.382L261.309 121.232L262.556 120.656L266.202 120.848L266.682 117.301L267.066 114.616L268.601 113.465L271 111.931L269.752 109.918L268.889 108.288L268.121 106.562L266.682 103.398L266.106 102.344L265.243 100.809L263.995 98.4125L261.789 96.495L260.733 95.7279L259.774 94.865L256.128 92.0845L254.209 88.7288L253.153 87.003L252.577 86.0442L252.098 84.8937L249.891 81.5379L249.123 80.2915L246.916 77.0316L245.765 75.4017L244.997 74.4429L244.038 73.2924L241.927 70.9913L240.776 69.7449L240.008 68.882L238.281 66.8685L236.074 64.3757L231.085 59.6776L230.029 58.9106L228.974 58.1436L227.726 57.1848L225.807 55.8425L224.368 54.7878L223.409 54.1167L221.874 53.062L220.722 52.1032L219.859 51.3362L218.419 50.0898L216.308 48.1722L215.349 47.4052L214.102 46.1588L213.046 45.2L211.799 43.9536L210.551 42.803L209.784 41.5566L209.112 40.5978L208.057 39.5431L207.001 38.2967L206.042 37.5297L204.89 36.7627L203.931 35.8998L202.684 34.7492L201.724 34.0781L199.997 33.311L198.75 32.544L197.886 31.5852L196.351 29.9553L195.2 29.1883L194.144 28.0377L193.185 27.2707L191.458 27.1748L190.21 26.5996L189.251 25.7366L188.003 24.5861L186.66 23.7232L185.605 22.4768L184.357 22.0933L182.822 21.9974L181.479 21.7098L180.423 20.751L179.368 19.7922L178.025 19.6963L176.777 19.4087L175.626 18.9293L174.762 18.1622L173.419 17.9705L172.555 17.1076L171.692 16.3406L170.828 15.3818L169.677 14.9024L168.621 14.2312L167.95 13.1766L167.374 12.1219L166.607 11.1631L165.647 10.0126L165.167 8.95792L164.496 7.90325L164.112 6.65683L164.4 5.12278L164.496 3.87635L163.728 2.53406L163.536 1.19176L161.137 1L158.547 2.05467L157.108 3.30108L155.86 4.45163L154.517 5.60217L153.941 7.13622L153.366 8.47852L152.79 9.72495L151.542 11.3549L150.679 12.4095L149.623 13.3683L148.472 14.0395L147.417 14.5189L146.265 14.9983L146.937 16.0529L147.705 17.0117L148.28 18.0664L148.952 19.0252L150.103 19.9839L150.487 21.3262L151.159 22.285L152.022 23.1479L152.79 24.2985L154.133 24.9696L155.093 25.9284L155.956 27.0789L157.012 27.7501L158.067 28.613L159.218 29.2841L160.082 30.1471L160.754 31.2976L161.041 32.9275L161.905 34.2698L162.193 35.6121L162.385 36.7627L162.673 38.105L163.728 38.7761L164.975 39.639L165.935 40.4061L166.607 41.7483L167.278 42.8989L167.95 44.0494L168.334 45.7752L168.621 46.9258L169.293 48.0763L170.061 48.9392L170.924 50.0898L171.788 51.2403L172.651 52.0073L173.611 52.9661L175.05 53.5414L176.01 54.3084L177.737 55.5549L179.272 56.8013L180.231 57.7601L181.191 58.623L181.767 59.7735L182.63 60.8282L183.973 62.6499L185.317 63.2251L185.605 64.4715L185.892 65.718L184.741 66.0056L185.221 67.252L185.509 68.6902L185.892 70.1284L186.372 71.3748L186.852 72.5253L187.524 74.0594L188.387 75.6893L188.963 77.0316L189.443 78.1822L190.018 79.4286L190.69 80.4833L191.266 81.5379L191.841 82.5926L192.513 83.9349L193.089 86.0442L193.664 88.537L194.624 93.9062L194.912 95.0568L195.008 98.029L194.912 100.042L195.008 102.152V103.398L195.2 105.124L195.775 107.329L196.543 109.822L197.31 112.315L197.694 113.945L198.078 115.191L198.654 117.109L199.038 118.259L199.421 126.601L202.108 126.409L202.204 127.655L202.3 128.902L202.396 130.052L202.492 131.203L202.588 132.449V133.6Z"
                             :class="` ${
@@ -228,7 +218,7 @@
         <DistrictWrapper
             class="absolute left-[0%] top-[0%] bottom-[55.35%] right-[49.46%]"
             :locations="locations['Bratislava IV']"
-            v-slot="{ locationCount, handleHoverChange, filterURL }"
+            v-slot="{ locationCount, filterURL }"
             name="Bratislava IV"
         >
             <svg
@@ -239,11 +229,7 @@
                 } w-full h-full fill-none pointer-events-none`"
             >
                 <a :href="locationCount ? filterURL : null">
-                    <g
-                        class="group pointer-events-auto"
-                        @mouseenter.self="handleHoverChange(true)"
-                        @mouseleave.self="handleHoverChange(false)"
-                    >
+                    <g class="pointer-events-auto">
                         <path
                             fill="transparent"
                             :class="`${
@@ -311,7 +297,7 @@
             :locations="locations['Bratislava V']"
             class="absolute left-[31.07%] top-[54.53%] bottom-[-0.12%] right-[22.87%]"
             name="Bratislava V"
-            v-slot="{ locationCount, handleHoverChange, filterURL }"
+            v-slot="{ locationCount, filterURL }"
         >
             <svg
                 viewBox="0 0 301 332"
@@ -321,11 +307,7 @@
                 xmlns="http://www.w3.org/2000/svg"
             >
                 <a :href="locationCount ? filterURL : null">
-                    <g
-                        class="group pointer-events-auto"
-                        @mouseenter.self="handleHoverChange(true)"
-                        @mouseleave.self="handleHoverChange(false)"
-                    >
+                    <g class="pointer-events-auto">
                         <path
                             :class="`${
                                 locationCount