Skip to content

Commit d787b61

Browse files
scripturascriptura
committed
feat: updated demo calendar
1 parent cf4c0cb commit d787b61

6 files changed

Lines changed: 78 additions & 64 deletions

File tree

‎app/liturgical-calendar/app.js‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66

77
const APP_ROOT = '/app/liturgical-calendar/'
88

9-
const WASM_URL = `${APP_ROOT}liturgical_calendar_wasm.wasm?v=12`
10-
const KALD_URL = `${APP_ROOT}romanus_universale.kald?v=12`
11-
const LITS_URL = `${APP_ROOT}romanus_universale_la.lits?v=12`
9+
const WASM_URL = `${APP_ROOT}liturgical_calendar_wasm.wasm?v=15`
10+
const KALD_URL = `${APP_ROOT}romanus_universale.kald?v=15`
11+
const LITS_URL = `${APP_ROOT}romanus_universale_la.lits?v=15`
1212

1313
const KAL_ENGINE_OK = 0
1414
const KAL_ERR_BUILD_ID_MISMATCH = -22
@@ -265,45 +265,51 @@ function renderDay(year, month, day, exports, memory) {
265265
const label = res ? res.label : `Fête inconnue (0x${feastId.toString(16).toUpperCase()})`
266266
const annotation = res ? res.annotation : null
267267

268-
html = `<div class="column-fix gap">`
269-
html += `<article class="card feast primary color-${COLOR_CSS[color] ?? ''}" style="text-align: left;">
270-
<h2>${label}</h2>`
271-
if (annotation) html += `<p class="annotation">${renderMarkdown(annotation)}</p>`
272-
html += `<ul>
273-
<li>Feast ID: 0x${feastId.toString(16).toUpperCase().padStart(4, '0')}</li>
274-
<li>Précédence: ${PRECEDENCE[precedence] ?? precedence} (${precedence + 1})</li>
275-
<li>Couleur: ${COLOR[color] ?? color}</li>
276-
<li>Période: ${PERIOD[period] ?? period}</li>
277-
<li>Nature: ${NATURE[nature] ?? nature}</li>`
278-
if (hasVigil) html += `<li>Vigile propre: oui (invariant)</li>`
279-
if (hasVesperaeI) html += `<li>Vêpres I: ce soir</li>`
280-
if (hasVigilia) html += `<li>Vigile: ce soir</li>`
281-
html += `</ul></article>`
268+
html += `<div class="grid3 gap">`
269+
html += `<table class="table liturgical-calendar">`
270+
html += `<caption class="h4 color-${COLOR_CSS[color] ?? ''}">`
271+
html += `${label}`
272+
if (annotation) html += `. ${renderMarkdown(annotation)}`
273+
html += `</caption>`
274+
html += `<tbody>`
275+
html += `<tr><td>Feast ID</td><td>0x${feastId.toString(16).toUpperCase().padStart(4, '0')}</td></tr>
276+
<tr><td>Précédence</td><td>${PRECEDENCE[precedence] ?? precedence} (${precedence + 1})</td></tr>
277+
<tr><td>Nature</td><td>${NATURE[nature] ?? nature}</td></tr>
278+
<tr><td>Couleur</td><td>${COLOR[color] ?? color}</td></tr>`
279+
if (hasVigil) html += `<tr><td>Vigile propre</td><td>oui (invariant)</td></tr>`
280+
if (hasVesperaeI) html += `<tr><td>Vêpres I</td><td>ce soir</td></tr>`
281+
if (hasVigilia) html += `<tr><td>Vigile</td><td>ce soir</td></tr>`
282+
html += `<tr><td>Période</td><td>${PERIOD[period] ?? period}</td></tr>`
283+
html += `</tbody>`
284+
html += `</table>`
285+
html += `</div>`
282286

283287
if (secCount > 0 && exports.kal_wasm_read_secondary(secOffset, secCount) === KAL_ENGINE_OK) {
284288
const sv = new DataView(memory.buffer, exports.kal_wasm_secondary_ptr(), secCount * 2)
285-
html += `</div>`
286289
html += `<hr>`
287-
html += `<h2>Fêtes secondaires du jour :</h2>`
288-
html += `<div class="column-fix gap gap-top">`
290+
html += `<h2 class="h3">Fêtes secondaires du jour :</h2>`
291+
html += `<div class="grid3 gap">`
289292
for (let i = 0; i < secCount; i++) {
290293
const ridx = sv.getUint16(i * 2, true)
291294
if (ridx === 0) continue
292295
const resSec = resolveSecondary(exports, memory, ridx, year)
293296
if (!resSec) continue
294297
const sf = decodeFeastFlags(resSec.feastFlags)
295-
html += `<article class="card secondaries feast secondary color-${COLOR_CSS[sf.color] ?? ''}" style="text-align: left;">
296-
<h2>${resSec.label}</h2>`
297-
if (resSec.annotation) html += `<p class="annotation">${renderMarkdown(resSec.annotation)}</p>`
298-
html += `<ul>
299-
<li>Feast ID: 0x${ridx.toString(16).toUpperCase().padStart(4, '0')}</li>
300-
<li>Précédence: ${PRECEDENCE[sf.precedence] ?? sf.precedence} (${sf.precedence + 1})</li>
301-
<li>Couleur: ${COLOR[sf.color] ?? sf.color}</li>
302-
<li>Nature: ${NATURE[sf.nature] ?? sf.nature}</li>
303-
</ul></article>`
298+
html += `<table class="table liturgical-calendar">`
299+
html += `<caption class="h4 color-${COLOR_CSS[sf.color] ?? ''}">`
300+
html += `${resSec.label}`
301+
if (resSec.annotation) html += `. ${renderMarkdown(resSec.annotation)}`
302+
html += `</caption>`
303+
html += `<tbody>`
304+
html += `<tr><td>Feast ID</td><td>0x${ridx.toString(16).toUpperCase().padStart(4, '0')}</td></tr>`
305+
html += `<tr><td>Précédence</td><td>${PRECEDENCE[sf.precedence] ?? sf.precedence} (${sf.precedence + 1})</td></tr>`
306+
html += `<tr><td>Nature</td><td>${NATURE[sf.nature] ?? sf.nature}</td></tr>`
307+
html += `<tr><td>Couleur</td><td>${COLOR[sf.color] ?? sf.color}</td></tr>`
308+
html += `</tbody>`
309+
html += `</table>`
304310
}
311+
html += `</div>`
305312
}
306-
html += `</div>`
307313
} else {
308314
html =
309315
'<div class="message-highlight"><svg class="icon" role="img" focusable="false"><use href="/sprites/util.svg#pencil"></use></svg><div><p>Pas de célébration répertoriée pour cette date.</p></div></div>'

‎app/liturgical-calendar/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
1414
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
1515
<link rel="stylesheet" href="../../styles/main.css" media="screen" />
16-
<link rel="stylesheet" href="liturgical-calendar.css?v=12" media="screen" />
16+
<link rel="stylesheet" href="liturgical-calendar.css?v=15" media="screen" />
1717
<link rel="stylesheet" href="/styles/main.css" media="screen" />
1818
<link rel="stylesheet" href="/styles/print.css" media="print" />
1919
<link rel="preload" href="/fonts/notoSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
@@ -66,6 +66,6 @@ <h1 class="main-heading" id="h1">Calendarium Romanum Generale</h1>
6666
</div>
6767
</noscript>
6868
</div>
69-
<script type="module" src="/app/liturgical-calendar/app.js?v=12"></script>
69+
<script type="module" src="/app/liturgical-calendar/app.js?v=15"></script>
7070
</body>
7171
</html>

‎app/liturgical-calendar/liturgical-calendar.css‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,50 @@ table.liturgical-calendar {
22
& :where(.doy, .date) {
33
width: 3em;
44
}
5+
56
thead th {
67
text-align: start;
78
}
9+
810
.feasts {
911
padding-block: 0;
10-
p {
11-
margin-block: 0.5em;
12-
&::before {
13-
content: '';
14-
display: inline-flex;
15-
vertical-align: 0;
16-
aspect-ratio: 1;
17-
height: 0.75em;
18-
background-color: var(--colorG13);
19-
margin-inline-end: 0.5em;
20-
}
21-
}
12+
}
2213

23-
.color-albus::before {
24-
background-color: hsl(35, 45%, 84%);
25-
}
14+
caption {
15+
margin-block: 0.5em;
16+
}
2617

27-
.color-viridis::before {
28-
background-color: hsl(120, 100%, 25%);
29-
}
18+
& :where(.feasts p, caption)::before {
19+
content: '';
20+
display: inline-flex;
21+
vertical-align: 0;
22+
aspect-ratio: 1;
23+
height: 0.75em;
24+
background-color: var(--colorG13);
25+
margin-inline-end: 0.5em;
26+
}
3027

31-
.color-violaceus::before {
32-
background-color: hsl(297, 78%, 37%); /* hsl(300, 100%, 25%); */
33-
}
28+
.color-albus::before {
29+
background-color: hsl(35, 45%, 84%);
30+
}
3431

35-
.color-rubeus::before {
36-
background-color: #d40000; /* #ff0000, #bf2329 */
37-
}
32+
.color-viridis::before {
33+
background-color: hsl(120, 100%, 25%);
34+
}
3835

39-
.color-rosaceus::before {
40-
background-color: hsl(330, 100%, 71%);
41-
}
36+
.color-violaceus::before {
37+
background-color: hsl(297, 78%, 37%); /* hsl(300, 100%, 25%); */
38+
}
39+
40+
.color-rubeus::before {
41+
background-color: #d40000; /* #ff0000, #bf2329 */
42+
}
43+
44+
.color-rosaceus::before {
45+
background-color: hsl(330, 100%, 71%);
46+
}
4247

43-
/*
48+
/*
4449
.color-black::before {
4550
background-color: hsl(0, 0%, 0%);
4651
}
@@ -49,7 +54,7 @@ table.liturgical-calendar {
4954
background-color: hwb(51 0% 0%);
5055
}
5156
*/
52-
}
57+
5358
.doy a {
5459
scroll-margin-top: 3.5em;
5560
}

‎styles/development/accordion.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@
6666
background-color: var(--color1);
6767
/* Compense le décalage de la "bordure" en box-shadow inset. */
6868
border-radius: calc(var(--r2) + 1px);
69-
box-shadow: var(--shadow8), inset 0 -1px 0 1px var(--colorA1);
69+
box-shadow:
70+
var(--shadow8),
71+
inset 0 -1px 0 1px var(--colorA1);
7072
transition: max-height 0.5s ease-in-out;
7173

7274
&[aria-hidden='true'] {

‎styles/development/column.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@
100100
max-width: var(--column-width);
101101
column-count: 1;
102102
margin-inline: auto;
103-
@media (48.5em < width) { /* @note +3em comprend les 2 gaps plus l'épaisseur estimée de la barre de scroll vertical. */
103+
@media (48.5em < width) {
104+
/* @note +3em comprend les 2 gaps plus l'épaisseur estimée de la barre de scroll vertical. */
104105
max-width: calc(var(--column-width) * 2 + var(--gap));
105106
column-count: 2;
106107
}

‎styles/development/grid.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
container: grid/inline-size;
77
width: 100%; /* @note Important si le conteneur n'a pas de largeur définie par défaut. */
88
}
9-
9+
1010
display: grid;
1111
grid-auto-flow: dense;
1212
grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));

0 commit comments

Comments
 (0)