wip bsky client for the web & android
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(toasts): position in viewport instead of not the viewport

vi b84555a2 1dff6a28

+27 -25
-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
··· 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
··· 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 {