Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 5 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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app.vue
View file

@ -1,3 +1,12 @@
<template>
<NuxtPage />
</template>
<script setup>
const runtimeConfig = useRuntimeConfig();
const appTitle = runtimeConfig.public.app.title;
useHead({
title: appTitle,
});
</script>

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>

6
components/Footer.vue
View file

@ -1,12 +1,12 @@
<template>
<div darkgray class="h-48 min-h-fit w-full px-5 py-10 flex-col justify-center items-center flex">
<div 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>
<div class="text-base">@Copyright {{ new Date().getFullYear() }} {{ footer.copyright }}</div>
<div class="text-base">verwaltet von {{ footer.designed_developed_by }}</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>
</template>

8
components/base/ListImageItem.vue
View file

@ -10,10 +10,9 @@
:src="baseUrl + data?.image?.url"
:imgAttrs="{ class: 'w-full h-56 object-cover object-center' }"
/>
<div class="w-full h-44 relative bg-white">
<div class="w-full h-full px-2.5 py-5 flex flex-col justify-start items-start gap-2.5">
<div class="w-full h-44 relative bg-white px-2 py-5 flex flex-col justify-start items-start gap-2 overflow-y-auto">
<h1>{{ data?.title }}</h1>
<p v-if="data?.date" class="self-stretch grow shrink basis-0 text-[#5c5c5c]">
<p v-if="data?.date" class="w-full text-[#5c5c5c]">
{{
new Date(data?.date ?? "").toLocaleString("de-DE", {
day: "2-digit",
@ -24,11 +23,10 @@
})
}}
</p>
<p class="self-stretch grow shrink basis-0 text-[#5c5c5c]">
<p class="w-full text-[#5c5c5c]">
{{ data?.description }}
</p>
</div>
</div>
</NuxtLink>
</template>

2
components/dynamicZone/ColumnImageText.vue
View file

@ -2,7 +2,7 @@
<div class="flex flex-col md:flex-row gap-4">
<NuxtPicture
loading="lazy"
class="w-1/2 min-w-[50%] h-fit object-cover object-center"
class="w-full md:w-1/2 min-w-[50%] h-fit 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' }"

2
components/dynamicZone/FullImage.vue
View file

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

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 md:w-fit md: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-full h-full object-cover object-center' }"
:imgAttrs="{ class: 'w-full h-fit sm:w-fit sm:h-48 object-cover object-center' }"
/>
</div>
</template>

7
components/field/Content.vue
View file

@ -21,6 +21,13 @@
<FieldType v-for="child in list.children" :data="child" />
</li>
</ol>
<NuxtLink
v-else-if="item.type == 'code'"
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
>
</div>
</div>
</template>

14
nuxt.config.ts
View file

@ -3,7 +3,7 @@ export default defineNuxtConfig({
app: {
baseURL: "/",
head: {
title: process.env.APP_TITLE,
title: "Feuerwehr",
htmlAttrs: {
lang: "de",
},
@ -31,24 +31,18 @@ export default defineNuxtConfig({
modules: ["@nuxtjs/strapi", "@nuxt/image"],
strapi: {
url: process.env.STRAPI_URL,
url: process.env.PUBLIC_STRAPI_URL,
prefix: "/api",
version: "v5",
},
runtimeConfig: {
strapi: {
url: process.env.STRAPI_URL ?? "localhost:1337",
},
app: {
title: process.env.APP_TITLE ?? "Feuerwehr",
},
public: {
strapi: {
url: process.env.STRAPI_URL ?? "localhost:1337",
url: process.env.PUBLIC_STRAPI_URL ?? "localhost:1337",
},
app: {
title: process.env.APP_TITLE ?? "Feuerwehr",
title: process.env.PUBLIC_APP_TITLE ?? "Feuerwehr",
},
},
},

5
types/field/content.ts
View file

@ -10,6 +10,11 @@ export default interface ContentField
format: "unordered" | "ordered";
children: Array<{ type: "list-item"; children: Array<TypeField> }>;
}
| {
type: "code";
children: Array<{ type: "list-item"; children: Array<TypeField> }>;
language: "plaintext";
}
> {}
export type TypeField = TextField | { type: "link"; url: string; children: Array<TextField> };