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

big improvement over projets, evenement, links, calendar, and mobile display

Browse Source
This commit is contained in:
bachir
2026-09-29 15:57:34 +02:00
parent 7581ab9333
commit 25cf411ced
28 changed files with 1264 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/leshed/assets/scss/partials/abstracts/_event-calendrier.scss
+79
View File
@@ -0,0 +1,79 @@
@use "../abstracts/variables" as *;
@use "fluid" as *;
@use "../abstracts/event-date-time" as *;
@mixin event_calendar(){
// @include evenementListe();
border-top: 1px solid #ccc;
padding: 2em 0 1em 0;
display: flex;
flex-direction: row;
gap: 1em;
header{
flex:0 1 auto;
// width: 5em;
padding:0 1em 0 0;
.field_dates{
@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;
}
}
}
section.content{
flex:1 1 auto;
h2.node-title{
font-size: 3em;
}
div.field_artiste_s_invite_s{
font-size: fluid-clamp(1.8rem, $min: 1.134rem);
.field-item{
display: inline-block;
&:not(:last-child)::after{
content: ", ";
}
}
}
div.field_type_d_evenement{
.field-item{
font-weight: 400;
}
}
}
section.last-cel{
flex:0 1 auto;
.field_images{
a{
display: block;
width: 12em;
height: 12em;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit:contain;
object-position: top right;
}
}
}
}
}
web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss
+5
View File
@@ -46,3 +46,8 @@ $layout-anchor: 1112px;
@function fluid-clamp($size, $at: $layout-anchor, $min: 0px) {
@return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)});
}
// Tokens dérivés : tailles de référence passées en fluide. Le plancher est
// un choix de design — 70px à l'ancrage et au-dessus (desktop inchangé),
// 56px au plus bas (téléphone).
$header-height-fluid: fluid-clamp($header_height, $min: 40px);
web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss
+117 -7
View File
@@ -6,6 +6,8 @@
@use "variables" as *;
@use "fluid" as *;
@use "../abstracts/nodes-on-liste" as *;
@use "../abstracts/event-calendrier" as *;
@mixin nodefull{
@@ -25,7 +27,7 @@
>h2.node-title{
position: relative;
// font-size: 12em;
font-size: fluid-clamp(12rem, $min: 8rem);
// font-size: fluid-clamp(12rem, $min: 8rem);
margin: 0;
&.leshed-svg-export-target{
pointer-events: painted;
@@ -33,13 +35,26 @@
}
}
.field{
margin-bottom: 1rem;
.field-item{
font-weight: 400;
}
}
.field_artiste_s_invite_s{
font-size: 1.8em;
font-weight: 300;
// font-size: 1.8em;
font-size: fluid-clamp(1.8rem, $min: 1.134rem);
.field-item{
font-weight: 300;
display: inline-block;
&:not(:last-child):after{
content:", ";
}
}
}
.field_invite_accompagne_curate_p,
.field_partenaire_s{
margin-top: 1em;
// margin-top: 1em;
font-weight: 400;
.field-label{
font-weight: $default_fwght;
@@ -48,13 +63,67 @@
// display: inline-block;
// }
}
// Pas de marge basse sur le type de projet s'il est immédiatement
// suivi des dates : l'écart de 16px mesuré venait d'ici.
// NB : :has(+ …) — la marge appartient au PRÉCÉDENT, le combinateur
// seul (field_type + field_dates) ne pourrait cibler que le suivant.
div.field_type_de_projet:has(+ div.field_dates){
margin-bottom: 0;
}
.field_dates{
margin-top: 1em;
time{
font-weight: 400;
}
}
div.field_projet_s_lie_s{
// margin-top: 2em;
// .field-label{
// margin-bottom: 1em;
// }
>.field-items.multiple{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: $colsgap;
>.field-item{
flex: 1 0 calc(50% - $colsgap / 2);
max-width: calc(50% - $colsgap / 2);
>article{
@include projetOnListe();
>header{
>h2{
font-size: 3em;
}
}
.field_artiste_s_invite_s{
font-size: 1.134em;
}
}
}
}
}
div.field_evenement_s_lie_s{
article.node-type-evenement.view-mode-calendrier{
@include event_calendar();
>section.content{
>h2.node-title{
font-size: 2.68em;
}
div.field{
margin:0;
p{ margin:0;}
}
}
>section.last-cel{
display: none;
}
}
}
>div.spacer{
display: block;
height: 5em;
@@ -127,7 +196,16 @@
width: 205%;//calc(50% - $colsgap / 2);
z-index: 100;
pointer-events: none;
>h2.node-title{
font-size: fluid-clamp(12rem, $min: 8rem);
}
}
// .field_artiste_s_invite_s{
// // font-size: 1.8em;
// font-size: fluid-clamp(1.8rem, $min: 1rem);
// font-weight: 300;
// }
}
&.right{
@@ -212,9 +290,41 @@
div.col.right .field_images .field-item:not(:first-child){
order: 5;
}
div.col.left > .spacer{
display: none;
div.col.left > div.field_fichiers{
order: 6;
}
div.col.left > div.field_partenaire_s{
order:7;
}
div.col.left > div.field_projet_s_lie_s{
order: 8;
}
// NB : div.spacer (et pas .spacer) — la règle de base `>div.spacer{display:block}`
// a une spécificité de (0,4,5) : `.spacer` seul (0,4,4) perdait le cascade
// malgré l'ordre. Égaler la spécificité, laisser la cascade trancher.
div.col.left > div.spacer{
order:20;
}
div.col{
&.left{
>header{
>h2.node-title{
font-size: 5em;
// font-size: fluid-clamp(12rem, $min: 8rem);
}
}
// .field_artiste_s_invite_s{
// .field-item{
// display: inline-block;
// &:not(:last-child):after{
// content:", ";
// }
// }
// }
}
}
}
}
}
web/themes/custom/leshed/assets/scss/partials/global/_header.scss
+3 -2
View File
@@ -6,6 +6,7 @@
// \_| |_/\___|\__,_|\__,_|\___|_|
@use "../abstracts/variables" as *;
@use "../abstracts/fluid" as *;
header[role="banner"]{
@@ -77,7 +78,7 @@ header[role="banner"]{
// .layout-container : sinon le débord pleine largeur (et donc le
// backdrop-filter) est rogné aux bords du conteneur centré.
position:fixed;
top:$header_height;
top:$header-height-fluid;
left: 0;
width:100vw;
padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
@@ -89,7 +90,7 @@ header[role="banner"]{
overflow: hidden;
transition-duration: 0.5s;
&[opened]{
height: calc(100vh - $header_height);
height: calc(100vh - $header-height-fluid);
}
nav#block-leshed-navigationprincipale{
// width: $layout_width;
web/themes/custom/leshed/assets/scss/partials/global/_layout.scss
+4 -3
View File
@@ -8,6 +8,7 @@
// |___/
@use "../abstracts/variables" as *;
@use "../abstracts/fluid" as *;
div.layout-container{
@@ -22,13 +23,13 @@ div.layout-container{
display: block;
position: relative;
padding: 0.5em 0;
flex: 1 1 $header_height;
flex: 1 1 $header-height-fluid;
z-index: 100;
// position: fixed;
// top:0;
// width: 100%;
height: $header_height;
min-height: $header_height;
height: $header-height-fluid;
min-height: $header-height-fluid;
}
main[role="main"]{
flex: 1 1 auto;
web/themes/custom/leshed/assets/scss/partials/pages/_evenement.scss
-10
View File
@@ -18,16 +18,6 @@ article.node-type-evenement.view-mode-full{
@include event-date-time();
}
div.field_projet_s_lie_s{
margin-top: 2em;
.field-label{
margin-bottom: 1em;
}
article.node-type-projet.view-mode-tableau_liste{
@include projetOnListe();
}
}
}
web/themes/custom/leshed/assets/scss/partials/pages/_views-archives-evenements.scss
+12 -55
View File
@@ -4,68 +4,25 @@
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
@use "../abstracts/variables" as *;
@use "../abstracts/event-date-time" as *;
@use "../abstracts/event-calendrier" as *;
div.views-archives-evenements {
& > h3{
border-bottom: 1px solid #999;
// border-bottom: 1px solid #999;
margin-bottom: 0;
font-size: 2em;
font-weight: 200;
span.month{
font-weight: 100;
}
span.year{
font-weight: 400;
}
}
article.node-type-evenement.view-mode-calendrier{
// @include evenementListe();
display: flex;
flex-direction: row;
gap: 1em;
header{
flex:0 1 auto;
// width: 5em;
padding:0 1em 0 0;
.field_dates{
@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;
}
}
}
section.content{
flex:0 1 auto;
h2.node-title{
font-size: 3em;
}
}
section.last-cel{
flex:0 1 auto;
.field_images{
a{
display: block;
width: 12em;
height: 12em;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit:contain;
object-position: top left;
}
}
}
}
@include event_calendar();
}
}