Continuation Section Activités

Correction de l'animation de slide-in/slide-out

public/js/main.min.js

@@ -1 +1 @@
-function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.querySelector(".content").classList.toggle("slide"),e.target.parentElement.parentElement.querySelector(".bg-img").classList.toggle("slide")}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)});
+function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.classList.toggle("slide")}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)});

resources/js/app.js

@@ -12,6 +12,5 @@ function addCopyrightCurrentDate() {
 
 function showActivityContent(e) {
     e.target.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
-    e.target.parentElement.parentElement.querySelector('.content').classList.toggle('slide');
+    e.target.parentElement.parentElement.classList.toggle('slide');
-    e.target.parentElement.parentElement.querySelector('.bg-img').classList.toggle('slide');
 }

resources/sass/_partials/_general.scss

@@ -35,7 +35,7 @@ header.logo-container {
 
 section {
     h2 {
-        font-size: 3.5rem;
+        font-size: 3rem;
     }
 }
 
@@ -73,67 +73,68 @@ section#activites {
     padding: 0;
     margin: 0;
 
-    div {
+    .sub-section {
         position: relative;
-    }
-
-    div:nth-of-type(2) {
-        margin-top: 25px;
-    }
-
-    div.content {
-        position: absolute;
-        padding: 25px;
         transition: all 2s;
 
+        &.slide {
+            &:not(.animation-inversed) {
+                transform: translateX(40%);
+            }
+
+            &.animation-inversed {
+                transform: translateX(-40%);
+            }
+        }
+
         &:not(.animation-inversed) {
-            left: -40%;
+            div.content {
+                left: -40%;
+            }
         }
 
         &.animation-inversed {
-            right: - 40%;
+            div.content {
-        }
+                right: - 40%;
-    }
+            }
-
-    div.content.slide, div.bg-img.slide {
-        &:not(.animation-inversed) {
-            transform: translateX(40%);
         }
 
-        &.animation-inversed {
+        div.content {
-            transform: translateX(-40%);
+            position: absolute;
-        }
+            padding: 25px;
-    }
-
-    div.headline {
-        margin-top: 50px;
-        padding: 25px;
-        transition: all 0.25s;
-        position: absolute;
-
-        &:not(.is-headline-inversed) {
-            left: 50px;
         }
 
-        &.is-headline-inversed {
+        div.headline {
-            right: 100px;
+            margin-top: 75px;
-        }
+            padding: 25px;
-    }
+            transition: all 0.25s;
+            position: absolute;
+            color: white;
 
-    div.headline.toggle-visibility {
+            &:not(.is-headline-inversed) {
-        display: none;
+                left: 50px;
-    }
+            }
 
-    div.bg-img {
+            &.is-headline-inversed {
-        position: absolute;
+                right: 100px;
-        transition: all 2s;
+            }
-
-        &.gala-img {
-            background-image: url('../img/gala.jpg');
         }
 
-        &.mtlgj-img {
+        div.headline.toggle-visibility {
-            background-image: url('../img/mtlgj.jpg');
+            display: none;
+        }
+
+        .bg-img {
+            position: absolute;
+            transition: all 2s;
+
+            &.gala-img {
+                background-image: url('../img/gala.jpg');
+            }
+
+            &.mtlgj-img {
+                background-image: url('../img/mtlgj.jpg');
+            }
         }
     }
 }

resources/sass/_partials/_media.scss

@@ -1,22 +1,26 @@
 @media only screen and (max-width: 1028px) {
     section#activites {
-        div.content {
+        .sub-section {
+            &.slide {
+                &:not(.animation-inversed) {
+                    transform: translateX(50%);
+                }
+
+                &.animation-inversed {
+                    transform: translateX(-50%);
+                }
+            }
+
             &:not(.animation-inversed) {
-                left: -50%;
+                div.content {
+                    left: -50%;
+                }
             }
 
             &.animation-inversed {
-                right: -50%;
+                div.content {
-            }
+                    right: -50%;
-        }
+                }
-
-        div.content.slide-in, div.bg-img.slide-out {
-            &:not(.animation-inversed) {
-                transform: translateX(50%);
-            }
-
-            &.animation-inversed {
-                transform: translateX(-50%);
             }
         }
     }
@@ -24,23 +28,27 @@
 
 @media only screen and (max-width: 768px) {
     section#activites {
-        div.content {
+        .sub-section {
+            &.slide {
+                &:not(.animation-inversed) {
+                    transform: translateX(75%);
+                }
+
+                &.animation-inversed {
+                    transform: translateX(-75%);
+                }
+            }
+
             &:not(.animation-inversed) {
-                left: -75%;
+                div.content {
+                    left: -75%;
+                }
             }
 
             &.animation-inversed {
-                right: -75%;
+                div.content {
-            }
+                    right: -75%;
-        }
+                }
-
-        div.content.slide-in, div.bg-img.slide-out {
-            &:not(.animation-inversed) {
-                transform: translateX(75%);
-            }
-
-            &.animation-inversed {
-                transform: translateX(-75%);
             }
         }
     }

view/fr/index.html

@@ -56,9 +56,9 @@
         </section>
         <section class="section" id="apropos"></section>
         <section class="section" id="activites">
-            <div class="full-height full-width is-full">
+            <div class="full-height full-width columns is-full sub-section">
                 <div class="bg-img gala-img full-height full-width"></div>
-                <div class="content is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
+                <div class="content column is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
                     <p></p>
                     <button class="button is-info is-outlined is-medium">Fermer</button>
                 </div>
@@ -68,14 +68,14 @@
                     <button class="button is-info is-outlined is-medium">En savoir plus</button>
                 </div>
             </div>
-            <div class="full-height full-width is-full">
+            <div class="full-height full-width is-full columns animation-inversed sub-section">
-                <div class="bg-img mtlgj-img animation-inversed full-height full-width"></div>
+                <div class="bg-img mtlgj-img full-height full-width"></div>
                 <div class="headline is-headline-inversed">
                     <h2>Montréal Game Jam</h2>
                     <p></p>
                     <button class="button is-info is-outlined is-medium">En savoir plus</button>
                 </div>
-                <div class="content animation-inversed is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
+                <div class="content column is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
                     <p></p>
                     <button class="button is-info is-outlined is-medium">Fermer</button>
                 </div>