dominik/webapps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to NuxtImg
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 1m57s
Details

Browse Source
This commit is contained in:
Dominik Milacher 2025-10-15 12:26:36 +02:00
parent d2f3146e03
commit 52faafe3cc
3 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
View File

@ -51,7 +51,7 @@ function select(index: number) {
class="relative w-full" class="relative w-full"
@select="onSelect" @select="onSelect"
> >
<img :src="item" class="object-cover" alt="Bild"/> <NuxtImg :src="item" class="object-cover" alt="Bild"/>
</UCarousel> </UCarousel>
<!-- thumbnails --> <!-- thumbnails -->

4
apps/panoramablick-saalbach.at/pages/[locale]/[variant]/apartments.vue
View File

@ -4,8 +4,8 @@
<div class="flex flex-col md:flex-row items-center gap-8"> <div class="flex flex-col md:flex-row items-center gap-8">
<!-- Left: Image Group --> <!-- Left: Image Group -->
<div class="flex flex-row gap-4 justify-center relative"> <div class="flex flex-row gap-4 justify-center relative">
<img :src="c.apartments.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/> <NuxtImg :src="c.apartments.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
<img :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" /> <NuxtImg :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
</div> </div>
<AppTitleText :title="c.apartments.highlight.title" :text="c.apartments.highlight.description"> <AppTitleText :title="c.apartments.highlight.title" :text="c.apartments.highlight.description">

26
apps/panoramablick-saalbach.at/pages/[locale]/[variant]/index.vue
View File

@ -12,7 +12,7 @@
:duration="150" :duration="150"
class="w-full h-full custom-carousel"> class="w-full h-full custom-carousel">
<div class="w-full h-full flex items-center justify-center"> <div class="w-full h-full flex items-center justify-center">
<img :src="item" class="w-full h-full object-cover" alt="Demo Picture"/> <NuxtImg :src="item" class="w-full h-full object-cover" alt="Demo Picture"/>
</div> </div>
</UCarousel> </UCarousel>
</div> </div>
@ -64,8 +64,8 @@
<div class="flex flex-col md:flex-row items-center gap-4"> <div class="flex flex-col md:flex-row items-center gap-4">
<!-- Left: Image Group --> <!-- Left: Image Group -->
<div class="flex flex-row gap-4 justify-center relative"> <div class="flex flex-row gap-4 justify-center relative">
<img :src="c.landing.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/> <NuxtImg :src="c.landing.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
<img :src="c.landing.highlight.image.right" class="w-40 h-60 object-cover mt-6" /> <NuxtImg :src="c.landing.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
</div> </div>
<!-- Right: Text Content --> <!-- Right: Text Content -->
@ -81,10 +81,9 @@
</AppFlatSection> </AppFlatSection>
<AppCardSection> <AppCardSection>
<div class="flex flex-col md:flex-row items-center gap-4"> <div class="flex w-full items-stretch overflow-hidden">
<!-- Left: 40% width -->
<!-- Left: Text (40%) --> <div class="w-[40%] flex flex-col justify-center pr">
<div class="basis-2/5 pr">
<AppTitleText :title="c.landing.location.title" :text="c.landing.location.description"> <AppTitleText :title="c.landing.location.title" :text="c.landing.location.description">
<UButton to="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7" color="primary" variant="solid" size="xl" <UButton to="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7" color="primary" variant="solid" size="xl"
trailing-icon="i-heroicons-arrow-right"> trailing-icon="i-heroicons-arrow-right">
@ -92,21 +91,20 @@
</UButton> </UButton>
</AppTitleText> </AppTitleText>
</div> </div>
<!-- Right: 60% width, image fills -->
<!-- Right: Image (60%) -->
<a <a
href="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7" href="https://maps.app.goo.gl/FtTC8ervoBCnfU3j7"
class="basis-3/5 flex justify-center overflow-hidden group" class="w-[60%] overflow-hidden relative group"
aria-label="Google Maps öffnen" aria-label="Google Maps öffnen"
> >
<img <NuxtImg
:src="c.landing.location.image" :src="c.landing.location.image"
alt="Vorschaubild der Lage in Google Maps" alt="Vorschaubild der Lage in Google Maps"
class="w-full h-80 object-cover transition-transform duration-300 ease-out group-hover:scale-110" class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"
/> />
</a> </a>
</div> </div>
</AppCardSection> </AppCardSection>
<AppFlatSection> <AppFlatSection>
@ -115,7 +113,7 @@
<NuxtLink v-for="apartment in c.apartments.list" :to="p('apartments', apartment.id)" <NuxtLink v-for="apartment in c.apartments.list" :to="p('apartments', apartment.id)"
class="relative group block w-60 h-80 overflow-hidden"> class="relative group block w-60 h-80 overflow-hidden">
<img :src="apartment.thumbnail" alt="Image 1" <NuxtImg :src="apartment.thumbnail" alt="Image 1"
class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"/> class="w-full h-full object-cover transition-transform duration-300 ease-out group-hover:scale-110"/>
<div class="absolute inset-0 bg-black/50"></div> <div class="absolute inset-0 bg-black/50"></div>
<div <div