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

prev-next chapitre. read more arrow

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2026-02-19 16:41:43 +01:00
parent ca2a70f1b8
commit c821e49519
9 changed files with 308 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_main/themes/custom/mathallo/assets/dist/main.css vendored
View File

File diff suppressed because one or more lines are too long

20
web_main/themes/custom/mathallo/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

1
web_main/themes/custom/mathallo/assets/img/arrow-blue.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="35" xmlns="http://www.w3.org/2000/svg" height="35" id="screenshot-52808c91-ee87-8059-8007-0f133be402ff" viewBox="0 0 35 35" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-52808c91-ee87-8059-8007-0f133be402ff" rx="0" ry="0"><g id="shape-52808c91-ee87-8059-8007-0f133be40302"><g class="fills" id="fills-52808c91-ee87-8059-8007-0f133be40302"><ellipse cx="17.5" cy="17.5" rx="17.5" ry="17.5" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(22, 66, 188); fill-opacity: 1;"/></g></g><g id="shape-52808c91-ee87-8059-8007-0f133be40303"><g class="fills" id="fills-52808c91-ee87-8059-8007-0f133be40303"><path d="M16.288759231567383,22.555646896362305L16.288759231567383,7.812972068786621L18.710634231567383,7.812972068786621L18.710634231567383,22.555646896362305L25.491884231567383,15.774886131286621L27.187196731567383,17.500471115112305L17.499696731567383,27.187971115112305L7.812196731567383,17.500471115112305L9.507509231567383,15.774886131286621L16.288759231567383,22.555646896362305Z" style="fill: rgb(255, 255, 255);"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
web_main/themes/custom/mathallo/assets/img/arrow-white.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="35" xmlns="http://www.w3.org/2000/svg" height="35" id="screenshot-22989948-29ed-804e-8007-28b5a726c6cf" viewBox="0 0 35 35" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-22989948-29ed-804e-8007-28b5a726c6cf" rx="0" ry="0"><g id="shape-22989948-29ed-804e-8007-28b5a726c6d4"><g class="fills" id="fills-22989948-29ed-804e-8007-28b5a726c6d4"><ellipse cx="17.5" cy="17.5" rx="17.5" ry="17.5" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-22989948-29ed-804e-8007-28b5a726c6d5"><g class="fills" id="fills-22989948-29ed-804e-8007-28b5a726c6d5"><path d="M22.5556640625,18.7113037109375L7.81298828125,18.7113037109375L7.81298828125,16.2896728515625L22.5556640625,16.2896728515625L15.77490234375,9.5079345703125L17.50048828125,7.8131103515625L27.18798828125,17.5006103515625L17.50048828125,27.1878662109375L15.77490234375,25.4920654296875L22.5556640625,18.7113037109375Z" style="fill: rgb(22, 66, 188);"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

89
web_main/themes/custom/mathallo/assets/img/formes/diamant.svg
View File

@@ -25,74 +25,45 @@
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="2.9820571"
inkscape:cx="130.27919"
inkscape:cx="130.2792"
inkscape:cy="168.67551"
inkscape:window-width="1920"
inkscape:window-height="1149"
inkscape:window-height="1029"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="screenshot-d8ccbdb6-0d67-80f5-8007-0f486309a42a" />
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f486309a42a"
rx="0"
ry="0"
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f486309a42b"
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1"
transform="translate(16.43161,-17.772966)">
<path
d="M 194.34372,127.27941 63.900356,4.0450368 2.6562154,172.72058 133.09958,295.9552 194.34372,127.27941 v 0"
style="fill:#ffffff;fill-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path1" />
</g>
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f486309a42c"
transform="translate(16.43161,-17.772966)"
style="stroke-dasharray:6,6;stroke-dashoffset:0">
<path
d="m 64.296837,5.7176442 45.140133,123.5798458 24.4961,166.4602"
id="path2"
style="stroke-dasharray:6,6;stroke-dashoffset:0" />
</g>
<g
id="strokes-2cdddd35-cea9-805d-8007-9147f4af12eb-d8ccbdb6-0d67-80f5-8007-0f486309a42d"
class="strokes"
transform="translate(16.43161,-17.772966)">
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f486309a42b">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f486309a42b"
style="fill:#ffffff;fill-opacity:1;stroke-opacity:1">
<path
d="M 194.34372,127.27941 63.900356,4.0450368 2.6562154,172.72058 133.09958,295.9552 194.34372,127.27941 v 0"
style="fill:#ffffff;fill-opacity:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path1" />
</g>
</g>
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f486309a42c">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f486309a42c">
<path
d="m 64.296837,5.7176442 45.140133,123.5798458 24.4961,166.4602"
id="path2" />
</g>
<g
id="strokes-2cdddd35-cea9-805d-8007-9147f4aed317-d8ccbdb6-0d67-80f5-8007-0f486309a42c"
class="strokes">
<g
class="stroke-shape"
id="g3">
<path
d="m 64.296837,5.7176442 45.140133,123.5798458 24.4961,166.4602"
style="fill:none;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path3" />
</g>
</g>
</g>
<g
id="shape-d8ccbdb6-0d67-80f5-8007-0f486309a42d">
<g
class="fills"
id="fills-d8ccbdb6-0d67-80f5-8007-0f486309a42d">
<path
d="M 4.6205711,173.57971 110.0317,131.80676 l 83.57764,-3.91163"
id="path4" />
</g>
<g
id="strokes-2cdddd35-cea9-805d-8007-9147f4af12eb-d8ccbdb6-0d67-80f5-8007-0f486309a42d"
class="strokes">
<g
class="stroke-shape"
id="g5">
<path
d="M 4.6205711,173.57971 110.0317,131.80676 l 83.57764,-3.91163"
style="fill:none;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path5" />
</g>
</g>
class="stroke-shape"
id="g5">
<path
d="M 4.6205711,173.57971 110.0317,131.80676 l 83.57764,-3.91163"
style="fill:none;stroke-width:1;stroke-dasharray:6, 6;stroke-dashoffset:0;stroke-opacity:1"
id="path5" />
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

69
web_main/themes/custom/mathallo/assets/js/main.js
View File

@@ -98,14 +98,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// console.log('container', container);
// listes all available sizes
let min = 150;
let increment = Math.round((350 / (formesclasses.length -1)));
for (let i = 0; i < formesclasses.length; i++) {
sizes.push( min + increment * i)
}
// let min = 150;
// let increment = Math.round((350 / (formesclasses.length -1)));
// for (let i = 0; i < formesclasses.length; i++) {
// sizes.push( min + increment * i)
// }
// console.log('sizes', sizes);
let cards = document.querySelectorAll('.field-card, .node-type-chapitre, .node-type-partie');
let cards = document.querySelectorAll('article[role="home-presentation"], .field-card, .node-type-chapitre, .node-type-partie');
// console.log('cards', cards);
let used_n = [];
let oddeven=1;
@@ -152,6 +152,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// },
}
})
// cards opacity
.from(card.children, {
opacity: 0.4,
}, 0)
@@ -161,6 +162,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
.to(card.children, {
opacity: 0.4,
}, 0.7)
// cards mvmt
.from(card, {
translateX: `${200 * oddeven}px`,
translateY: `${100 * oddeven}px`
@@ -173,8 +175,6 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
// translateX: `${200 * oddeven}px`,
// }, 0.9);
// inverse oddeven
oddeven*=-1;
// Animation des formes continue de rotation + skew pendant tout le scroll
gsap.to(forme.querySelector('svg'), {
@@ -185,14 +185,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
scrub: true,
ease: "power4.out"
},
rotation: 45,
skewX: 10
rotation: Math.random() > 0.5 ? 45 : -45,
skewX: Math.random() > 0.5 ? 10 : -10
});
// Animation de couleur des formes uniquement au centre de l'écran
gsap.timeline({
scrollTrigger: {
trigger: forme,
trigger: card,
start: "top center", // Commence quand le haut de l'élément atteint le centre
end: "bottom center", // Termine quand le bas de l'élément passe le centre
scrub: true,
@@ -202,13 +202,14 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
.to(forme.querySelector('svg'), {
stroke: "#f661e2", // Passage au rose
duration: 0.1
}, 0.4) // Au milieu de la timeline (centre de l'écran)
}, 0.3) // Au milieu de la timeline (centre de l'écran)
.to(forme.querySelector('svg'), {
stroke: "#1642bc", // Retour au bleu
duration: 0.1
}, 0.6); // Juste après le centre
}, 0.7); // Juste après le centre
// inverse oddeven
oddeven*=-1;
}
}
@@ -228,9 +229,10 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
const svgNode = forme.querySelector('svg');
// random size
// let wh = 150 + Math.random()*350;
let wh = 200 + Math.random()*300;
// OR
// pic a size
let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
// let wh = sizes.splice(Math.floor(Math.random() * sizes.length), 1)[0];
// record the original scale for stroke width rescalling
const init_wh = svgNode.getAttribute('width');
// set the new size
@@ -238,35 +240,42 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
svgNode.setAttribute('width', wh);
svgNode.setAttribute('height', wh);
// keep stroke width to visualy 1px
let scale = wh / init_wh;
const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
// console.log('paths', paths);
paths.forEach(path => {
const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
let new_SW = init_SW / scale;
path.setAttribute('stroke-width', `${new_SW}px`);
path.style.strokeWidth = `${new_SW}px`;
});
// // keep stroke width to visualy 1px
// let scale = wh / init_wh;
// const paths = svgNode.querySelectorAll('path, line, rect, circle, ellipse, polygon, polyline');
// // console.log('paths', paths);
// paths.forEach(path => {
// const init_SW = parseFloat(path.getAttribute('stroke-width')) || 1;
// let new_SW = init_SW / scale;
// path.setAttribute('stroke-width', `${new_SW}px`);
// path.style.strokeWidth = `${new_SW}px`;
// });
// random position
// top
let top = card.offsetTop + card.clientHeight/2 - wh/2;
if (card.clientHeight < 300) {
top = Math.random() > 0.5
? card.offsetTop - wh/2 // on top
: card.offsetTop + card.clientHeight - wh/2; // on bottom
}
forme.style.top = `${top}px`;
let randoffset = 20 + Math.random() * 20;
// left right
if (card.classList.contains('field-principes-reflexion')) {
// left
forme.style.left = `${card.offsetLeft - wh}px`;
forme.style.left = `${card.offsetLeft - wh + randoffset}px`;
} else if(card.classList.contains('field-en-pratique')) {
// right
forme.style.left = `${card.offsetLeft + card.clientWidth}px`;
forme.style.left = `${card.offsetLeft + card.clientWidth - randoffset}px`;
} else {
// random
forme.style.left = Math.random() > 0.5 ? `${card.offsetLeft - wh}px` : `${card.offsetLeft + card.clientWidth}px`;
forme.style.left = Math.random() > 0.5
? `${card.offsetLeft - wh + randoffset}px`
: `${card.offsetLeft + card.clientWidth - randoffset}px`;
}
return forme;
}

169
web_main/themes/custom/mathallo/assets/scss/main.scss
View File

@@ -267,52 +267,101 @@ main[role="main"]{
position:relative;
padding-bottom: 100vh;
}
nav.arrow-more{
text-align: center;
a.arrow{
position: relative;
display: inline-block;
$wh:30px;
width: $wh; height: $wh;
background-color: $bleu_site;
border-radius: $wh / 2;
text-indent: $wh * 3;
overflow: hidden;
$bw:3px;
// triangle
&::before {
content: '';
display: block;
width: $wh / 3;
height: $wh / 3;
top: 50%;
left: 50%;
border-style: solid;
border-color: #fff;
border-width: $bw $bw 0 0;
position: absolute;
transform-origin: 50% 50%;
// downward
transform: rotate(135deg) translateY($wh / 3);
}
// bare
&::after {
content: '';
display: block;
top: 50%;
left: 50%;
border-style: solid;
border-color: #fff;
position: absolute;
transform-origin: 50% 50%;
// downward
width: 0;
height: $wh / 3;
border-width: 0 $bw 0 0;
transform: translateX(-2px) translateY(-$wh / 5);
}
// next chapitre
nav.prev-chapitre,
nav.next-chapitre{
position:absolute;
top:-10em;
padding: 0.5em 1em;
@include menu-contenus;
.wrapper{
position: relative;
}
ul{
margin:0;
padding-left: 0.5em;
li{
list-style: none;
display: none;
}
}
// prev
&.prev-chapitre{
left:0;
a:after{
transform: rotate(180deg);
}
li:has(+ li.in-active-trail){
display: block;
}
}
// next
&.next-chapitre{
right:0;
li.in-active-trail + li{
display: block;
}
}
// common
label{
background-color: $bleu_site;
color: #fff;
padding: 0.5em 1em;
z-index: 2;
top:-3em;
}
a{
display: block;
padding:0.5em 1em;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.25);
border: white 1px solid;
transition: border-color 0.5s;
&:hover{
border-color: $rose;
}
&:after{
content:"";
@include arrow-white();
position:absolute;
box-shadow: 0 0 10px rgba(0,0,0,0.25);
top:calc(100% + 0.5em);
left: calc(50% - 15px);
}
}
}
// more
ul.links{
margin:0;
padding:0;
position: absolute;
top:calc(100% - 15px);
left: calc(50% - 15px);
li{
list-style: none;
a{
@include arrow-blue;
}
}
}
// arrox
nav.arrow-more{
position: absolute;
top:calc(100% - 15px);
left: calc(50% - 15px);
a.arrow{
@include arrow-blue;
}
}
@@ -351,8 +400,8 @@ main[role="main"]{
// Page Chapitres
section.parties{
display: flex;
gap: 2em;
// display: flex;
// gap: 2em;
padding:1em;
}
@@ -420,10 +469,16 @@ main[role="main"]{
@mixin front-card{
z-index: 2;
background-color: #fff;
&>*>*{
opacity: 1;
}
}
@mixin back-card{
z-index: 1;
background-color: #eee;
background-color: rgba(247,247,247,1);
&>*>*{
opacity: 0.6;
}
}
&.field-principes-reflexion{
@@ -450,11 +505,11 @@ main[role="main"]{
// HOME
div.views-home-chapitres{
display: flex;
gap: 2em;
// display: flex;
// gap: 2em;
padding:1em;
>.views-row{
max-width: 700px;
// max-width: 700px;
article.node-type-chapitre{
h2{
@@ -479,6 +534,7 @@ main[role="main"]{
background-size: contain;
background-repeat: no-repeat;
// &.pyramide{ background-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg'); }
// &.infinite{ background-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg'); }
// &.prct{ background-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg'); }
@@ -490,14 +546,15 @@ main[role="main"]{
// &.croissant{ background-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg'); }
// &.cylindre{ background-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg'); }
// svg{
svg{
// width: 100%;
// height: 100%;
// path,line,rect,circle,ellipse,polygon,polyline{
// stroke-width: 1px!important;
// }
path,line,rect,circle,ellipse,polygon,polyline{
vector-effect: non-scaling-stroke;
stroke-width: 1px!important;
}
// }
}
}
}

25
web_main/themes/custom/mathallo/assets/scss/partials/mixins.scss
View File

@@ -40,7 +40,30 @@
padding:2em;
box-shadow: 0 0 10px rgba(0,0,0,0.25);
max-width: 50em;
margin: 40vh auto 0;
box-sizing: content-box;
margin: 30vh auto 0;
&[role="home-presentation"]{
margin-top: 10vh;
}
}
@mixin arrow{
display: block;
width:30px; height:30px;
border-radius: 15px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
text-indent: 100px;
overflow: hidden;
}
@mixin arrow-white{
@include arrow();
background-image: url('/themes/custom/mathallo/assets/img/arrow-white.svg');
}
@mixin arrow-blue{
@include arrow();
background-image: url('/themes/custom/mathallo/assets/img/arrow-blue.svg');
}