Mathieu Benoit
8b69b63a32
The event screen showed its states and sections as flat button rows. A header card now carries the name, the counts and the fixed « Modifier » place; the four plan states read as steps; sections group into Préparer, Placer and Produire. A band under the app header states the mode edge to edge and names the command that leaves it; the mode frame stays around the work surface. A warning's action is no longer clipped. Checked: evenement node and browser tests, 7 mutations caught. --- FR --- [IMP] écran d'événement : carte d'en-tête, étapes, bande de mode, phases L'écran montrait ses états et ses sections en rangées de boutons plates. Une carte d'en-tête porte le nom, les comptes et la place fixe de « Modifier » ; les quatre états du plan se lisent en étapes ; les sections se groupent en Préparer, Placer et Produire. Une bande sous le bandeau dit le mode de bord à bord et nomme la commande qui en sort ; le cadre de mode reste autour de la surface. L'action d'un avertissement n'est plus rognée. Vérifié : node et navigateur, 7 mutations prises. Assisted-by: Claude Opus 5.5
61 lines
1.8 KiB
Svelte
61 lines
1.8 KiB
Svelte
<!-- © 2026 TechnoLibre (http://www.technolibre.ca)
|
|
License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl) -->
|
|
|
|
<script>
|
|
// L'en-tête de l'événement ouvert, en tête de la tête du cadre : son nom,
|
|
// puis, sur la même ligne tant qu'elle a la place, son résumé — la date
|
|
// quand il en a une, les participants, les tables et leurs sièges, les
|
|
// tours (resumeEvenement, modele.js) —, d'encre secondaire. Le nom se
|
|
// coupe où il le faut, même sans espace : un nom long de glyphes larges
|
|
// passe à la ligne au lieu d'élargir la page. Le résumé passe à la ligne
|
|
// entre ses éléments, jamais dans l'un d'eux.
|
|
import { getContext } from 'svelte';
|
|
import { resumeEvenement } from './modele.js';
|
|
|
|
const t = getContext('t');
|
|
const format = getContext('format');
|
|
const seance = getContext('seance');
|
|
|
|
const resume = $derived(resumeEvenement($seance));
|
|
</script>
|
|
|
|
<header class="entete">
|
|
<h1>{$seance.evenement?.nom}</h1>
|
|
{#if resume !== null}
|
|
<p class="resume">
|
|
{#if resume.date !== null}
|
|
<span>{format.date(resume.date)}</span>
|
|
{/if}
|
|
<span>{t('evenement.resume.participants', { participants: resume.participants })}</span>
|
|
<span>{t('evenement.resume.tables', { tables: resume.tables, sieges: resume.sieges })}</span>
|
|
<span>{t('evenement.resume.tours', { tours: resume.tours })}</span>
|
|
</p>
|
|
{/if}
|
|
</header>
|
|
|
|
<style>
|
|
.entete {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0 var(--espace-4);
|
|
}
|
|
|
|
h1 {
|
|
min-width: 0;
|
|
margin: 0;
|
|
font-size: var(--taille-titre-grand);
|
|
line-height: 1.15;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.resume {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 var(--espace-4);
|
|
margin: 0;
|
|
color: var(--couleur-page-texte-secondaire);
|
|
font-size: var(--taille-texte-petit);
|
|
}
|
|
</style>
|