Improve dragger for bg dark

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

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/components/atoms/SheetModal.vue b/src/components/atoms/SheetModal.vue
@@ -175,16 +175,7 @@ onBeforeUnmount(() => {
     ref="container" class="absolute h-full touch-pan-x sheet-transition will-change-auto min-h-fit" :style="style"
     @pointerdown="onStart" @pointermove="onMove" @pointerup="onEnd" @pointercancel="onCancel"
   >
-    <slot name="dragger">
-      <div class="relative">
-        <hr
-          class="absolute inset-x-0 z-10 w-32 h-1 mx-auto mt-2 ml-auto border-0 rounded-full bg-black/20" :class="{
-            'bg-white mt-3': isOpen,
-            'mix-blend-darken': !isOpen,
-          }"
-        >
-      </div>
-    </slot>
+    <slot name="dragger" />
     <slot />
   </article>
 </template>

diff --git a/src/components/elements/MobileList.vue b/src/components/elements/MobileList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type PropType, nextTick, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
-import type { Location } from 'types'
+import { type Location, Theme } from 'types'
 import { useLocations } from '@/stores/locations'
 import SheetModal from '@/components/atoms/SheetModal.vue'
 import Card from '@/components/elements/Card.vue'
@@ -114,6 +114,16 @@ watch(cards, (newCards, oldCards) => {
         :initial-gap-to-screen="INITIAL_GAP_TO_SCREEN" class="relative w-full bg-white rounded-t-lg" :progress="progress"
         @update:progress="progress = $event" @close-list="() => $emit('closeList')"
       >
+        <template #dragger>
+          <div class="relative">
+            <hr
+              class="absolute inset-x-0 z-10 w-32 h-1 mx-auto mt-2 ml-auto border-0 rounded-full" :class="[
+                { 'mt-3': progress === 1 },
+                [location.bgFullCard && location.theme === Theme.Dark ? 'bg-white/30 mix-blend-lighten' : 'bg-white mix-blend-darken'],
+              ]"
+            >
+          </div>
+        </template>
         <Card :location="location" :progress="progress" />
       </SheetModal>
     </li>