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"
@select="onSelect"
>
<img :src="item" class="object-cover" alt="Bild"/>
<NuxtImg :src="item" class="object-cover" alt="Bild"/>
</UCarousel>
<!-- 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">
<!-- Left: Image Group -->
<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"/>
<img :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
<NuxtImg :src="c.apartments.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
<NuxtImg :src="c.apartments.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
</div>
<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"
class="w-full h-full custom-carousel">
<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>
</UCarousel>
</div>
@ -64,8 +64,8 @@
<div class="flex flex-col md:flex-row items-center gap-4">
<!-- Left: Image Group -->
<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"/>
<img :src="c.landing.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
<NuxtImg :src="c.landing.highlight.image.left" alt="Image 1" class="w-40 h-60 object-cover"/>
<NuxtImg :src="c.landing.highlight.image.right" class="w-40 h-60 object-cover mt-6" />
</div>
<!-- Right: Text Content -->
@ -81,10 +81,9 @@
</AppFlatSection>
<AppCardSection>
<div class="flex flex-col md:flex-row items-center gap-4">
<!-- Left: Text (40%) -->
<div class="basis-2/5 pr">
<div class="flex w-full items-stretch overflow-hidden">
<!-- Left: 40% width -->
<div class="w-[40%] flex flex-col justify-center pr">
<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"
trailing-icon="i-heroicons-arrow-right">
@ -92,21 +91,20 @@
</UButton>
</AppTitleText>
</div>
<!-- Right: Image (60%) -->
<!-- Right: 60% width, image fills -->
<a
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"
>
<img
<NuxtImg
:src="c.landing.location.image"
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>
</div>
</AppCardSection>
<AppFlatSection>
@ -115,7 +113,7 @@
<NuxtLink v-for="apartment in c.apartments.list" :to="p('apartments', apartment.id)"
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"/>
<div class="absolute inset-0 bg-black/50"></div>
<div