fix:(project-image): hydratation

This commit is contained in:
Daniel Klein 2024-09-23 21:14:17 +02:00
parent 337cf91a35
commit fdd2b33f1f
2 changed files with 39 additions and 19 deletions

View file

@ -40,16 +40,18 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
h="48px lg:64px" h="48px lg:64px"
:class="switcher ? '' : 'lg:max-w-full! lg:w-full '" :class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
> >
<NuxtImg <ClientOnly>
:src="project?.image || '/no-image-1-1.svg'" <NuxtImg
class="w-full h-auto" :src="project?.image || '/no-image-1-1.svg'"
max-h="md:64px 48px" class="w-full h-auto"
max-w="md:64px 48px" max-h="md:64px 48px"
self-center max-w="md:64px 48px"
z-10 self-center
object-fit z-10
bg="#121212" object-fit
/> bg="#121212"
/>
</ClientOnly>
<div <div
flex flex
flex-col flex-col

View file

@ -25,14 +25,25 @@ const logo = props.project?.logos?.at(0)?.url
items-center items-center
lg:gap-32px lg:gap-32px
> >
<NuxtImg <ClientOnly>
max-w-200px <div
max-h-200px max-w-200px
shrink max-h-200px
border="1px app-text-grey" shrink
:src="logo ?? '/no-image-1-1.svg'" relative
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] " >
/> <NuxtImg
border="1px app-text-grey"
:src="logo ?? '/no-image-1-1.svg'"
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
/>
<div flex items-center gap-4px absolute top-12px right-12px bg-app-danger text-12px leading-16px font-bold px-8px py-4px rounded-full v-if="project.sunset">
<UnoIcon i-material-symbols-dangerous text-16px />
SUNSET
<p></p>
</div>
</div>
</ClientOnly>
<div <div
grow grow
w-full w-full
@ -216,7 +227,14 @@ const logo = props.project?.logos?.at(0)?.url
{{ project.percentage }} % {{ project.percentage }} %
</div> </div>
</div> </div>
<div col-span-4 flex items-center justify-center w-full v-if="selectedMobileRating && !isLargeScreen"> <div
v-if="selectedMobileRating && !isLargeScreen"
col-span-4
flex
items-center
justify-center
w-full
>
<ProjectRating <ProjectRating
:rating="selectedMobileRating" :rating="selectedMobileRating"
:percentage="selectedMobileRating.points" :percentage="selectedMobileRating.points"