bachir/drupal-leshed
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better date display

Browse Source
This commit is contained in:
bachir
2026-09-17 21:22:44 +02:00
parent 8bd96bf09c
commit 310ab58792
5 changed files with 62 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/leshed/assets/dist/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/leshed/assets/dist/titles.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/leshed/assets/js/titles.js
+2 -2
View File
@@ -10,12 +10,12 @@ const TITLE_SELECTORS = '\
article.node-type-projet>.cols>.left>h2,\
article.node-type-projet.view-mode-full h2.node-title,\
article.node-type-evenement>header>h2,\
article.node-type-evenement>header>.field_dates>time,\
article.node-type-evenement.view-mode-full h2.node-title,\
article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part,\
article.node-type-evenement.view-mode-calendrier h2.node-title,\
div.views-archives-evenements > h3 > time\
';
// article.node-type-evenement>header>.field_dates>time,\
// article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part,\
// Police Epilogue = axe variable `wght` (100–900) uniquement ; l'italique est
// un fichier séparé (font-style).
web/themes/custom/leshed/assets/scss/main.scss
+56 -29
View File
@@ -578,37 +578,53 @@ article.node-type-projet.view-mode-full{
// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_
// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
@mixin event-date-time($ref: 10em){
display: flex;
position: relative;
time{
position: relative;
display: grid;
grid-template-columns: $ref ($ref * 7 / 18);
grid-template-rows: $ref / 2.3 $ref / 2.3;
grid-template-areas:
"day month"
"day year";
span.date-day{
grid-area: day;
font-size: $ref;
font-weight: 100;
font-style: italic;
}
span.date-month{
grid-area: month;
align-self: end;
font-weight: 400;
}
span.date-year{
grid-area: year;
align-self: end;
font-weight: 700;
}
span.date-month,
span.date-year{
font-size: $ref / 2.45;
}
}
span.date-sep{
font-size: $ref / 2;
padding:0 0.2em;
}
}
article.node-type-evenement.view-mode-full{
@include nodefull();
.field_dates.digit-dates{
transform-origin: 0 0;
time{
display: grid;
grid-template-columns: 18em 7em;
grid-template-rows: auto auto;
grid-template-areas:
"day month"
"day year";
// align-items: baseline;
span.date-day{
grid-area: day;
font-size: 18em;
}
span.date-month{
grid-area: month;
align-self: end;
}
span.date-year{
grid-area: year;
}
span.date-month,
span.date-year{
font-size: 6em;
}
}
@include event-date-time();
}
div.field_projet_s_lie_s{
@@ -690,11 +706,22 @@ div.views-archives-evenements {
header{
flex:0 1 auto;
// width: 5em;
padding:1em;
padding:0 1em 0 0;
.field_dates{
time{
font-size: 5em;
@include event-date-time(5em);
flex-direction: column;
align-items: center;
gap: 0.6em;
span.date-sep{
display: block;
width: 1em;
height: 0;
overflow: visible;
transform-origin: center;
transform: rotate(90deg) translateX(0.1em);
line-height: 0;
padding: 0;
}
}
}
web/themes/custom/leshed/templates/field--node--field-dates--evenement.html.twig
+2 -2
View File
@@ -39,7 +39,7 @@
{{ dates.date_parts(item.start_date) }}
{% endif %}
{% if item.end_date and (item.end_date.year != item.start_date.year or item.end_date.day != item.start_date.day) %}
<span class="date-sep">–</span>
<span class="date-sep">→</span>
{{ dates.date_parts(item.end_date) }}
{% endif %}
</div>
@@ -53,7 +53,7 @@
{{ dates.date_parts(item.start_date) }}
{% endif %}
{% if item.end_date and (item.end_date.year != item.start_date.year or item.end_date.day != item.start_date.day) %}
<span class="date-sep">–</span>
<span class="date-sep">→</span>
{{ dates.date_parts(item.end_date) }}
{% endif %}
</div>