studio-variable/world-game
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: WhitePaper — redesign layout + suppression préfixes wp-

Browse source 
- Nouveau layout desktop : flex row avec catch-area (label + titre) et form-area (formulaire)
- Mobile : height 100vh non-scrollable, overlay formulaire déclenché au clic
- Tablet : grid 2 colonnes
- Suppression des préfixes wp- sur toutes les classes (CSS scopé Svelte)
- white-paper.json.php : intro via ->inline() pour texte brut

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-18 18:48:50 +01:00
parent d4f05d6157
commit 974067d986
2 changed files with 203 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

2
site/templates/white-paper.json.php
View file

@ -2,7 +2,7 @@
$specificData = [
'published' => $page->published()->toDate('d/m/Y'),
'intro' => $page->intro()->value(),
'intro' => $page->intro()->inline()->value(),
'cover' => $page->cover()->toFile()?->url(),
'fileUrl' => $page->downloadFile()->toFile()?->url(),
];

306
src/views/WhitePaper.svelte
View file

@ -12,6 +12,7 @@
let consent = $state(false)
let submitting = $state(false)
let status = $state(null) // null | 'success' | 'error'
let showForm = $state(false)
async function handleSubmit(e) {
e.preventDefault()
@ -41,45 +42,57 @@
</script>
<div class="white-paper">
<!-- Left column -->
<div class="wp-left">
<div class="wp-content">
<p class="wp-label">{t('white_paper_label')}</p>
<h1 class="wp-title">{data.title}</h1>
<div class="catch-area">
<!-- Label — separate so form can align with title -->
<p class="label">{t('white_paper_label')}</p>
<!-- Title + description + mobile trigger -->
<div class="text">
<h1 class="title">{data.title}</h1>
{#if data.intro}
<p class="wp-description">{data.intro}</p>
<p class="description">{data.intro}</p>
{/if}
<button class="trigger button" onclick={() => showForm = true}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
</svg>
{t('wp_download')}
</button>
</div>
</div>
<!-- Cover image -->
{#if data.cover}
<img src={data.cover} alt={data.title} class="wp-cover" />
<img src={data.cover} alt={data.title} class="cover" />
{/if}
</div>
<!-- Right column: download form -->
<div class="wp-right">
<div class="wp-form-card">
<p class="wp-form-intro">{t('wp_form_intro')}</p>
<form class="wp-form" onsubmit={handleSubmit}>
<div class="wp-form-row">
<input class="wp-input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
<input class="wp-input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
<!-- Form area: right column on desktop, full-screen overlay on mobile -->
<div class="form-area" class:is-visible={showForm}>
<button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
<div class="form-card">
<p class="form-intro">{t('wp_form_intro')}</p>
<form class="form" onsubmit={handleSubmit}>
<div class="form-row">
<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="wp-input wp-input--full" type="text" placeholder={t('wp_company')} bind:value={company} required />
<input class="wp-input wp-input--full" type="text" placeholder={t('wp_role')} bind:value={role} required />
<input class="wp-input wp-input--full" type="email" placeholder={t('wp_email')} bind:value={email} required />
<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 />
<label class="wp-consent">
<label class="consent">
<input type="checkbox" bind:checked={consent} required />
<span>{t('wp_consent')}</span>
</label>
{#if status === 'success'}
<p class="wp-status wp-status--success">{t('wp_success')}</p>
<p class="status status--success">{t('wp_success')}</p>
{:else if status === 'error'}
<p class="wp-status wp-status--error">{t('wp_error')}</p>
<p class="status status--error">{t('wp_error')}</p>
{/if}
<button type="submit" class="wp-submit button" disabled={submitting || !consent}>
<button type="submit" class="submit button" disabled={submitting || !consent}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
@ -93,82 +106,89 @@
<style>
.white-paper {
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
padding-top: 8vh;
}
/* --- Left --- */
.wp-left {
position: relative;
color: var(--color-text);
padding: 8rem 5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 4rem 3rem 0 8vw;
overflow: hidden;
column-gap: 5rem;
}
.wp-content {
position: relative;
z-index: 1;
.catch-area {
width: min(100%, 45vw);
}
.wp-label {
.label {
margin-bottom: 1rem;
align-self: end;
font-family: "Terminal", sans-serif;
font-size: var(--font-size-paragraph);
color: var(--color-primary);
text-transform: uppercase;
margin-bottom: 1.5rem;
z-index: 1;
}
.wp-title {
font-family: "Terminal", sans-serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
/* ── Title + description + mobile trigger ── */
.text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
z-index: 1;
}
.title {
font-family: "Danzza bold", sans-serif;
font-size: var(--font-size-title-main);
font-weight: 400;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 2rem;
max-width: 600px;
}
.wp-description {
.description {
font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph);
line-height: 1.6;
opacity: 0.8;
max-width: 480px;
}
.wp-cover {
position: absolute;
bottom: -5%;
left: 3rem;
width: 55%;
max-width: 380px;
/* Mobile trigger: hidden on desktop */
.trigger {
display: none;
align-items: center;
gap: 0.5rem;
}
.cover {
align-self: start;
width: 100%;
height: auto;
object-fit: contain;
pointer-events: none;
z-index: 0;
}
/* --- Right --- */
.wp-right {
/* ── Form area: desktop — right column ── */
.form-area {
margin-top: 2rem;
width: min(100%, 30vw);
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
padding: 2rem 6vw 2rem 2rem;
z-index: 2;
}
.wp-form-card {
/* Close button: hidden on desktop */
.form-close {
display: none;
}
.form-card {
background: #0b0b18;
border-radius: 4px;
padding: 2.5rem;
width: 100%;
max-width: 500px;
}
.wp-form-intro {
.form-intro {
font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph);
line-height: 1.5;
@ -176,19 +196,19 @@
margin-bottom: 2rem;
}
.wp-form {
.form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.wp-form-row {
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.wp-input {
.input {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
@ -199,16 +219,16 @@
transition: border-color 0.2s;
}
.wp-input:focus {
.input:focus {
outline: none;
border-color: var(--color-primary);
}
.wp-input::placeholder {
.input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.wp-consent {
.consent {
display: flex;
align-items: flex-start;
gap: 0.75rem;
@ -216,7 +236,7 @@
margin-top: 0.5rem;
}
.wp-consent input[type="checkbox"] {
.consent input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
@ -225,94 +245,168 @@
cursor: pointer;
}
.wp-consent span {
.consent span {
font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph-small);
color: rgba(255, 255, 255, 0.75);
line-height: 1.4;
}
.wp-submit {
.submit {
margin-top: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
align-self: flex-start;
width: 100%;
justify-content: center;
}
.wp-submit:disabled {
.submit:disabled {
opacity: 0.5;
cursor: default;
}
.wp-status {
.status {
padding: 0.5rem 0.75rem;
font-family: "Danzza", sans-serif;
font-size: var(--font-size-paragraph-small);
border-radius: 2px;
}
.wp-status--success {
.status--success {
background: rgba(4, 254, 160, 0.15);
color: var(--color-primary);
}
.wp-status--error {
.status--error {
background: rgba(255, 107, 107, 0.15);
color: #ff6b6b;
}
/* --- Mobile --- */
/* ── Mobile ── */
@media (max-width: 700px) {
.white-paper {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
height: auto;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
padding: 6vh 1.25rem 0;
position: relative;
}
.label {
font-size: var(--font-size-paragraph-small);
text-align: center;
margin-bottom: 1rem;
}
.text {
flex: 1;
align-items: center;
text-align: center;
gap: 1rem;
overflow: hidden;
}
.title {
font-size: clamp(2rem, 10vw, 3.5rem);
}
.description {
max-width: 100%;
font-size: var(--font-size-paragraph-small);
}
.trigger {
display: flex;
width: 100%;
justify-content: center;
margin-top: auto;
}
.cover {
position: absolute;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
width: 75%;
max-width: 300px;
z-index: 0;
pointer-events: none;
}
/* Form overlay */
.form-area {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: #0b0b18;
flex-direction: column;
padding: 1.5rem 1.25rem;
overflow-y: auto;
padding-top: 6vh;
}
.wp-left {
padding: 2rem 1.25rem 0;
min-height: 300px;
.form-area.is-visible {
display: flex;
}
.wp-cover {
position: static;
width: 60%;
margin: 2rem auto 0;
.form-close {
display: block;
align-self: flex-end;
background: none;
border: none;
color: #fff;
font-size: 1.25rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
margin-bottom: 1rem;
}
.wp-right {
padding: 2rem 1.25rem;
.form-card {
background: none;
padding: 0;
flex: 1;
}
.wp-form-card {
padding: 1.5rem;
}
.wp-form-row {
grid-template-columns: 1fr;
.submit {
margin-top: auto;
}
}
/* --- Tablet --- */
/* ── Tablet ── */
@media (min-width: 701px) and (max-width: 912px) {
.white-paper {
grid-template-columns: 1fr;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
height: auto;
overflow-y: auto;
height: 100vh;
padding: 6vh 2rem 2rem;
gap: 1rem 2rem;
}
.wp-left {
padding: 3rem 2rem 0;
min-height: 250px;
.label {
grid-column: 1;
grid-row: 1;
}
.wp-right {
padding: 2rem;
.text {
grid-column: 1;
grid-row: 2;
}
.cover {
display: none;
}
.form-area {
grid-column: 2;
grid-row: 1 / span 2;
align-items: flex-start;
}
.trigger {
display: none;
}
}
</style>