forked from yvv/decision
Fusion du lot H : l'accueil sous la voûte (les trois points sous l'arche, boîte à outils en tête ; titre centré en deux lignes)
Boucle verte dans la copie du lot (48529e5) : fmt, clippy, 237 tests Rust,
svelte-check 0/0, 55 vitest, build, e2e 35 / 35.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
+72
-1
@@ -1,4 +1,4 @@
|
||||
import type { Browser, Page } from '@playwright/test';
|
||||
import { expect, type Browser, type Page } from '@playwright/test';
|
||||
|
||||
export const DOC = '/g/monnaie-libre/docs/acte-engagement-certification';
|
||||
export const TEST_DOC = '/g/essai/docs/acte-engagement-certification';
|
||||
@@ -138,3 +138,74 @@ export async function chain(page: Page, docPath = DOC) {
|
||||
(await page.request.post(`${base}/control/${what}`)).json(),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The welcome (Yvv, 2026-11-02), in French: the keystone arch shelters the three points, the
|
||||
* toolbox first, each centred under the keystone in the opening; then the title, centred, on
|
||||
* two lines broken after « possible ». Nothing tilted, nothing past the edges of the screen.
|
||||
* Measured once the arch has settled (its entrance done).
|
||||
*/
|
||||
export async function expectWelcome(page: Page) {
|
||||
await expect(page.locator('.vault .leitmotiv li')).toHaveText(['boîte à outils', 'contexte et cadrage', 'processus et modalités']);
|
||||
const h1 = page.getByRole('heading', { level: 1 });
|
||||
await expect(h1).toHaveText('Rendre possible la décision collective');
|
||||
await expect(h1.locator('.line')).toHaveText(['Rendre possible', 'la décision collective']);
|
||||
const m = await page.evaluate(async () => {
|
||||
const intro = document.querySelector('.intro')!;
|
||||
await Promise.all(intro.getAnimations({ subtree: true }).map((a) => a.finished));
|
||||
const text = (el: Element) => {
|
||||
const r = document.createRange();
|
||||
r.selectNodeContents(el);
|
||||
return { box: r.getBoundingClientRect(), rects: r.getClientRects().length };
|
||||
};
|
||||
const v = document.querySelector('.vault')!.getBoundingClientRect();
|
||||
// The arch in its own units: 92 wide (x from −46), the top of the keystone at y = −40.
|
||||
const u = v.width / 92;
|
||||
const at = (x: number, y: number) => ({ x: v.left + (x + 46) * u, y: v.top + (y + 40) * u });
|
||||
const points = [...document.querySelectorAll('.leitmotiv li')].map((li) => {
|
||||
const { box, rects } = text(li);
|
||||
// Back into the arch's units, from its axis and its springing line (y = 0).
|
||||
return { rects, left: (box.left - at(0, 0).x) / u, right: (box.right - at(0, 0).x) / u, top: (box.top - at(0, 0).y) / u, bottom: (box.bottom - at(0, 0).y) / u };
|
||||
});
|
||||
const h = document.querySelector('h1')!.getBoundingClientRect();
|
||||
const lines = [...document.querySelectorAll('h1 .line')].map((l) => ({ ...text(l), block: l.getBoundingClientRect() }));
|
||||
const tilted = [document.querySelector('.vault svg')!, ...document.querySelectorAll('.vault svg path')]
|
||||
.flatMap((n) => {
|
||||
const out: string[] = [];
|
||||
for (let e: Element | null = n; e && e !== document.body; e = e.parentElement) {
|
||||
const cs = getComputedStyle(e);
|
||||
const flat = cs.transform === 'none' || /^matrix\(1, 0, 0, 1, /.test(cs.transform);
|
||||
if (!flat || (cs.rotate && cs.rotate !== 'none')) out.push(`${e.tagName} ${cs.transform} ${cs.rotate}`);
|
||||
}
|
||||
return out;
|
||||
});
|
||||
return {
|
||||
overflow: document.documentElement.scrollWidth - innerWidth,
|
||||
axis: v.left + v.width / 2,
|
||||
vaultBottom: v.bottom,
|
||||
points,
|
||||
title: { top: h.top, axis: h.left + h.width / 2 },
|
||||
lines: lines.map(({ box, rects, block }) => ({ rects, top: block.top, bottom: block.bottom, axis: box.left + box.width / 2 })),
|
||||
tilted,
|
||||
};
|
||||
});
|
||||
expect(m.overflow, 'nothing past the edge of the screen').toBeLessThanOrEqual(0);
|
||||
expect(m.tilted, 'the arch is never tilted').toEqual([]);
|
||||
// The three points: one line each, top to bottom, centred on the axis, under the keystone (its
|
||||
// foot at y = −19), between the imposts (x = ±19) and above the slab (y = 15.6); a line that
|
||||
// rises above the springing line stays clear of the voussoirs, closer in there (x = ±17).
|
||||
for (const [i, p] of m.points.entries()) {
|
||||
expect(p.rects, `point ${i}: one line`).toBe(1);
|
||||
expect(Math.abs((p.left + p.right) / 2), `point ${i}: centred`).toBeLessThan(0.3);
|
||||
expect(p.top, `point ${i}: under the keystone`).toBeGreaterThan(-19);
|
||||
expect(p.bottom, `point ${i}: above the slab`).toBeLessThan(15.6);
|
||||
expect(p.right, `point ${i}: in the opening`).toBeLessThan(p.top < 0 ? 17 : 19);
|
||||
if (i > 0) expect(p.top, `point ${i}: under the one before`).toBeGreaterThan(m.points[i - 1]!.top);
|
||||
}
|
||||
// The title: under the arch, centred on its axis, two lines of one line each.
|
||||
expect(m.title.top).toBeGreaterThanOrEqual(m.vaultBottom);
|
||||
expect(Math.abs(m.title.axis - m.axis)).toBeLessThan(1);
|
||||
expect(m.lines.map((l) => l.rects)).toEqual([1, 1]);
|
||||
expect(m.lines[1]!.top).toBeGreaterThanOrEqual(m.lines[0]!.bottom - 1);
|
||||
for (const l of m.lines) expect(Math.abs(l.axis - m.axis)).toBeLessThan(1);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { expect, test, type Locator } from '@playwright/test';
|
||||
import { DOC, shot, signIn } from './helpers';
|
||||
import { DOC, expectWelcome, shot, signIn } from './helpers';
|
||||
|
||||
/** WCAG contrast ratio of two CSS colours `rgb(r, g, b)`. */
|
||||
function contrast(a: string, b: string): number {
|
||||
@@ -25,13 +25,19 @@ async function backdrop(el: Locator): Promise<string> {
|
||||
});
|
||||
}
|
||||
|
||||
test('M1 — mobile : logo dans la barre, menu en tiroir, vote déplié, panier, réglages lisibles, pastilles au clavier', async ({ page }) => {
|
||||
test('M1 — mobile : logo dans la barre, l’accueil sous la voûte, menu en tiroir, vote déplié, panier, réglages lisibles, pastilles au clavier', async ({ page }) => {
|
||||
await signIn(page, 'Chiara');
|
||||
await page.goto('/');
|
||||
const brand = page.locator('header.topbar a.brand');
|
||||
await expect(brand).toHaveAccessibleName('libreDecision');
|
||||
await expect(brand.locator('svg')).toBeVisible();
|
||||
await expect(page.locator('a.root')).toContainText('Monnaie libre');
|
||||
// The welcome on this phone, then on a narrow one (360): the arch still shelters the three points.
|
||||
await expectWelcome(page);
|
||||
const size = page.viewportSize();
|
||||
await page.setViewportSize({ width: 360, height: 780 });
|
||||
await expectWelcome(page);
|
||||
if (size) await page.setViewportSize(size);
|
||||
await page.goto(DOC);
|
||||
await page.getByRole('button', { name: 'Menu' }).click();
|
||||
const drawer = page.getByRole('dialog', { name: 'Boîte à outils' });
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
import { BOB, DOC, person, signIn, TEST_DOC, wallet } from './helpers';
|
||||
import { BOB, DOC, expectWelcome, person, signIn, TEST_DOC, wallet } from './helpers';
|
||||
|
||||
test('C1 — l’accueil sans session : le titre, le leitmotiv en trois lignes, la connexion, le menu complet', async ({ page }) => {
|
||||
test('C1 — l’accueil sans session : la voûte abrite les trois points, le titre centré en deux lignes, la connexion, le menu complet', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await expect(page.getByRole('heading', { level: 1 })).toHaveText('Rendre possible la décision collective');
|
||||
await expect(page.locator('.leitmotiv li')).toHaveText(['contexte et cadrage', 'processus et modalités', 'boîte à outils']);
|
||||
await expectWelcome(page);
|
||||
const nav = page.getByRole('navigation', { name: 'Boîte à outils' });
|
||||
for (const item of ['Décisions', 'Docs de référence', 'Mandats', 'Protocoles']) {
|
||||
await expect(nav.locator('.tool', { hasText: item })).toBeVisible();
|
||||
|
||||
@@ -30,7 +30,8 @@ export const en: Messages = {
|
||||
'nav.menu': 'Menu',
|
||||
'nav.close': 'Close',
|
||||
|
||||
'home.title': 'Making collective decisions possible',
|
||||
'home.title.line1': 'Making it possible',
|
||||
'home.title.line2': 'to decide together',
|
||||
'home.leitmotiv.context': 'context and framing',
|
||||
'home.leitmotiv.process': 'processes and methods',
|
||||
'home.leitmotiv.tools': 'a toolbox',
|
||||
|
||||
@@ -30,7 +30,8 @@ export const es: Messages = {
|
||||
'nav.menu': 'Menú',
|
||||
'nav.close': 'Cerrar',
|
||||
|
||||
'home.title': 'Hacer posible la decisión colectiva',
|
||||
'home.title.line1': 'Hacer posible',
|
||||
'home.title.line2': 'la decisión colectiva',
|
||||
'home.leitmotiv.context': 'contexto y encuadre',
|
||||
'home.leitmotiv.process': 'procesos y modalidades',
|
||||
'home.leitmotiv.tools': 'caja de herramientas',
|
||||
|
||||
@@ -33,7 +33,9 @@ export const fr = {
|
||||
'nav.menu': 'Menu',
|
||||
'nav.close': 'Fermer',
|
||||
|
||||
'home.title': 'Rendre possible la décision collective',
|
||||
// The title on two lines, the break after « possible » (Yvv, 2026-11-02): one key per line.
|
||||
'home.title.line1': 'Rendre possible',
|
||||
'home.title.line2': 'la décision collective',
|
||||
'home.leitmotiv.context': 'contexte et cadrage',
|
||||
'home.leitmotiv.process': 'processus et modalités',
|
||||
'home.leitmotiv.tools': 'boîte à outils',
|
||||
|
||||
+121
-39
@@ -1,17 +1,28 @@
|
||||
<script lang="ts">
|
||||
// The welcome (Yvv, 2026-11-02): the keystone arch, large enough to shelter the three points of
|
||||
// the leitmotiv, the toolbox first; then the title, centred, broken after « possible ».
|
||||
import sign from '$lib/assets/cle-de-voute.svg?raw';
|
||||
import GroupChoice from '$lib/components/GroupChoice.svelte';
|
||||
import { t } from '$lib/i18n/index.svelte';
|
||||
import { session } from '$lib/session.svelte';
|
||||
|
||||
const LEITMOTIV = ['home.leitmotiv.tools', 'home.leitmotiv.context', 'home.leitmotiv.process'] as const;
|
||||
</script>
|
||||
|
||||
<div class="home">
|
||||
<header class="intro">
|
||||
<h1>{t('home.title')}</h1>
|
||||
<ul class="leitmotiv">
|
||||
<li>{t('home.leitmotiv.context')}</li>
|
||||
<li>{t('home.leitmotiv.process')}</li>
|
||||
<li>{t('home.leitmotiv.tools')}</li>
|
||||
</ul>
|
||||
<div class="vault">
|
||||
<span class="sign" aria-hidden="true">{@html sign}</span>
|
||||
<ul class="leitmotiv">
|
||||
{#each LEITMOTIV as key, i (key)}
|
||||
<li style:--i={i}>{t(key)}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
<h1>
|
||||
<span class="line">{t('home.title.line1')}</span>
|
||||
<span class="line">{t('home.title.line2')}</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{#if session.me}
|
||||
@@ -28,56 +39,127 @@
|
||||
.home {
|
||||
max-width: 44rem;
|
||||
margin: 0 auto;
|
||||
padding: clamp(3rem, 10vh, 6.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
|
||||
padding: clamp(2rem, 7vh, 4.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
|
||||
display: grid;
|
||||
gap: clamp(2.4rem, 6vh, 3.6rem);
|
||||
}
|
||||
.intro h1 {
|
||||
font-family: var(--font-text);
|
||||
font-weight: 500;
|
||||
font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.08;
|
||||
font-variation-settings: 'opsz' 72;
|
||||
max-width: 15ch;
|
||||
text-wrap: balance;
|
||||
|
||||
/* The arch, drawn by the sign of the logo (stones in the ink of the mood, the keystone in
|
||||
`--cle`), never tilted. Its box is the stone itself: 92 units wide (the base slab, x from
|
||||
−46 to 46) and 59 high (y from −40, the top of the keystone, to 19, under the slab); the SVG's
|
||||
own 3-unit margin spills out above and below (clipped on the sides, where it is empty). On a
|
||||
phone the arch reaches into the side padding, 0.75rem short of the screen's edges, so that the
|
||||
opening keeps as much room as it can. */
|
||||
.vault {
|
||||
--w: min(34rem, 100vw - 1.5rem);
|
||||
container-type: inline-size;
|
||||
position: relative;
|
||||
width: var(--w);
|
||||
margin-inline: calc(50% - var(--w) / 2);
|
||||
aspect-ratio: 92 / 59;
|
||||
overflow-x: clip;
|
||||
color: var(--ink);
|
||||
}
|
||||
/* The leitmotiv: three lines, each set on a small stone of the keystone's colour. */
|
||||
.sign {
|
||||
position: absolute;
|
||||
inset: calc(-300% / 59) calc(-300% / 92);
|
||||
}
|
||||
.sign :global(svg) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* The light under the vault: the opening (x from −18.5 to 18.5, from the keystone down to the
|
||||
slab), its top a half circle, washed with the keystone's colour. */
|
||||
.vault::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: calc(2150% / 59) calc(2750% / 92) calc(340% / 59);
|
||||
border-radius: 50% 50% 0 0 / 54.25% 54.25% 0 0;
|
||||
background: radial-gradient(
|
||||
ellipse 75% 62% at 50% 60%,
|
||||
color-mix(in srgb, var(--cle) 12%, transparent),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* The three points, sheltered: centred in the opening (x from −19 to 19; a band from y = −19,
|
||||
under the keystone, to 19, centred on the springing line y = 0), one line each. The type
|
||||
follows the arch (cqi): the longest line of the three languages, 10.5 em (es), holds in the
|
||||
38 units of the opening with room to spare. On a phone the italic is small (12px at 360):
|
||||
its advances are kept exact, not rounded to the pixel, or the letters drift apart
|
||||
(« pr ocessus ») and the word spaces close up. */
|
||||
.leitmotiv {
|
||||
list-style: none;
|
||||
margin: 1.4rem 0 0;
|
||||
position: absolute;
|
||||
inset: calc(2100% / 59) calc(2700% / 92) 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 0.2em;
|
||||
font-family: var(--font-text);
|
||||
font-style: italic;
|
||||
font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
|
||||
line-height: 1.45;
|
||||
font-size: 3.55cqi;
|
||||
line-height: 1.3;
|
||||
color: var(--ink-soft);
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
.leitmotiv li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.7rem;
|
||||
|
||||
.intro h1 {
|
||||
margin-top: clamp(1.4rem, 4vh, 2.4rem);
|
||||
font-family: var(--font-text);
|
||||
font-weight: 500;
|
||||
font-size: min(3.3rem, 8.6vw);
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.1;
|
||||
font-variation-settings: 'opsz' 72;
|
||||
text-align: center;
|
||||
}
|
||||
.leitmotiv li::before {
|
||||
content: '';
|
||||
flex: none;
|
||||
width: 0.62em;
|
||||
height: 0.34em;
|
||||
border-radius: 0.1em;
|
||||
background: var(--cle);
|
||||
opacity: 0.75;
|
||||
translate: 0 -0.12em;
|
||||
.line {
|
||||
display: block;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.enter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.6rem 1.2rem;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
.enter .btn {
|
||||
min-height: 2.75rem;
|
||||
padding-inline: 1.4rem;
|
||||
}
|
||||
.enter p {
|
||||
font-size: 0.9rem;
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
/* The keystone sets the arch, then the three points come under it. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.sign :global(path[fill^='var(--cle']) {
|
||||
transform-box: fill-box;
|
||||
animation: settle 0.7s var(--ease) 0.1s backwards;
|
||||
}
|
||||
.leitmotiv li {
|
||||
animation: appear 0.6s var(--ease) backwards;
|
||||
animation-delay: calc(0.55s + var(--i) * 0.12s);
|
||||
}
|
||||
}
|
||||
@keyframes settle {
|
||||
from {
|
||||
transform: translateY(-40%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes appear {
|
||||
from {
|
||||
transform: translateY(0.4em);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user