quirinecker/dwa
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

now the app is responsive for desktop

Browse Source
This commit is contained in:
quirinecker
2024-03-08 14:59:20 +01:00
parent 1d7c55f773
commit 4618db3aad
11 changed files with 261 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/Home.vue
View File

@@ -2,7 +2,8 @@
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-vue-next';
import { entries, save } from '@/data/entries';
import { Drawer, DrawerHeader, DrawerTitle, DrawerContent, DrawerClose } from '@/components/ui/drawer';
import { Drawer, DrawerHeader, DrawerTitle, DrawerContent } from '@/components/ui/drawer';
import { Dialog, DialogHeader, DialogTitle, DialogContent } from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import EntryForm from '@/components/EntryForm.vue'
@@ -12,7 +13,9 @@ import { useRouter } from 'vue-router';
import { toast } from 'vue-sonner';
import moment from 'moment';
import { ref } from 'vue';
import { useMediaQuery } from '@vueuse/core';
const isDesktop = useMediaQuery('(min-width: 768px)')
const createDrawerState = ref(false)
const router = useRouter()
@@ -63,18 +66,29 @@ function openDetailWithName(name: string) {
<div id="placeholder" class="h-32"></div>
<div class="fixed bottom-0 w-full h-28 flex justify-center items-center shadow-2xl shadow-black bg-white">
<Button size="icon" class="h-20 sm:w-3/4 w-11/12" @click="createDrawerState = true">
<div class="fixed bottom-0 w-full h-28 p-5 flex justify-center md:justify-end items-center shadow-2xl shadow-black bg-white md:shadow-transparent md:bg-transparent">
<Button size="icon" class="h-20 md:w-20 w-11/12" @click="createDrawerState = true">
<Plus />
</Button>
</div>
<Drawer v-model:open="createDrawerState">
<Dialog v-if="isDesktop" v-model:open="createDrawerState">
<DialogContent>
<DialogHeader>
<DialogTitle> Create new Entry </DialogTitle>
</DialogHeader>
<div class="p-5">
<EntryForm action="create" @submit="(val) => createEntry(val)"> </EntryForm>
</div>
</DialogContent>
</Dialog>
<Drawer v-else v-model:open="createDrawerState">
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Create new Entry</DrawerTitle>
</DrawerHeader>
<div id="content" class="p-5">
<div class="p-5">
<EntryForm action="create" @submit="(val) => createEntry(val)"> </EntryForm>
</div>
</DrawerContent>