forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat(toasts): position in viewport instead of not the viewport
+27
-25
-2
src/App.vue
-2
src/App.vue
···
14
14
import AppShell from '@/components/Layout/AppShell.vue'
15
15
import SplashScreen from '@/components/Layout/SplashScreen.vue'
16
16
import ModalStack from '@/components/UI/ModalStack.vue'
17
-
import ToastStack from '@/components/UI/Toast/ToastStack.vue'
18
17
import PronounsModal from '@/components/Modals/PronounsModal.vue'
19
18
20
19
import KEYS from './utils/keys'
···
136
135
<template>
137
136
<div class="app-root">
138
137
<ModalStack />
139
-
<ToastStack />
140
138
141
139
<Transition name="fade" mode="out-in">
142
140
<SplashScreen v-if="currentPhase === 'loading'" key="loading" />
+3
-1
src/components/Layout/AppShell.vue
+3
-1
src/components/Layout/AppShell.vue
···
1
1
<script setup lang="ts">
2
-
import { computed, ref, onMounted, onUnmounted } from 'vue'
2
+
import { computed, onMounted, onUnmounted } from 'vue'
3
3
import { App } from '@capacitor/app'
4
4
import { useNavigationStore } from '@/stores/navigation'
5
5
import { useModalStore } from '@/stores/modal'
6
6
import { stackRoots, type StackRootNames } from '@/router'
7
7
8
8
import TabStack from '@/components/Navigation/TabStack.vue'
9
+
import ToastStack from '@/components/UI/Toast/ToastStack.vue'
9
10
import NavigationBar from '@/components/Navigation/NavigationBar.vue'
10
11
11
12
import NewPostModal from '../Modals/NewPostModal.vue'
···
73
74
</div>
74
75
75
76
<div class="viewport" id="main-content">
77
+
<ToastStack />
76
78
<TabStack
77
79
v-for="t in tabs"
78
80
:key="t"
+24
-22
src/components/UI/Toast/ToastStack.vue
+24
-22
src/components/UI/Toast/ToastStack.vue
···
25
25
}
26
26
27
27
const toasts = ref<Toast[]>([
28
-
// {
29
-
// id: 1,
30
-
// message: 'This is a success toast!',
31
-
// type: ToastType.Success,
32
-
// },
33
-
// {
34
-
// id: 2,
35
-
// message: 'This is an error toast!',
36
-
// type: ToastType.Error,
37
-
// },
28
+
{
29
+
id: 1,
30
+
message: 'This is a success toast!',
31
+
type: ToastType.Success,
32
+
},
33
+
{
34
+
id: 2,
35
+
message: 'This is an error toast!',
36
+
type: ToastType.Error,
37
+
},
38
38
])
39
39
</script>
40
40
41
41
<template>
42
-
<Teleport to="body">
43
-
<div class="toast-stack">
44
-
<div v-for="toast in toasts" :key="toast.id" :class="['toast', toast.type]">
45
-
<div class="icon">
46
-
<component :is="toastIcons[toast.type]" />
47
-
</div>
48
-
<span class="message">{{ toast.message }}</span>
42
+
<div class="toast-stack">
43
+
<div v-for="toast in toasts" :key="toast.id" :class="['toast', toast.type]">
44
+
<div class="icon">
45
+
<component :is="toastIcons[toast.type]" />
49
46
</div>
47
+
<span class="message">{{ toast.message }}</span>
50
48
</div>
51
-
</Teleport>
49
+
</div>
52
50
</template>
53
51
54
52
<style scoped lang="scss">
55
53
.toast-stack {
56
-
position: fixed;
54
+
position: absolute;
57
55
bottom: calc(5rem + env(safe-area-inset-bottom));
58
-
left: 50%;
59
-
transform: translateX(-50%);
56
+
left: 0.5rem;
60
57
z-index: 1000;
61
58
62
59
display: flex;
···
65
62
gap: 0.75rem;
66
63
67
64
width: 100%;
68
-
padding: 0 1rem;
65
+
}
66
+
@media (min-width: 800px) {
67
+
.toast-stack {
68
+
position: fixed;
69
+
bottom: 1.5rem;
70
+
}
69
71
}
70
72
71
73
.toast {