Fix thumbnail stretching weirdly on Event page
This commit is contained in:
Antoine Phan
@@ -1,106 +1,103 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { PortableText } from '@portabletext/svelte';
|
import { PortableText } from '@portabletext/svelte';
|
||||||
import { CalendarDays, MapPin, Link as LinkIcon, FilePen } from '@lucide/svelte';
|
import { CalendarDays, MapPin, Link as LinkIcon, FilePen } from '@lucide/svelte';
|
||||||
|
|
||||||
let {
|
let {
|
||||||
eventTitle,
|
eventTitle,
|
||||||
date,
|
date,
|
||||||
location,
|
location,
|
||||||
eventDescription,
|
eventDescription,
|
||||||
thumbnail,
|
thumbnail,
|
||||||
registrationLink,
|
registrationLink,
|
||||||
paymentLink,
|
paymentLink,
|
||||||
eventCategory
|
eventCategory
|
||||||
} = $props();
|
} = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div class="mx-auto w-[100%] rounded-2xl bg-[#E8FFD9] p-5 text-[#0A3D2A] lg:w-[64%] lg:max-w-3xl">
|
||||||
class="mx-auto lg:w-[64%] lg:max-w-3xl w-[100%] rounded-2xl bg-[#E8FFD9] p-5 text-[#0A3D2A]"
|
<div class="rounded-[20px] bg-[#A6D6B8]">
|
||||||
>
|
<div
|
||||||
<div class="rounded-[20px] bg-[#A6D6B8]">
|
class="grid h-[200px] place-items-center overflow-hidden rounded-[16px] bg-[#5CAF95]"
|
||||||
<div
|
aria-label="Event banner"
|
||||||
class="grid h-[200px] place-items-center overflow-hidden rounded-[16px] bg-[#5CAF95]"
|
>
|
||||||
aria-label="Event banner"
|
{#if thumbnail}
|
||||||
>
|
<img class="h-full object-cover" src={thumbnail} alt="Event banner" />
|
||||||
{#if thumbnail}
|
{:else if eventCategory?.[0] === 'social'}
|
||||||
<img class="h-full object-fill" src={thumbnail} alt="Event banner" />
|
<img class="h-full object-cover" src="/Social.jpg" alt="Social Placeholder" />
|
||||||
{:else if eventCategory?.[0] === 'social'}
|
{:else if eventCategory?.[0] === 'technical'}
|
||||||
<img class="h-full object-fill" src="/Social.jpg" alt="Social Placeholder" />
|
<img class="h-full object-cover" src="/Technical.jpg" alt="Technical Placeholder" />
|
||||||
{:else if eventCategory?.[0] === 'technical'}
|
{:else if eventCategory?.[0] === 'professional'}
|
||||||
<img class="h-full object-fill" src="/Technical.jpg" alt="Technical Placeholder" />
|
<img class="h-full object-cover" src="/Professional.jpg" alt="Professional Placeholder" />
|
||||||
{:else if eventCategory?.[0] === 'professional'}
|
{:else if eventCategory?.[0] === 'academic'}
|
||||||
<img class="h-full w-full object-cover" src="/Professional.jpg" alt="Professional Placeholder" />
|
<img class="h-full object-cover" src="/Academic.jpg" alt="Academic Placeholder" />
|
||||||
{:else if eventCategory?.[0] === 'academic'}
|
{:else}
|
||||||
<img class="h-full object-fill" src="/Academic.jpg" alt="Academic Placeholder" />
|
<img class="h-full object-cover" src="/ECSESS.png" alt="Default Placeholder" />
|
||||||
{:else}
|
{/if}
|
||||||
<img class="h-full object-fill" src="/ECSESS.png" alt="Default Placeholder" />
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- content -->
|
<!-- content -->
|
||||||
<div class="mt-[22px] grid gap-[18px]">
|
<div class="mt-[22px] grid gap-[18px]">
|
||||||
<p class="m-0 text-center text-[clamp(26px,3vw,34px)] leading-[1.05] tracking-[0.3px] text-[#0A3D2A]">
|
<p class="text-ecsess-800 my-0 text-center text-xl lg:text-2xl text-wrap lg:leading-8 leading-6 tracking-[0.3px]">
|
||||||
{eventTitle}
|
{eventTitle}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{#if eventDescription}
|
{#if eventDescription}
|
||||||
<div class="max-w-[75ch] mx-auto leading-relaxed text-[#5E8174]">
|
<div class="mx-auto max-w-[75ch] leading-relaxed text-[#5E8174]">
|
||||||
<PortableText value={eventDescription} />
|
<PortableText value={eventDescription} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="mt-[6px] grid gap-4 md:grid-cols-2">
|
<div class="mt-[6px] grid gap-4 md:grid-cols-2">
|
||||||
|
<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
|
||||||
|
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
||||||
|
<CalendarDays class="shrink-0" strokeWidth={2.5} />
|
||||||
|
<span class="font-bold tracking-[0.2px]">Datetime:</span>
|
||||||
|
<p class="m-0 text-left">{date}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
|
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
||||||
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
<MapPin class="shrink-0" strokeWidth={2.5} />
|
||||||
<CalendarDays class="shrink-0" strokeWidth={2.5} />
|
<span class="font-bold tracking-[0.2px]">Location:</span>
|
||||||
<span class="font-bold tracking-[0.2px]">Datetime:</span>
|
<p class="m-0 text-left">{location ?? 'TBA'}</p>
|
||||||
<p class="m-0 text-left">{date}</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
|
||||||
<MapPin class="shrink-0" strokeWidth={2.5} />
|
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
||||||
<span class="font-bold tracking-[0.2px]">Location:</span>
|
<FilePen class="shrink-0" strokeWidth={2.5} />
|
||||||
<p class="m-0 text-left">{location ?? 'TBA'}</p>
|
<span class="font-bold tracking-[0.2px]">Registration:</span>
|
||||||
</div>
|
{#if registrationLink}
|
||||||
</div>
|
<a
|
||||||
|
href={registrationLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
|
||||||
|
>
|
||||||
|
Register Here
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<p class="m-0 text-left">Just drop in!</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid gap-[10px] rounded-2xl bg-[#CCE7BA] px-4 py-[14px]">
|
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
||||||
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
<LinkIcon class="shrink-0" strokeWidth={2.5} />
|
||||||
<FilePen class="shrink-0" strokeWidth={2.5} />
|
<span class="font-bold tracking-[0.2px]">Payment:</span>
|
||||||
<span class="font-bold tracking-[0.2px]">Registration:</span>
|
{#if paymentLink}
|
||||||
{#if registrationLink}
|
<a
|
||||||
<a
|
href={paymentLink}
|
||||||
href={registrationLink}
|
target="_blank"
|
||||||
target="_blank"
|
rel="noopener noreferrer"
|
||||||
rel="noopener noreferrer"
|
class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
|
||||||
class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
|
>
|
||||||
>
|
Pay Here
|
||||||
Register Here
|
</a>
|
||||||
</a>
|
{:else}
|
||||||
{:else}
|
<p class="m-0 text-left">Free!</p>
|
||||||
<p class="m-0 text-left">Just drop in!</p>
|
{/if}
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="flex items-center gap-2 text-[#0A3D2A]">
|
</div>
|
||||||
<LinkIcon class="shrink-0" strokeWidth={2.5} />
|
|
||||||
<span class="font-bold tracking-[0.2px]">Payment:</span>
|
|
||||||
{#if paymentLink}
|
|
||||||
<a
|
|
||||||
href={paymentLink}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="text-left text-[#0A3D2A] underline-offset-4 hover:underline"
|
|
||||||
>
|
|
||||||
Pay Here
|
|
||||||
</a>
|
|
||||||
{:else}
|
|
||||||
<p class="m-0 text-left">Free!</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const eventQuery = `*[_type == "events"]{
|
|||||||
description,
|
description,
|
||||||
reglink,
|
reglink,
|
||||||
paylink,
|
paylink,
|
||||||
"thumbnail": thumbnail.asset->url,
|
"thumbnail": thumbnail.asset->url+"?h=700&fm=webp",
|
||||||
"lastUpdated": _updatedAt,
|
"lastUpdated": _updatedAt,
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user