Improve provider banner animation

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

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/src/components/DesktopView.vue b/src/components/DesktopView.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
-import TheMapInstance from '@/components/elements/TheMapInstance.vue'
+import Button from '@/components/atoms/Button.vue'
 import Controls from '@/components/elements/Controls.vue'
 import DesktopList from '@/components/elements/DesktopList.vue'
 import FilterModal from '@/components/elements/FilterModal.vue'
 import InteractionBar from '@/components/elements/InteractionBar.vue'
-import ShowListButton from '@/components/elements/ShowListButton.vue'
-import { useCluster } from '@/stores/cluster'
+import TheMapInstance from '@/components/elements/TheMapInstance.vue'
+import IconChevronDown from '@/components/icons/icon-chevron-down.vue'
 import { useApp } from '@/stores/app'
+import { useCluster } from '@/stores/cluster'
 
 const { firstLocationsLoaded } = storeToRefs(useApp())
 const { singlesInView, clustersInView } = storeToRefs(useCluster())
@@ -30,7 +31,12 @@ const openSuggestions = ref(false)
       <InteractionBar @open="openSuggestions = $event" />
       <DesktopList :locations="singlesInView" :clusters="clustersInView" :list-is-shown="listIsShown" />
     </div>
-    <ShowListButton :first-locations-loaded="firstLocationsLoaded" :list-is-shown="listIsShown" class="mt-6" @click="listIsShown = !listIsShown" />
+    <Button bg-color="white" :loading="!firstLocationsLoaded" class="mt-6" @click="listIsShown = !listIsShown">
+      <template v-if="firstLocationsLoaded" #icon>
+        <IconChevronDown :class="{ 'rotate-180': listIsShown }" class="transition-transform delay-500" />
+      </template>
+      <template #label>{{ $t(!firstLocationsLoaded ? 'Loading' : listIsShown ? 'Hide list' : 'Show list') }}</template>
+    </Button>
   </aside>
   <FilterModal class="absolute top-6 right-6" />
   <Controls class="absolute bottom-6 right-6" />

diff --git a/src/components/MobileView.vue b/src/components/MobileView.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
-import TheMapInstance from '@/components/elements/TheMapInstance.vue'
-import MobileList from '@/components/elements/MobileList.vue'
+import Button from '@/components/atoms/Button.vue'
+import Controls from '@/components/elements/Controls.vue'
 import FilterModal from '@/components/elements/FilterModal.vue'
 import InteractionBar from '@/components/elements/InteractionBar.vue'
-import Controls from '@/components/elements/Controls.vue'
-import ShowListButton from '@/components/elements/ShowListButton.vue'
-import { useCluster } from '@/stores/cluster'
+import MobileList from '@/components/elements/MobileList.vue'
+import TheMapInstance from '@/components/elements/TheMapInstance.vue'
 import { useApp } from '@/stores/app'
+import { useCluster } from '@/stores/cluster'
 import { useLocations } from '@/stores/locations'
 
 const { firstLocationsLoaded } = storeToRefs(useApp())
@@ -48,10 +48,9 @@ watch(selectedUuid, (uuid) => {
     >
       <template v-if="singlesInView.length > 0">
         <MobileList v-if="isListShown" :locations="singlesInView" :list-is-shown="isListShown" class="absolute bottom-0 w-full" @close-list="isListShown = false; selectedUuid = undefined;" />
-        <ShowListButton
-          v-else :first-locations-loaded="firstLocationsLoaded" :list-is-shown="isListShown" chevron-direction="up"
-          class="absolute -translate-x-1/2 bottom-6 left-1/2" @click="isListShown = true"
-        />
+        <Button v-else :first-locations-loaded="firstLocationsLoaded" bg-color="white" :loading="!firstLocationsLoaded" class="absolute -translate-x-1/2 bottom-6 left-1/2" @click="isListShown = true">
+          <template #label>{{ $t(!firstLocationsLoaded ? 'Loading' : 'Show list') }}</template>
+        </Button>
       </template>
     </transition>
   </div>

diff --git a/src/components/elements/Card.vue b/src/components/elements/Card.vue
@@ -79,9 +79,15 @@ function arrayEquals(arrA: string[], arrB: string[]): boolean {
 
     <ProviderBanner
       v-if="progress > 0 && location.hasBottomBanner" :location="location"
-      class="absolute w-full -mt-9"
+      class="absolute max-desktop:w-screen -mt-9"
       :class="{ 'rounded-b-lg': progress < 1 || !isMobile }"
-      :style="`backgroundColor: ${!location.isAtm ? location.bg : 'transparent'}; opacity: ${progress / 0.8}; bottom: -${(1 - progress) * 54}px;`"
+      :style="{
+        backgroundColor: !location.isAtm ? location.bg : 'transparent',
+        opacity: progress / 0.8,
+        bottom: `-${(1 - progress) * 70}px`, // the height is 54, we add 16px to delay the animation
+        left: `calc(${1 - progress} * var(--initial-gap-to-screen) * -1)`, // make the provider grow in a vertical line
+        padding: `0 calc(${(1 - progress)} * var(--initial-gap-to-screen))`, // delay the animation
+      }"
     />
   </div>
 </template>

diff --git a/src/components/elements/MobileList.vue b/src/components/elements/MobileList.vue
@@ -102,7 +102,7 @@ watch(cards, (newCards, oldCards) => {
   <ul
     ref="scrollRoot"
     class="flex items-end w-full overflow-x-auto hide-scrollbar snap-x snap-mandatory gap-x-3 scroll-mx-[var(--spacing)] pointer-events-none bg-gradient-to-t from-space/20 to-space/0 bg-bottom bg-no-repeat"
-    :style="`--spacing: ${(1 - Math.max(progress, 0)) * INITIAL_GAP_TO_SCREEN}px; background-size: 100% 184px;--tw-gradient-from: rgb(31 35 72 / ${0.2 * Math.min((1 + progress * 2), 1)}) var(--tw-gradient-from-position);`"
+    :style="`--spacing: ${(1 - Math.max(progress, 0)) * INITIAL_GAP_TO_SCREEN}px; background-size: 100% 184px;--tw-gradient-from: rgb(31 35 72 / ${0.2 * Math.min((1 + progress * 2), 1)}) var(--tw-gradient-from-position); --initial-gap-to-screen: ${INITIAL_GAP_TO_SCREEN}px;`"
   >
     <li
       v-for="location in locations" :key="location.uuid" ref="cards"