flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rework Location page photos ratio and hover

Browse Source 
Defines if the photo is under 3/2 by calculating ratio from width and height
This commit is contained in:
Félix Péault
2022-06-13 22:19:38 +02:00
parent 0272e7ed18
commit d5b860da03
5 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/molecules/House.svelte
View File

@@ -9,7 +9,7 @@
export let photoAlt: string
export let title: string
export let index: string
export let orientation: string = undefined
export let ratio: number
export let date: string = undefined
export let city: string = undefined
</script>
@@ -31,25 +31,27 @@
</p>
</div>
<figure class="house__photo"
class:not-landscape={orientation && orientation !== 'landscape'}
<div class="house__photo"
class:not-landscape={ratio < 1.475}
>
<a href={url} sveltekit:noscroll tabindex="0">
<Image
id={photoId}
sizeKey="photo-list"
sizes={{
small: { width: 500 },
medium: { width: 850 },
large: { width: 1280 },
}}
ratio={1.5}
alt={photoAlt}
class="photo shadow-photo"
/>
<figure class="house__image shadow-photo">
<Image
id={photoId}
sizeKey="photo-list"
sizes={{
small: { width: 500 },
medium: { width: 850 },
large: { width: 1280 },
}}
ratio={1.5}
alt={photoAlt}
class="photo"
/>
</figure>
<span class="house__index title-index">
{index}
</span>
</a>
</figure>
</div>
</div>