alexbcberio/arsea
1
0
Fork 0
Code Issues Activity

chore: improve modal view on mobile

Browse Source
This commit is contained in:
Alexander BC
2025-03-31 22:42:17 +02:00
parent 8cbba81747
commit 7823c33cfb
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/DialogSearchResult.vue
View File

@@ -5,13 +5,9 @@ import { computed, onMounted, onUnmounted, ref, useTemplateRef } from "vue";
import MaterialSymbols from "./base/MaterialSymbols.vue"; import MaterialSymbols from "./base/MaterialSymbols.vue";
import Skeleton from "./base/Skeleton.vue"; import Skeleton from "./base/Skeleton.vue";
const props = defineProps<{ const props = defineProps<{ searchResult: ArtworksSearchResult | null }>();
searchResult: ArtworksSearchResult | null;
}>();
const emits = defineEmits<{ const emits = defineEmits<{ close: [value: void] }>();
close: [value: void];
}>();
const dialog = useTemplateRef<HTMLDialogElement>("dialog"); const dialog = useTemplateRef<HTMLDialogElement>("dialog");
const imageBlob = ref<string | null>(); const imageBlob = ref<string | null>();
@@ -156,25 +152,31 @@ async function downloadArtwork(size: number): Promise<void> {
<dialog ref="dialog" @close="closeModal"> <dialog ref="dialog" @close="closeModal">
<div <div
v-if="dialogVisible && searchResult" v-if="dialogVisible && searchResult"
class="fixed top-0 bottom-0 left-0 right-0 w-full h-full bg-black bg-opacity-75 backdrop-blur-sm" class="fixed top-0 bottom-0 left-0 right-0 w-full h-full overflow-auto bg-black bg-opacity-75 backdrop-blur-sm"
> >
<Flex class="h-full"> <Flex class="flex-col h-full md:flex-row">
<Flex <div
class="items-center justify-center w-2/3 h-full m-4" class="items-center justify-center p-4 md:p-0 md:flex md:w-3/5 lg:w-4/6 xl:flex-grow md:h-full"
@click="closeModal" @click="closeModal"
> >
<img <img
v-if="imageBlob" v-if="imageBlob"
:src="imageBlob" :src="imageBlob"
:download="searchResult.title" :download="searchResult.title"
class="max-w-[42rem] max-h-[42rem]" class="max-w-[90%] max-h-[90%] mx-auto lg:max-w-[42rem] lg:max-h-[42rem]"
@click.stop="null" @click.stop="null"
/> />
<Skeleton v-else class="w-[42rem] h-[42rem]" @click.stop="null" /> <Skeleton
</Flex> v-else
class="max-w-[90%] max-h-[90%] mx-auto lg:w-[42rem] lg:h-[42rem]"
@click.stop="null"
/>
</div>
<aside class="w-1/3 h-full text-white border-l border-black bg-primary"> <aside
class="w-full h-full pb-4 text-white border-l border-black md:w-2/5 lg:w-2/6 xl:w-96 bg-primary md:pb-0"
>
<Flex class="items-center"> <Flex class="items-center">
<h1 class="px-4 text-xl">{{ searchResult.title }}</h1> <h1 class="px-4 text-xl">{{ searchResult.title }}</h1>