safari optimizations

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

View file

@ -18,9 +18,9 @@
<NuxtPicture
v-if="data?.image"
loading="lazy"
class="w-full h-full sm:w-fit sm:h-[50vh] max-w-full object-cover object-center"
class="max-sm:w-full h-full sm:h-[50vh] max-w-full object-cover object-center"
:src="baseUrl + data.image.url"
:imgAttrs="{ class: 'w-full h-full sm:w-fit sm:h-[50vh] object-cover object-center' }"
:imgAttrs="{ class: 'h-full sm:h-[50vh] object-cover object-center' }"
/>
<br v-if="data?.image" />
<div v-if="data?.content">
@ -34,9 +34,9 @@
<NuxtPicture
v-for="img in data.attachment"
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>
</div>

View file

@ -1,13 +1,23 @@
<template>
<div darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
<footer darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex gap-2">
<div class="self-stretch py-5 justify-center items-center gap-4 md:gap-10 inline-flex flex-wrap">
<NuxtLink v-for="link in footer.links" :key="link.id" :to="link.URL" :target="link.target" class="text-base">
{{ link.text }}
</NuxtLink>
<div v-for="link in footer.links" :key="link.id" class="contents">
<a v-if="link.URL.startsWith('http')" :href="link.URL" :target="link.target" class="text-base">{{
link.text
}}</a>
<NuxtLink
v-else
:to="`${link.URL.startsWith('/') ? '' : '/'}${link.URL}`"
:target="link.target"
class="text-base"
>
{{ link.text }}
</NuxtLink>
</div>
</div>
<div class="text-base text-center">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</div>
<div class="text-base text-center">verwaltet von {{ footer.designed_developed_by }}</div>
</div>
</footer>
</template>
<script setup lang="ts">

View file

@ -1,11 +1,11 @@
<template>
<div class="sticky top-0 h-fit">
<header class="sticky top-0 h-fit">
<div
primary
class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
>
<NuxtLink to="/">
<img class="h-16 w-fit min-w-fit" :src="baseUrl + navbar.logo.url" />
<img class="h-16" :src="baseUrl + navbar.logo.url" />
</NuxtLink>
<div class="md:hidden">
<svg
@ -57,7 +57,7 @@
{{ sublink.name }}
</NuxtLink>
</div>
</div>
</header>
</template>
<script setup lang="ts">

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>

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>

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>

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>

View file

@ -26,8 +26,9 @@
primary
:to="item.children[0].text.split('->')[0]"
class="w-fit p-2 px-3 rounded-md mx-auto mt-3"
>{{ item.children[0].text.split("->")[1] }}</NuxtLink
>
{{ item.children[0].text.split("->")[1] }}
</NuxtLink>
</div>
</div>
</template>

View file

@ -6,7 +6,7 @@
:src="baseUrl + backdrop.url"
:imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
/>
<img class="absolute p-4 w-full h-fit sm:h-40 sm:w-fit bottom-5" :src="baseUrl + navbar.logo.url" />
<img class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
</div>
<Header />
<slot />

View file

@ -10,7 +10,6 @@ export default defineNuxtConfig({
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.png" }],

View file

@ -4,7 +4,7 @@
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"dev": "nuxt dev --host",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"

View file

@ -12,7 +12,7 @@ export default interface ContentField
}
| {
type: "code";
children: Array<{ type: "list-item"; children: Array<TypeField> }>;
children: Array<TextField>;
language: "plaintext";
}
> {}