Files
boursecu_user/src/components/pwa/PwaInstallBanner.vue
T
safavimohadeseh78andCursor 42aef88064 Port modular features into boursecu and fix desktop login UX.
Add support chat, piggy funds, PWA banner, notification/SSE sync, and messenger legacy guards while keeping boursecu theme; also balance login panels and unblock login navigation.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-06 20:14:46 +02:00

71 lines
1.5 KiB
Vue

<script setup lang="ts">
defineProps<{
visible: boolean
}>()
const emit = defineEmits<{
install: []
dismiss: []
}>()
</script>
<template>
<Transition name="pwa-install-banner">
<button
v-if="visible"
type="button"
class="pwa-install-banner"
@click="emit('install')"
>
نصب وب اپلیکیشن
</button>
</Transition>
</template>
<style scoped lang="less">
.pwa-install-banner {
position: fixed;
left: 50%;
z-index: 5095;
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: calc(100% - 24px);
padding: 10px 18px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
font-size: 13px;
font-weight: 700;
color: @App-primary-color;
white-space: nowrap;
cursor: pointer;
transform: translateX(-50%);
bottom: calc(var(--app-bottom-chrome-height, 108px) + 8px);
}
@media screen and (min-width: 768px) {
.pwa-install-banner {
/* بالاتر از متن نسخه در پنل برند لاگین */
bottom: 64px;
}
html.app-layout--desktop:not(.app-layout--desktop-no-sidebar) .pwa-install-banner {
left: calc(50% - var(--app-desktop-sidebar-width, 260px) / 2);
}
}
.pwa-install-banner-enter-active,
.pwa-install-banner-leave-active {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.pwa-install-banner-enter-from,
.pwa-install-banner-leave-to {
opacity: 0;
transform: translate(-50%, 12px);
}
</style>