Update providers in cities, added tooltips

e-motion-apps · Nov 16, 2023 · fd9070d · fd9070d
1 parent 7ab22c4
commit fd9070d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/resources/js/Shared/Components/City.vue b/resources/js/Shared/Components/City.vue
@@ -201,9 +201,9 @@ function toggleProvidersForm() {
         <div v-for="provider in filteredSelectedCityProviders.slice(0, 4)" :key="provider.name"
              :style="{ 'background-color': selectedCityProviders.includes(provider.name) ? provider.color : '' }"
              :class="selectedCityProviders.includes(provider.name) ? 'border-zinc-600 drop-shadow-lg' : 'hidden'"
-             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 "
+             class="m-1 flex h-5 w-fit items-center justify-center rounded border border-zinc-300 bg-zinc-300 p-1 hover:scale-[2] transition-all hover:z-50"
         >
-          <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" alt="">
+          <img class="w-5" :src="'/providers/' + provider.name.toLowerCase() + '.png'" :title="provider.name" alt="">
         </div>
 
         <div v-if="selectedCityProviders.length > 4"

diff --git a/resources/js/Shared/Components/ProviderIcons.vue b/resources/js/Shared/Components/ProviderIcons.vue
@@ -13,7 +13,7 @@ function getProviderColor(providerName) {
 </script>
 
 <template>
-  <div class="mb-2 mr-1 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
+  <div class="mb-2 mr-3 mt-4 flex w-fit flex-row-reverse flex-wrap items-center justify-end sm:mt-0 sm:justify-start">
     <div v-for="cityProvider in item.cityProviders" :key="cityProvider.provider_name">
       <div :style="{ 'background-color': getProviderColor(cityProvider.provider_name) }"
            class="m-1 flex h-7 w-fit shrink-0 items-center justify-center rounded-md border border-zinc-300 p-1 lg:h-8 hover:scale-150 transition-all"