feat(about): team members cliquables si champ link rempli + fix ARIA warning
All checks were successful
Deploy / Deploy to Production (push) Successful in 19s

closes #3

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-21 09:28:36 +01:00
parent 3499fd0d34
commit e2df8d04e0
3 changed files with 24 additions and 12 deletions

View file

@ -19,6 +19,7 @@ $specificData = [
'name' => $file->memberName()->value(), 'name' => $file->memberName()->value(),
'role' => $file->role()->value(), 'role' => $file->role()->value(),
'photo' => $file->url(), 'photo' => $file->url(),
'link' => $file->link()->value() ?: null,
]; ];
})->values() })->values()
]; ];

View file

@ -107,6 +107,7 @@
<div class="team-carousel-container"> <div class="team-carousel-container">
<div <div
class="team-grid" class="team-grid"
role="list"
style="transform: translateX(-{carouselOffset}px)" style="transform: translateX(-{carouselOffset}px)"
ontouchstart={(e) => { touchStartX = e.touches[0].clientX }} ontouchstart={(e) => { touchStartX = e.touches[0].clientX }}
ontouchend={(e) => { ontouchend={(e) => {
@ -117,13 +118,23 @@
}} }}
> >
{#each members as member} {#each members as member}
<div class="team-member"> {#if member.link}
<a href={member.link} target="_blank" rel="noopener noreferrer" class="team-member" role="listitem">
{#if member.photo}
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
{/if}
<h4 class="team-member-name">{member.name}</h4>
<p class="team-member-title">{member.role}</p>
</a>
{:else}
<div class="team-member" role="listitem">
{#if member.photo} {#if member.photo}
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" /> <img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
{/if} {/if}
<h4 class="team-member-name">{member.name}</h4> <h4 class="team-member-name">{member.name}</h4>
<p class="team-member-title">{member.role}</p> <p class="team-member-title">{member.role}</p>
</div> </div>
{/if}
{/each} {/each}
</div> </div>
</div> </div>
@ -297,7 +308,7 @@
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.team-member:hover { a.team-member:hover {
transform: translateY(-5px); transform: translateY(-5px);
} }
@ -310,7 +321,7 @@
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.team-member-image:hover { a.team-member .team-member-image:hover {
transform: scale(1.03); transform: scale(1.03);
} }

View file

@ -21,7 +21,7 @@
}) })
let isDownloadable = $derived.by(() => { let isDownloadable = $derived.by(() => {
return firstName.length > 0 && lastName.length > 0 && email.length > 0 && isEmailValid && consent return firstName.length > 0 && lastName.length > 0 && company.length > 0 && role.length > 0 && email.length > 0 && isEmailValid && consent
}) })
async function handleSubmit(e) { async function handleSubmit(e) {
@ -93,8 +93,8 @@
<input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required /> <input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
<input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required /> <input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
</div> </div>
<input class="input" type="text" placeholder={t('wp_company')} bind:value={company} /> <input class="input" type="text" placeholder={t('wp_company')} bind:value={company} required />
<input class="input" type="text" placeholder={t('wp_role')} bind:value={role} /> <input class="input" type="text" placeholder={t('wp_role')} bind:value={role} required />
<input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required /> <input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
<div class="hp" aria-hidden="true"> <div class="hp" aria-hidden="true">