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(),
'role' => $file->role()->value(),
'photo' => $file->url(),
'link' => $file->link()->value() ?: null,
];
})->values()
];

View file

@ -107,6 +107,7 @@
<div class="team-carousel-container">
<div
class="team-grid"
role="list"
style="transform: translateX(-{carouselOffset}px)"
ontouchstart={(e) => { touchStartX = e.touches[0].clientX }}
ontouchend={(e) => {
@ -117,13 +118,23 @@
}}
>
{#each members as member}
<div class="team-member">
{#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>
</div>
{#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}
<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>
</div>
{/if}
{/each}
</div>
</div>
@ -297,7 +308,7 @@
transition: transform 0.3s ease;
}
.team-member:hover {
a.team-member:hover {
transform: translateY(-5px);
}
@ -310,7 +321,7 @@
transition: transform 0.3s ease;
}
.team-member-image:hover {
a.team-member .team-member-image:hover {
transform: scale(1.03);
}

View file

@ -21,7 +21,7 @@
})
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) {
@ -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_lastname')} bind:value={lastName} required />
</div>
<input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
<input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
<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} required />
<input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
<div class="hp" aria-hidden="true">