mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Simplify modal layout and reduce pieces page font size

Browse source
This commit is contained in:
Michael Winter 2026-03-08 11:05:50 +01:00
parent 9e4435e512
commit f47470c851
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
layouts/default.vue
View file

@ -68,26 +68,37 @@
</footer>
<Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
<ModalBody :class="modalStore.aspect">
<div class="flex flex-col h-full overflow-hidden">
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageSlider>
<div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
<ClientOnly>
<iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
</ClientOnly>
</div>
<div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
<ClientOnly>
<iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="max-w-full max-h-full"></iframe>
</ClientOnly>
<div v-if="modalStore.type === 'video'" class="w-full flex items-center justify-center p-4">
<div class="w-full aspect-video">
<ClientOnly>
<iframe
:src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid"
width="100%"
height="100%"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
class="w-full h-full"
></iframe>
</ClientOnly>
</div>
</div>
<div v-if="modalStore.type === 'document'" class="w-full flex flex-col" style="height: calc(85vh - 4rem)">
<div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
<ClientOnly>
<iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
</ClientOnly>
</div>
<div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
<div v-if="modalStore.type === 'pdf'" class="flex flex-col h-[70vh]">
<ClientOnly>
<iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
<iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
</ClientOnly>
<div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
<ClientOnly>
@ -100,7 +111,7 @@
<Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
</a>
</div>
</ModalBody>
</div>
</Modal>
</div>
</template>

4
pages/pieces.vue
View file

@ -9,11 +9,11 @@
<NuxtLink
v-if="hasItems(work)"
:to="'/works/' + slugify(work.title)"
class="text-lg italic hover:underline"
class="text-base italic hover:underline"
>
<span v-html="work.title"></span>
</NuxtLink>
<span v-else class="text-lg italic">
<span v-else class="text-base italic">
<span v-html="work.title"></span>
</span>
</div>