Écrans des leçons, carte de l'accueil et adresses #/lecons
Liste des leçons, écrans d'une leçon sur le moteur d'écrans du tutoriel, carte « prochaine leçon » de l'accueil, ligne du menu. Tests du contenu sur le vrai moteur, scénario Gherkin, test navigateur. Amendement de l'ADR 0013 ; 1g faite, plan clos. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
e9ef965438
commit
0493858c1a
+189
-3
@@ -1849,6 +1849,191 @@ html.bare .topbar {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Leçons (1g) : la liste (#/lecons) et la carte « prochaine leçon » de
|
||||
* l'accueil (docs/identite/charte/ecrans-etape-1.md, « 1g. Leçons »). */
|
||||
.lessons {
|
||||
max-width: var(--page-width);
|
||||
margin: 0 auto;
|
||||
padding-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.lessons-intro {
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.lessons-intro h2 {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.lessons-intro p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lessons-rules {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.lessons-rules a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
margin-left: var(--space-1);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#lessons-status:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lesson-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin: var(--space-2) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.lesson-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.lesson-card.current {
|
||||
border: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.lesson-card-top {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lesson-card-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.lesson-card-title {
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lesson-card-state {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.lesson-card-state.done {
|
||||
color: var(--verdict-good);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* La pastille ronde au numéro : contour pour une leçon à commencer, brique
|
||||
* pour la leçon proposée, verte une fois terminée. */
|
||||
.lesson-badge {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
border: 2px solid var(--border-strong);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.lesson-badge.current {
|
||||
color: var(--on-accent);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.lesson-badge.done {
|
||||
color: var(--on-accent);
|
||||
background: var(--verdict-good);
|
||||
border-color: var(--verdict-good);
|
||||
}
|
||||
|
||||
/* La barre de progression : un segment par exercice. */
|
||||
.lesson-progress {
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: var(--space-1);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.lesson-progress .segment {
|
||||
display: block;
|
||||
height: 6px;
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.lesson-progress .segment.done {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.lesson-card-action {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.home-lesson {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.home-lesson-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.home-lesson-info .muted {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.home-lesson-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-lesson-actions .button {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.home-lessons-link {
|
||||
display: inline-flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Feuille d'installation. */
|
||||
.sheet-head .install-symbol {
|
||||
width: 40px;
|
||||
@@ -1909,7 +2094,8 @@ html.bare .topbar {
|
||||
.tutorial-progress {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
grid-auto-flow: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
@@ -1966,7 +2152,7 @@ html.bare .topbar {
|
||||
}
|
||||
}
|
||||
|
||||
#tutorial-replay {
|
||||
.tutorial-board-box .tutorial-replay {
|
||||
position: absolute;
|
||||
right: var(--space-1);
|
||||
bottom: calc(-44px - var(--space-1));
|
||||
@@ -2119,7 +2305,7 @@ html.landscape .tutorial-board {
|
||||
background: var(--frame);
|
||||
}
|
||||
|
||||
html.landscape #tutorial-replay {
|
||||
html.landscape .tutorial-board-box .tutorial-replay {
|
||||
position: static;
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
|
||||
@@ -96,6 +96,11 @@
|
||||
est construit par app/src/ui/home-view.ts et tutorial-view.ts. -->
|
||||
<section id="home" class="home page" hidden></section>
|
||||
<section id="tutorial" class="tutorial page" hidden></section>
|
||||
<!-- Les leçons (#/lecons, #/lecons/<n>/...) : la liste, construite par
|
||||
app/src/ui/lessons-view.ts, et les écrans d'une leçon, construits par
|
||||
tutorial-view.ts comme ceux du tutoriel. -->
|
||||
<section id="lessons" class="lessons page" hidden></section>
|
||||
<section id="lesson" class="tutorial page" hidden></section>
|
||||
|
||||
<!-- Le choix d'une nouvelle partie (#/nouvelle-partie), construit par
|
||||
app/src/ui/new-game-view.ts. -->
|
||||
@@ -146,6 +151,7 @@
|
||||
<a id="menu-games" href="#/parties" class="item"></a>
|
||||
<a id="menu-home" href="#/accueil" class="item"></a>
|
||||
<a id="menu-tutorial" href="#/tutoriel/1" class="item"></a>
|
||||
<a id="menu-lessons" href="#/lecons" class="item"></a>
|
||||
<button id="menu-copy-link" type="button" class="item"></button>
|
||||
<button id="menu-fullscreen" type="button" class="item"></button>
|
||||
<a id="menu-help" href="#/aide" class="item"></a>
|
||||
|
||||
Reference in New Issue
Block a user