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

rerefactor du fetching de contenus une mielleure ux au load des modales (description dans le readme)

Browse Source
This commit is contained in:
Valentin Le Moign
2025-06-26 15:26:18 +02:00
parent e85851bd4d
commit f44fbd8d06
21 changed files with 465 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -754,6 +754,7 @@ body{
}
}
> #content-modale {
pointer-events: none;
padding-bottom: 20vh;
@media screen and (min-width: $desktop-min-width) {
z-index: 6;
@@ -761,6 +762,7 @@ body{
> div:not(.image-viewer-wrapper, .image-modale) {
padding-bottom: 5vh;
> .content-wrapper {
pointer-events: all;
left: 1.5vw;
width: calc($modale-width-mobile);
top: 15vh;
@@ -768,21 +770,20 @@ body{
position: relative;
background-color: white;
font-size: $labeur-font-size-mobile;
&:has(#centre-de-ressource, #ressource-item-header) {
&.ressource {
left: 5vw;
}
@media screen and (min-width: $desktop-min-width) {
font-size: $labeur-font-size-desktop;
width: $modale-width-desktop;
}
&:has(#centre-de-ressource),
&:has(#ressource-item-header) {
&.ressource {
@media screen and (min-width: $tablet-min-width) {
left: 8vw;
width: 84vw;
.locality-title {
width: 42vw;
margin-left: 21vw;
width: 42vw !important;
margin-left: 21vw !important;
}
}
@media screen and (min-width: $desktop-min-width) {
@@ -924,6 +925,7 @@ body{
}
}
> main {
min-height: 30vh;
z-index: 1;
position: relative;
width: 100%;
@@ -938,6 +940,26 @@ body{
padding: 0 calc($modale-x-padding * 4);
}
}
.content-loading {
width: 100%;
text-align: center;
padding-top: 2rem;
display: flex;
flex-direction: column;
align-items: center;
> div {
display: block;
width: 24px;
height: 24px;
background-image: url(/themes/custom/caravane/assets/pictograms/90-ring.svg);
background-size: 24px;
background-size: no-repeat;
margin-bottom: 1rem;
}
> p {
display: block;
}
}
> .partie,
> #equipe {
width: 100%;
@@ -1375,8 +1397,9 @@ body{
> .title {
width: 100%;
text-align: center;
margin-bottom: 1.5rem;
> h2 {
display: inline-block;
display: inline;
margin-top: 1rem;
font-size: $xl-font-size-mobile;
font-family: 'Joost', sans-serif;
@@ -1388,7 +1411,7 @@ body{
}
}
> .pieces-jointes {
z-index: 1;
z-index: 0;
position: relative;
padding: 0 $modale-x-padding;
box-sizing: border-box;
@@ -1443,7 +1466,8 @@ body{
}
> footer {
position: relative;
z-index: 0;
z-index: -1;
overflow: hidden;
.pattern-bottom {
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
height: $modale-bottom-padding;
@@ -1741,4 +1765,14 @@ body{
}
}
}
&.toolbar-fixed {
#content-modale .content-wrapper {
top: 20vh !important;
}
&.toolbar-vertical.toolbar-tray-open {
#content-modale .content-wrapper {
left: 15vw !important;
}
}
}
}