feat(about): team members cliquables si champ link rempli + fix ARIA warning
All checks were successful
Deploy / Deploy to Production (push) Successful in 19s
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:
parent
3499fd0d34
commit
e2df8d04e0
3 changed files with 24 additions and 12 deletions
|
|
@ -19,6 +19,7 @@ $specificData = [
|
|||
'name' => $file->memberName()->value(),
|
||||
'role' => $file->role()->value(),
|
||||
'photo' => $file->url(),
|
||||
'link' => $file->link()->value() ?: null,
|
||||
];
|
||||
})->values()
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue