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

safari optimizations

Browse source
This commit is contained in:
Julian Krauser 2024-11-10 08:29:08 +01:00
parent 8aef9266f6
commit 624af7cdc0
12 changed files with 35 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/dynamicZone/ColumnImageText.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-8 md:gap-4">
<NuxtPicture
loading="lazy"
class="w-full md:w-1/2 min-w-[50%] h-fit object-cover object-center"
class="w-full md:w-1/2 min-w-[50%] object-cover object-center"
:class="data?.image_left ? 'order-0' : 'order-1'"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
/>
<FieldContent :data="data?.text" />
</div>

2
components/dynamicZone/DualColumnText.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex flex-col md:flex-row gap-8 md:gap-4">
<FieldContent :data="data?.left_side" />
<FieldContent :data="data?.right_side" />
</div>

4
components/dynamicZone/FullImage.vue
View file

@ -1,9 +1,9 @@
<template>
<NuxtPicture
loading="lazy"
class="w-full lg:w-1/2 lg:min-w-[50%] h-fit object-cover object-center mx-auto"
class="w-full lg:w-1/2 lg:min-w-[50%] object-cover object-center mx-auto"
:src="baseUrl + data?.image.url"
:imgAttrs="{ class: 'w-full h-fit object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
/>
</template>

4
components/dynamicZone/Gallery.vue
View file

@ -3,9 +3,9 @@
<NuxtPicture
v-for="img in data?.images"
loading="lazy"
class="w-full h-fit sm:w-fit sm:h-48 object-cover object-center"
class="max-sm:w-full sm:h-48 object-cover object-center"
:src="baseUrl + img.url"
:imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
:imgAttrs="{ class: 'max-sm:w-full sm:h-48 object-cover object-center' }"
/>
</div>
</template>