Renamed to LocationSocialBtn and added small animation

nimiq · Sep 7, 2023 · f1731dd · f1731dd
1 parent 087bf6f
commit f1731dd
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/src/components/elements/BasicInfo.vue b/src/components/elements/BasicInfo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type PropType } from 'vue'
 import { type Location } from 'types'
-import GmapsButton from './GmapsButton.vue'
+import LocationSocialButton from './LocationSocialButton.vue'
 import StarFilledIcon from '@/components/icons/icon-star-filled.vue'
 import StarIcon from '@/components/icons/icon-star.vue'
 
@@ -37,7 +37,7 @@ defineProps({
       <template v-if="location.isAtm">{{ $t('ATM') }} (</template>{{ location.name }}<template v-if="location.isAtm">)</template>
     </h3>
 
-    <GmapsButton v-if="!location.photo && location.url && progress > 0.5" :location="location" class="mr-5 self-start -mt-2 -mb-2" />
+    <LocationSocialButton v-if="!location.photo && location.url && progress > 0.5" :location="location" class="self-start mr-5 -mt-2 -mb-2" />
 
     <template v-if="!location.isAtm">
       <span class="row-start-2 text-xs font-semibold first-letter:capitalize text-space/60 whitespace-nowrap">

diff --git a/src/components/elements/Card.vue b/src/components/elements/Card.vue
@@ -3,7 +3,7 @@ import { type PropType } from 'vue'
 import { useBreakpoints } from '@vueuse/core'
 import { screens } from 'tailwindcss-nimiq-theme'
 import { type Location } from 'types'
-import GmapsButton from './GmapsButton.vue'
+import LocationSocialButton from './LocationSocialButton.vue'
 import CryptoList from '@/components/atoms/CryptoList.vue'
 import BasicInfo from '@/components/elements/BasicInfo.vue'
 import CardBg from '@/components/elements/CardBg.vue'
@@ -73,7 +73,9 @@ function arrayEquals(arrA: string[], arrB: string[]): boolean {
       </transition>
     </div>
 
-    <GmapsButton v-if="location.photo && location.url && progress > 0.5" :location="location" class="absolute z-20 top-4 right-4" />
+    <transition name="scale">
+      <LocationSocialButton v-if="location.photo && location.url && progress > 0.5" :location="location" class="absolute z-20 top-4 right-4" />
+    </transition>
 
     <ProviderBanner
       v-if="progress > 0 && location.hasBottomBanner" :location="location"
@@ -83,3 +85,26 @@ function arrayEquals(arrA: string[], arrB: string[]): boolean {
     />
   </div>
 </template>
+
+<style scoped>
+.scale-enter-active {
+  animation: icon-in 200ms ease-out;
+}
+
+.scale-leave-active {
+  animation: icon-in 150ms ease-in reverse;
+  opacity: 0;
+}
+
+@keyframes icon-in {
+  0% {
+    transform: scale(0.75);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/elements/GmapsButton.vue → ...ponents/elements/LocationSocialButton.vue b/src/components/elements/GmapsButton.vue → ...ponents/elements/LocationSocialButton.vue
diff --git a/src/components/elements/MobileList.vue b/src/components/elements/MobileList.vue
@@ -111,7 +111,7 @@ watch(cards, (newCards, oldCards) => {
     >
       <SheetModal
         :max-height="location.photo ? 363 : 179" :initial-border-radius="8"
-        :initial-gap-to-screen="INITIAL_GAP_TO_SCREEN" class="relative w-full bg-white rounded-t-lg" :progress="progress"
+        :initial-gap-to-screen="INITIAL_GAP_TO_SCREEN" class="relative w-full rounded-t-lg" :progress="progress"
         @update:progress="progress = $event" @close-list="() => $emit('closeList')"
       >
         <template #dragger>