integrated evenements in drupal and front
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
+6
-6
File diff suppressed because one or more lines are too long
@@ -91,7 +91,16 @@ gsap.registerPlugin(ScrollTrigger);
|
||||
};
|
||||
|
||||
function initTitles() {
|
||||
const titles = document.querySelectorAll('#block-leshed-identitedusite>a, article.node-type-projet>header>h2, article.node-type-projet>.cols>.left>h2, article.node-type-projet.view-mode-full h2.node-title');
|
||||
const titles = document.querySelectorAll('\
|
||||
#block-leshed-identitedusite>a, \
|
||||
article.node-type-projet>header>h2,\
|
||||
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\
|
||||
');
|
||||
for (const txt of titles) {
|
||||
txt.classList.add("variable-title");
|
||||
const splitted = Splitting({ target: txt, by: 'chars' });
|
||||
@@ -313,23 +322,23 @@ gsap.registerPlugin(ScrollTrigger);
|
||||
console.log('initPageFull');
|
||||
|
||||
// PAGE TITLE SCALING DOWN
|
||||
const pageTitle = document.querySelector('article.node-type-projet.view-mode-full h2.node-title');
|
||||
console.log('pageTitle', pageTitle);
|
||||
const pageHeader = document.querySelector('article.node-type-projet.view-mode-full .cols>.col.left>header, article.node-type-evenement.view-mode-full>.cols>.col.left>header');
|
||||
console.log('pageHeader', pageHeader);
|
||||
|
||||
if (pageTitle) {
|
||||
if (pageHeader) {
|
||||
// needs requestAnimationFrame to get the real titleHeight after splitting
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
|
||||
const initTitleH = pageTitle.offsetHeight;
|
||||
// console.log(`initTitleH: ${initTitleH}`);
|
||||
const titleScaleTarget = 0.4;
|
||||
const end = initTitleH - initTitleH * titleScaleTarget;
|
||||
const initheaderH = pageHeader.offsetHeight;
|
||||
// console.log(`initheaderH: ${initheaderH}`);
|
||||
const headerScaleTarget = 0.4;
|
||||
const end = initheaderH - initheaderH * headerScaleTarget;
|
||||
// console.log(`end: ${end}`);
|
||||
|
||||
gsap_mm.add('(min-width: 768px)', () => {
|
||||
gsap.to(pageTitle, {
|
||||
scale: titleScaleTarget,
|
||||
gsap.to(pageHeader, {
|
||||
scale: headerScaleTarget,
|
||||
y: end,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
|
||||
@@ -214,6 +214,12 @@ header[role="banner"]{
|
||||
} // end of header[role="banner"]{
|
||||
|
||||
|
||||
// ____ _ _ _
|
||||
// / ___| | ___ | |__ __ _| |___
|
||||
// | | _| |/ _ \| '_ \ / _` | / __|
|
||||
// | |_| | | (_) | |_) | (_| | \__ \
|
||||
// \____|_|\___/|_.__/ \__,_|_|___/
|
||||
|
||||
.variable-title{
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
@@ -231,23 +237,14 @@ header[role="banner"]{
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin projetListe{
|
||||
@mixin nodeListe{
|
||||
>header{
|
||||
|
||||
>h2{
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
// only with images, title overlap the image
|
||||
div.field_artiste_s_invite_s.field-items.multiple{
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
.field-item{
|
||||
display: inline-block;
|
||||
&:not(:last-of-type):after{
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-image{
|
||||
>header{
|
||||
>h2{
|
||||
@@ -275,6 +272,33 @@ header[role="banner"]{
|
||||
}
|
||||
}
|
||||
|
||||
@mixin projetListe{
|
||||
@include nodeListe();
|
||||
|
||||
div.field_artiste_s_invite_s.field-items.multiple{
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
.field-item{
|
||||
display: inline-block;
|
||||
&:not(:last-of-type):after{
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin evenementListe{
|
||||
@include nodeListe();
|
||||
>header{
|
||||
.field_dates{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// _____ _____ __ ____ ___ _ ____
|
||||
// |_ _/ _ \ \ / / / ___/ _ \| | / ___|
|
||||
// | || | | \ \ /\ / / | | | | | | | \___ \
|
||||
@@ -300,18 +324,15 @@ div.layout.layout--twocol-section--50-50{
|
||||
article.node-type-projet{
|
||||
@include projetListe();
|
||||
}
|
||||
article.node-type-evenement{
|
||||
@include evenementListe();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ____ _ _
|
||||
// | _ \ _ __ ___ (_) ___| |_
|
||||
// | |_) | '__/ _ \| |/ _ \ __|
|
||||
// | __/| | | (_) | | __/ |_
|
||||
// |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
article.node-type-projet.view-mode-full{
|
||||
@mixin nodefull{
|
||||
div.cols{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -325,17 +346,20 @@ article.node-type-projet.view-mode-full{
|
||||
z-index: 10;
|
||||
// padding-bottom: 5em;
|
||||
// box-sizing: border-box;
|
||||
>h2.node-title{
|
||||
position: relative;
|
||||
font-size: 12em;
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
width: 205%;//calc(50% - $colsgap / 2);
|
||||
pointer-events: none;
|
||||
&.leshed-svg-export-target{
|
||||
pointer-events: painted;
|
||||
}
|
||||
>header{
|
||||
transform-origin: 0 0;
|
||||
width: 205%;//calc(50% - $colsgap / 2);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
>h2.node-title{
|
||||
position: relative;
|
||||
font-size: 12em;
|
||||
margin: 0;
|
||||
&.leshed-svg-export-target{
|
||||
pointer-events: painted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field_artiste_s_invite_s{
|
||||
@@ -459,7 +483,78 @@ article.node-type-projet.view-mode-full{
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ____ _ _
|
||||
// | _ \ _ __ ___ (_) ___| |_
|
||||
// | |_) | '__/ _ \| |/ _ \ __|
|
||||
// | __/| | | (_) | | __/ |_
|
||||
// |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
article.node-type-projet.view-mode-full{
|
||||
@include nodefull();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// _____ _
|
||||
// | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_
|
||||
// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
|
||||
// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_
|
||||
// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// __ ___ _ _ _
|
||||
// \ \ / (_) _____ __ / \ _ __ ___| |__ (_)_ _____ ___
|
||||
// \ \ / /| |/ _ \ \ /\ / / / _ \ | '__/ __| '_ \| \ \ / / _ \/ __|
|
||||
// \ V / | | __/\ V V / / ___ \| | | (__| | | | |\ V / __/\__ \
|
||||
// \_/ |_|\___| \_/\_/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/
|
||||
|
||||
@mixin views-archives{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
gap: $colsgap;
|
||||
div.views-row{
|
||||
flex: 1 0 calc(25% - $colsgap);
|
||||
width: calc(25% - $colsgap);
|
||||
}
|
||||
}
|
||||
|
||||
// __ ___ _ _ _ ____ _ _
|
||||
@@ -469,22 +564,36 @@ article.node-type-projet.view-mode-full{
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
div.views-archives-projets{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
gap: $colsgap;
|
||||
div.views-row{
|
||||
flex: 1 0 calc(25% - $colsgap);
|
||||
width: calc(25% - $colsgap);
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
@include views-archives();
|
||||
|
||||
@include projetListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
|
||||
@include projetListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// __ ___ _ _ _ _____ _
|
||||
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ ___
|
||||
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
|
||||
div.views-archives-evenementskorganizer {
|
||||
@include views-archives();
|
||||
|
||||
article.node-type-evenement.view-mode-tableau_liste{
|
||||
|
||||
@include evenementListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user