Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 13 Packages Wiki Activity Actions

responsive and config

Browse source
This commit is contained in:
Julian Krauser 2024-11-06 08:59:07 +01:00
parent e74c6a5a23
commit 5f4aedff31
10 changed files with 54 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/CollectionDetail.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12">
<div class="min-h-[calc(100vh-9rem)] h-fit container mx-auto py-12 px-2">
<h1>{{ data?.title }}</h1>
<p v-if="data?.date">
{{
@ -18,9 +18,9 @@
<NuxtPicture
v-if="data?.image"
loading="lazy"
class="w-fit h-[50vh] max-w-full object-cover object-center"
class="w-full h-full sm:w-fit sm:h-[50vh] max-w-full object-cover object-center"
:src="baseUrl + data.image.url"
:imgAttrs="{ class: 'w-fit h-[50vh] max-w-full object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-full sm:w-fit sm:h-[50vh] object-cover object-center' }"
/>
<br v-if="data?.image" />
<div v-if="data?.content">
@ -30,13 +30,13 @@
<br />
<div v-if="data?.attachment">
<p>Anhang:</p>
<div class="flex flex-row flex-wrap gap-2 w-full min-h-fit">
<div class="flex flex-col sm:flex-row flex-wrap gap-2 w-full min-h-fit">
<NuxtPicture
v-for="img in data.attachment"
loading="lazy"
class="w-fit h-48 object-cover object-center"
class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
:src="baseUrl + img.url"
:imgAttrs="{ class: 'w-fit h-48 object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
/>
</div>
</div>