Mathieu Benoit
8b0d5a9097
The 6 px mode frame around the event screen read as a dashed box that narrowed the work surface, and the screen stopped at the 87rem page width. The event screen now spans the window; the mode band under the app header, the header label and the pill beside « Modifier » carry the mode. The event list drops both « Collisions cumulées » columns, which repeated a measure the proposals screen already shows: 7 columns, not 9. Checked: node 4009, browser 872, long 105; full width at 1366 and 1920. --- FR --- [IMP] interface : événement pleine fenêtre, sans cadre, liste allégée Le cadre de mode de 6 px autour de l'écran d'événement se lisait comme un encadré pointillé qui rétrécissait la surface, et l'écran s'arrêtait à 87rem. L'écran de l'événement occupe la fenêtre ; la bande sous le bandeau, le libellé du bandeau et la pastille près de « Modifier » portent le mode. La liste des événements perd ses deux colonnes « Collisions cumulées », déjà montrées par les propositions : 7 colonnes au lieu de 9. Vérifié : node 4009, navigateur 872, long 105 ; pleine largeur à 1366 et 1920. Assisted-by: Claude Opus 5.5
81 lines
2.9 KiB
Svelte
81 lines
2.9 KiB
Svelte
<!-- © 2026 TechnoLibre (http://www.technolibre.ca)
|
|
License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl) -->
|
|
|
|
<script>
|
|
// La bande de mode (§ 8.4) : sous le bandeau, de bord à bord de la
|
|
// fenêtre, l'icône du mode, son libellé — celui du bandeau et de la barre
|
|
// de l'événement — en gras, puis la phrase qui dit ce que le mode permet
|
|
// et la commande qui en sort (bandeDeMode, modele.js). Avec ces deux
|
|
// libellés, elle porte seule le mode : aucun trait n'entoure la surface de
|
|
// travail.
|
|
//
|
|
// Son fond et son filet sont ceux du mode, son icône de la teinte du mode
|
|
// (--couleur-cadre-…), son texte de l'encre de la page (marques.js :
|
|
// bandeMode et les signes bandeLecture, bandeEcriture, bandeBloque).
|
|
// Région d'état, elle annonce le mode quand il change.
|
|
//
|
|
// Ses marges négatives valent le retrait de l'écran (App.svelte), que
|
|
// l'écran de l'événement garde à toute largeur de fenêtre sans être borné
|
|
// par --largeur-page : la bande touche le bandeau et va d'un bord à
|
|
// l'autre de la fenêtre, et son retrait intérieur, de même valeur, aligne
|
|
// son texte sur l'écran. Elle tient en une ligne aux largeurs usuelles, de
|
|
// même hauteur dans les trois modes : changer de mode ne déplace pas la
|
|
// place fixe de la barre, sous elle. Mince — une ligne de petit corps —,
|
|
// elle prend au plan à peine plus que le retrait de l'écran qu'elle
|
|
// remplace.
|
|
import { getContext } from 'svelte';
|
|
import Icone from '../primitives/Icone.svelte';
|
|
import { bandeDeMode } from './modele.js';
|
|
|
|
const t = getContext('t');
|
|
const seance = getContext('seance');
|
|
|
|
const bande = $derived(bandeDeMode($seance));
|
|
</script>
|
|
|
|
{#if bande !== null}
|
|
<div class="bande" class:ecriture={bande.mode === 'ecriture'} class:bloque={bande.mode === 'bloque'} role="status">
|
|
<span class="signe"><Icone nom={bande.icone} /></span>
|
|
<strong>{t(bande.cle)}</strong>
|
|
<span>{t(bande.explication)}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.bande {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--espace-1) var(--espace-2);
|
|
margin: calc(-1 * var(--espace-4)) calc(-1 * var(--espace-4)) 0;
|
|
padding: 0.0625rem var(--espace-4);
|
|
border-bottom: 1px solid var(--couleur-mode-lecture-filet);
|
|
background-color: var(--couleur-mode-lecture-fond);
|
|
color: var(--couleur-page-texte);
|
|
font-size: var(--taille-texte-petit);
|
|
}
|
|
|
|
.bande.ecriture {
|
|
border-bottom-color: var(--couleur-mode-ecriture-filet);
|
|
background-color: var(--couleur-mode-ecriture-fond);
|
|
}
|
|
|
|
.bande.bloque {
|
|
border-bottom-color: var(--couleur-mode-bloque-filet);
|
|
background-color: var(--couleur-mode-bloque-fond);
|
|
}
|
|
|
|
.signe {
|
|
display: flex;
|
|
color: var(--couleur-cadre-lecture);
|
|
}
|
|
|
|
.ecriture .signe {
|
|
color: var(--couleur-cadre-ecriture);
|
|
}
|
|
|
|
.bloque .signe {
|
|
color: var(--couleur-cadre-bloque);
|
|
}
|
|
</style>
|