notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix thumbnail stretching weirdly on Event page

Browse Source
This commit is contained in:
Antoine Phan
2025-08-29 19:43:07 -04:00
parent 984e7895e8
commit 0fc3acd238
2 changed files with 93 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/EventBlock.svelte
View File

@@ -14,44 +14,41 @@
} = $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 class="rounded-[20px] bg-[#A6D6B8]">
<div <div
class="grid h-[200px] place-items-center overflow-hidden rounded-[16px] bg-[#5CAF95]" class="grid h-[200px] place-items-center overflow-hidden rounded-[16px] bg-[#5CAF95]"
aria-label="Event banner" aria-label="Event banner"
> >
{#if thumbnail} {#if thumbnail}
<img class="h-full object-fill" src={thumbnail} alt="Event banner" /> <img class="h-full object-cover" src={thumbnail} alt="Event banner" />
{:else if eventCategory?.[0] === 'social'} {:else if eventCategory?.[0] === 'social'}
<img class="h-full object-fill" src="/Social.jpg" alt="Social Placeholder" /> <img class="h-full object-cover" src="/Social.jpg" alt="Social Placeholder" />
{:else if eventCategory?.[0] === 'technical'} {:else if eventCategory?.[0] === 'technical'}
<img class="h-full object-fill" src="/Technical.jpg" alt="Technical Placeholder" /> <img class="h-full object-cover" src="/Technical.jpg" alt="Technical Placeholder" />
{:else if eventCategory?.[0] === 'professional'} {:else if eventCategory?.[0] === 'professional'}
<img class="h-full w-full object-cover" src="/Professional.jpg" alt="Professional Placeholder" /> <img class="h-full object-cover" src="/Professional.jpg" alt="Professional Placeholder" />
{:else if eventCategory?.[0] === 'academic'} {:else if eventCategory?.[0] === 'academic'}
<img class="h-full object-fill" src="/Academic.jpg" alt="Academic Placeholder" /> <img class="h-full object-cover" src="/Academic.jpg" alt="Academic Placeholder" />
{:else} {:else}
<img class="h-full object-fill" src="/ECSESS.png" alt="Default Placeholder" /> <img class="h-full object-cover" src="/ECSESS.png" alt="Default Placeholder" />
{/if} {/if}
</div> </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="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]">
<CalendarDays class="shrink-0" strokeWidth={2.5} /> <CalendarDays class="shrink-0" strokeWidth={2.5} />

2
src/routes/events/+page.server.ts
View File

@@ -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,
}`; }`;