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(),
|
'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()
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
{#if member.photo}
|
<a href={member.link} target="_blank" rel="noopener noreferrer" class="team-member" role="listitem">
|
||||||
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
|
{#if member.photo}
|
||||||
{/if}
|
<img src={member.photo} alt={member.name} class="team-member-image" draggable="false" />
|
||||||
<h4 class="team-member-name">{member.name}</h4>
|
{/if}
|
||||||
<p class="team-member-title">{member.role}</p>
|
<h4 class="team-member-name">{member.name}</h4>
|
||||||
</div>
|
<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}
|
{/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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue