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

Remove format.ts and changes the layout to fit on small and big screens

Browse Source
This commit is contained in:
Antoine Phan
2026-02-09 14:45:23 -05:00
parent 343713bd19
commit c2b2b7bff1
5 changed files with 79 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.css
View File

@@ -46,6 +46,17 @@
transform: rotateY(2.4deg);
}
}
--animate-pulse-ring: pulse-ring 1.5s ease-in-out infinite;
@keyframes pulse-ring {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
}
* {

2
src/components/council/CouncilAvatar.svelte
View File

@@ -17,7 +17,7 @@
</script>
<div
class="bg-ecsess-600/50 relative aspect-square size-20 overflow-hidden rounded-full sm:size-24"
class="bg-ecsess-600 relative aspect-square size-24 overflow-hidden rounded-full sm:size-24"
>
{#if src && !imageError}
<img

56
src/components/council/CouncilCard.svelte
View File

@@ -1,60 +1,80 @@
<script lang="ts">
let { onViewProfile, name, position, image, featured = false, tag = null } = $props();
import { getInitials } from '$lib/format';
function getInitials(n: string | null | undefined): string {
if (n == null || typeof n !== 'string') return '';
return n
.trim()
.split(/\s+/)
.filter(Boolean)
.slice(0, 3)
.map((w) => w.charAt(0).toUpperCase())
.join('');
}
let imageError = $state(false);
function handleImageError() {
imageError = true;
}
</script>
<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
<article
class="group bg-ecsess-800 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 grid h-full min-w-0 cursor-pointer grid-rows-[auto_1fr] overflow-hidden rounded-xl shadow-md ring-2 ring-offset-2 transition-all duration-500 ease-out focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl {featured
? 'w-full max-w-56 sm:max-w-64'
: 'w-full max-w-56 sm:max-w-64'}"
<!-- Wrapper: card + ring layer (ring pulses on small screen only) -->
<div class="relative w-full max-w-full sm:contents">
<div
class="group relative flex h-full min-w-0 cursor-pointer flex-row overflow-hidden rounded-xl shadow-md transition-all duration-500 ease-out sm:grid sm:grid-rows-[auto_1fr] {featured
? 'w-full sm:max-w-64 md:max-w-[13.6rem] lg:max-w-72'
: 'w-full sm:max-w-64 md:max-w-[13.6rem] lg:max-w-72'} bg-ecsess-800 ring-0 ring-offset-0 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl sm:ring-2 sm:ring-offset-2"
role="button"
tabindex="0"
onclick={onViewProfile}
onkeydown={(e) =>
e.key === 'Enter' || e.key === ' ' ? (e.preventDefault(), onViewProfile()) : null}
>
<div
class="bg-ecsess-700 relative flex aspect-square min-h-0 w-full items-center justify-center overflow-hidden"
>
{#if tag}
<span
class="bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60 absolute top-2 right-2 z-1 rounded-md px-2 py-1 text-xs font-semibold tracking-wide uppercase shadow-md ring-1"
class="absolute top-2 right-2 z-10 rounded-md px-2 py-1 text-xs font-semibold uppercase tracking-wide shadow-md ring-1 bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60"
>
{tag}
</span>
{/if}
<!-- Picture section: fills entire area, image covers it -->
<div
class="relative flex min-w-20 shrink-0 items-center justify-center overflow-hidden rounded-l-xl bg-ecsess-700 aspect-square sm:min-w-0 sm:w-full sm:rounded-none"
>
{#if image && !imageError}
<img
src={image}
alt={`Profile picture of ${name} for the position of ${position}`}
class="h-full w-full object-cover object-center"
class="size-full object-cover object-center"
onerror={handleImageError}
/>
{:else}
<span class="text-ecsess-150 text-4xl font-bold sm:text-5xl" aria-hidden="true">
<span class="text-ecsess-150 text-2xl font-bold sm:text-5xl" aria-hidden="true">
{getInitials(name)}
</span>
{/if}
</div>
<div
class="flex flex-col items-center justify-center gap-2 px-2 py-3 text-center sm:px-3 sm:py-4"
class="flex min-w-0 flex-1 flex-col justify-center gap-1 px-3 py-2 text-left sm:items-center sm:justify-center sm:gap-2 sm:px-3 sm:py-4 sm:text-center"
>
<h3 class="text-ecsess-50 line-clamp-2 w-full text-base leading-tight font-bold sm:text-lg">
<h3 class="w-full text-lg font-bold leading-tight text-ecsess-50 line-clamp-2 sm:text-lg">
{name}
</h3>
<p class="text-ecsess-200 line-clamp-2 w-full text-xs italic sm:text-sm">{position}</p>
<p class="w-full text-xs italic text-ecsess-200 line-clamp-2 sm:text-sm">{position}</p>
<button
type="button"
class="bg-ecsess-500 text-ecsess-950 hover:bg-ecsess-400 hover:text-ecsess-50 focus:ring-ecsess-300 focus:ring-offset-ecsess-800 mt-1 w-full cursor-pointer rounded-lg px-3 py-2 text-xs font-semibold shadow-md transition focus:ring-2 focus:ring-offset-2 focus:outline-none sm:text-sm lg:hidden"
class="mt-1 hidden w-full rounded-lg bg-ecsess-500 px-3 py-2 text-xs font-semibold text-ecsess-950 shadow-md transition focus:ring-2 focus:ring-ecsess-300 focus:ring-offset-2 focus:ring-offset-ecsess-800 focus:outline-none hover:bg-ecsess-400 hover:text-ecsess-50 sm:mt-1 sm:block lg:hidden"
>
View profile
</button>
</div>
</article>
</div>
<!-- Small screen only: pulsing ring (opacity only), not the card -->
<div
class="absolute inset-0 pointer-events-none rounded-xl ring-2 ring-ecsess-400/60 ring-offset-2 ring-offset-ecsess-900 animate-pulse-ring sm:hidden"
aria-hidden="true"
></div>
</div>

7
src/components/council/CouncilCardPopUp.svelte
View File

@@ -9,8 +9,13 @@
onClose,
id = 'popup-title'
} = $props();
import { getInitials } from '$lib/format';
import { Mail, X } from '@lucide/svelte';
function getInitials(name: string | null | undefined): string {
if (name == null || typeof name !== 'string') return '';
const words = name.trim().split(/\s+/).filter(Boolean);
return words.slice(0, 3).map((w) => w.charAt(0).toUpperCase()).join('');
}
import { scale } from 'svelte/transition';
let imageError = $state(false);

13
src/lib/format.ts
View File

@@ -1,13 +0,0 @@
/**
* Get initials from a name (e.g. "Jane Doe" → "JD", "Mary Jane Watson" → "MJW").
* Uses first letter of up to 3 words. Safe for null/undefined/empty.
*/
export function getInitials(name: string | null | undefined): string {
if (name == null || typeof name !== 'string') return '';
const words = name.trim().split(/\s+/).filter(Boolean);
if (words.length === 0) return '';
return words
.slice(0, 3)
.map((w) => w.charAt(0).toUpperCase())
.join('');
}