feat(orders): add slide-up animation for order detail bottom sheet
All checks were successful
Build Docker Image / build (push) Successful in 4m29s

This commit is contained in:
Ruslan Bakiev
2026-01-29 19:43:56 +07:00
parent 71e69a7abc
commit de3ec4c39d

View File

@@ -10,8 +10,9 @@
:hide-view-toggle="true"
/>
<!-- Bottom Sheet -->
<div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
<!-- Bottom Sheet with slide-up animation -->
<Transition name="slide-up" appear>
<div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
<!-- Glass sheet -->
<div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
<!-- Drag handle -->
@@ -115,9 +116,22 @@
</div>
</div>
</div>
</Transition>
</div>
</template>
<style scoped>
.slide-up-enter-active,
.slide-up-leave-active {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-up-enter-from,
.slide-up-leave-to {
transform: translateY(100%);
}
</style>
<script setup lang="ts">
import { GetOrderDocument, type GetOrderQueryResult } from '~/composables/graphql/team/orders-generated'
import type { RouteStageItem } from '~/components/RouteStagesList.vue'