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,6 +40,7 @@ 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 '"
> >
<ClientOnly>
<NuxtImg <NuxtImg
:src="project?.image || '/no-image-1-1.svg'" :src="project?.image || '/no-image-1-1.svg'"
class="w-full h-auto" class="w-full h-auto"
@ -50,6 +51,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
object-fit object-fit
bg="#121212" 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>
<div
max-w-200px max-w-200px
max-h-200px max-h-200px
shrink shrink
relative
>
<NuxtImg
border="1px app-text-grey" border="1px app-text-grey"
:src="logo ?? '/no-image-1-1.svg'" :src="logo ?? '/no-image-1-1.svg'"
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] " 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"