Merge pull request #14 from hello-ulises/post-page-transition

initial try at adding the post page transition and styles

assets/css/components/_footer.scss

@@ -1,5 +1,9 @@
 .footer {
   background-color: var(--background-color);
+  transition: background-color $duration--long $easing--bezier-ease-in;
+
+  // not sure where this is being added
+  margin-top: -1rem;
   padding: 0 $spacing-03 calc(2 * $spacing-03) $spacing-03;
   > ul {
     > li {

assets/css/components/_nav.scss

@@ -4,7 +4,11 @@
   width: 100vw;
   z-index: 99;
   @include boxshadow;
+
   background-color: var(--background-color);
+  @include get-header-height("height");
+  transition: background-color $duration--long $easing--bezier-ease-in,
+    height $duration--xlong $easing--bezier-ease-out;
 
   a {
     text-decoration: none;
@@ -30,10 +34,6 @@
     padding: 1.35rem $spacing-03;
   }
 
-  // nav menu toggle
-  @include get-header-height("height");
-  transition: height $duration--xlong $easing--bezier-ease-out;
-
   .nav__links-list {
     transition: all $duration--xlong $easing--bezier-ease-out;
     opacity: 0;
@@ -111,6 +111,7 @@
   }
 
   .nav__close {
+    display: none;
     margin-left: $spacing-02;
     a::before,
     a::after {
@@ -155,6 +156,15 @@
   }
 }
 
+.p-post-page {
+  &.events,
+  &.projects {
+    .nav__close {
+      display: block;
+    }
+  }
+}
+
 .p-about .nav__links-list #about {
   display: none;
 }

assets/css/pages/_post-page.scss

@@ -1,22 +1,29 @@
-.post-page {
-  display: flex;
-  justify-content: center;
+.p-post-page {
+  .main-wrapper main:not(.leaving) {
+    display: flex;
+    justify-content: center;
+    background-color: var(--background-color);
+  }
+}
+
+.l-default.p-post-page .main-wrapper main.leaving {
+  color: $color__black;
 }
 
-.post-page__wrapper {
+.p-post-page__wrapper {
   @include breakpoint("medium") {
     max-width: 68rem;
   }
 
-  .post-page__section {
+  .p-post-page__section {
     margin-bottom: 3.5rem;
     @include breakpoint("medium") {
       margin-bottom: 10.5rem;
     }
   }
 }
 
-.post-page__header {
+.p-post-page__header {
   display: flex;
   justify-content: center;
   text-align: center;
@@ -28,7 +35,7 @@
   }
 }
 
-.post-page__featured-img {
+.p-post-page__featured-img {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -47,17 +54,17 @@
   }
 }
 
-.post-page__metadata {
+.p-post-page__metadata {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 4rem;
-  .post-page__field {
+  .p-post-page__field {
     display: flex;
     flex-direction: column;
   }
 
-  .post-page__label,
-  .post-page__value {
+  .p-post-page__label,
+  .p-post-page__value {
     @include get-map-values($serif);
     margin-bottom: $spacing-01;
 
@@ -67,7 +74,7 @@
   }
 }
 
-.post-page__content {
+.p-post-page__content {
   font-size: 1.2rem;
   @include breakpoint("medium") {
     p {

assets/css/pages/_post-type.scss

@@ -0,0 +1,24 @@
+.p-post-type {
+  .main-wrapper {
+    min-height: 100vh;
+  }
+  main {
+    opacity: 1;
+    transition: opacity $duration--xlong $easing--bezier-standard,
+      transform $duration--xlong $easing--bezier-standard;
+    min-height: 100vh;
+
+    &.entering {
+      position: absolute;
+      top: 0;
+      transform: translateX(100vw);
+    }
+
+    &.leaving {
+      position: absolute;
+      top: 0;
+      opacity: 0.75;
+      min-height: 200vh;
+    }
+  }
+}

assets/css/style.scss

@@ -1,6 +1,22 @@
 @import "normalize.css";
 @import "core/vars";
 @import "core/mixins";
+
+// default theme
+.l-default {
+  --background-color: #{$color__white};
+  --text-color: #{$color__black};
+  --link-hover-color: #{$color__gray--40};
+}
+
+// dark theme
+$background--dark: $color__black;
+.l-default.p-post-page {
+  --background-color: #{$color__black};
+  --text-color: #{$color__white};
+  --link-hover-color: #{$color__gray--40};
+}
+
 @import "core/typography";
 
 @import "components/nav";
@@ -13,27 +29,21 @@
 
 @import "pages/home";
 @import "pages/post-page";
+@import "pages/post-type";
 @import "pages/search";
 
-.l-default {
-  --background-color: #{$color__white};
-  --text-color: #{$color__black};
-  --link-hover-color: #{$color__gray--40};
+.main-wrapper {
+  main {
+    display: block;
+    background-color: $color__white;
 
-  background-color: var(--background-color);
-  transition: background-color $duration--long $easing--bezier-ease-in;
-}
+    width: calc(100% - 2 * #{$spacing-03});
+    padding-left: $spacing-03;
+    padding-right: $spacing-03;
 
-.l-default.p-post-page {
-  --background-color: #{$color__black};
-  --text-color: #{$color__white};
-  --link-hover-color: #{$color__gray--40};
-}
-
-.main-wrapper {
-  padding: $spacing-03;
-  margin-top: 3.5rem;
-  @include breakpoint("medium") {
-    margin-top: 10.5rem;
+    padding-top: 3.5rem;
+    @include breakpoint("medium") {
+      padding-top: 10.5rem;
+    }
   }
 }

assets/js/main.js

@@ -42,7 +42,6 @@ function getResultCard(result, card) {
  * Render search result cards
  */
 function renderSearchResults(results) {
-  // render search results
   let resultsCards = document.getElementById("resultsList");
   let card = document.querySelector("[data-search-result]");
 
@@ -63,23 +62,32 @@ function renderSearchResults(results) {
 /**
  * Handle paging
  */
-async function handlePaging(e, el, parser) {
+async function handlePageTransition(e, to, el, targetSelector, parser) {
   e.preventDefault();
-  const to = e.target.href;
   if (to) {
     let response = await fetch(to);
     let html = await response.text();
     let dom = parser.parseFromString(html, "text/html");
-    let nextCardList = dom.querySelector(".post-list-past__card-list");
-    el.appendChild(nextCardList);
+    let next = dom.querySelector(targetSelector);
+    el.appendChild(next);
     history.pushState(to, "", to);
   }
 }
 
+/**
+ * Post transition cleanup
+ */
+function handlePostpageTransition() {
+  let classList = document.querySelector("body").classList;
+  // @todo update to include projects
+  classList.add("events");
+  classList.add("p-post-page");
+}
+
 /**
  * Mutation observer callback
  */
-function handleMutation(mutations, el, oldNode) {
+function handleMutation(mutations, el, oldNode, callback = undefined) {
   let newNode = mutations[0]?.addedNodes[0];
   // handle transition states
   if (newNode) {
@@ -89,22 +97,40 @@ function handleMutation(mutations, el, oldNode) {
     oldNode.addEventListener(
       "transitionstart",
       () => {
-        setTimeout(() => {
-          newNode.classList.remove("entering");
+        newNode.classList.remove("entering");
+        if (callback) {
+          callback();
+        } else {
+          // we need this for pagination
           el.removeChild(oldNode);
-        }, 250);
+        }
       },
       { once: true }
     );
+
+    newNode.addEventListener(
+      "transitionend",
+      () => {
+        if (callback) {
+          el.removeChild(oldNode);
+        }
+      },
+      {
+        once: true,
+      }
+    );
   }
 
   return newNode || oldNode;
 }
 
 (async () => {
   const route = window.location;
-  let mutationObserver;
-
+  const mutationObserverOpts = {
+    attributes: false,
+    childList: true,
+    subtree: false,
+  };
   // init navigation listeners
   const navMenuToggle = document.getElementById("js-nav-menu-toggle");
   const navMenuClasses = document.getElementById("nav").classList;
@@ -137,11 +163,14 @@ function handleMutation(mutations, el, oldNode) {
 
   // handle events and projects routes
   if (/(events|projects)(\/\d+)?[\/]?$/.test(route.pathname)) {
+    // card list pagination
     const cardListWrapper = document.querySelector(
       ".post-list-past__card-list-wrapper"
     );
+
     const parser = new DOMParser();
-    let oldNode = document.querySelector(".post-list-past__card-list");
+    let oldListNode = document.querySelector(".post-list-past__card-list");
+    let oldMainNode = document.querySelector("main");
 
     // for the back button, mimic history
     addEventListener("popstate", function (e) {
@@ -151,21 +180,50 @@ function handleMutation(mutations, el, oldNode) {
     });
 
     // init mutation observer
-    mutationObserver = new MutationObserver((mutations) => {
-      oldNode = handleMutation(mutations, cardListWrapper, oldNode);
+    const paginationObserver = new MutationObserver((mutations) => {
+      oldListNode = handleMutation(mutations, cardListWrapper, oldListNode);
     });
 
-    mutationObserver.observe(cardListWrapper, {
-      attributes: false,
-      childList: true,
-      subtree: false,
-    });
+    paginationObserver.observe(cardListWrapper, mutationObserverOpts);
 
     // add pagination listeners
     document
       .querySelector(".pagination__list")
       .addEventListener("click", (e) =>
-        handlePaging(e, cardListWrapper, parser)
+        handlePageTransition(
+          e,
+          e.target.href,
+          cardListWrapper,
+          ".post-list-past__card-list",
+          parser
+        )
+      );
+
+    // postpage transition
+    const mainWrapper = document.querySelector(".main-wrapper");
+    const postcards = document.querySelectorAll(".postcard a");
+    postcards.forEach((postLink) => {
+      postLink.addEventListener("click", (e) =>
+        handlePageTransition(
+          e,
+          postLink.attributes.href.value,
+          mainWrapper,
+          "main",
+          parser
+        )
+      );
+    });
+
+    // init mutation observer
+    const postObserver = new MutationObserver((mutations) => {
+      oldMainNode = handleMutation(
+        mutations,
+        mainWrapper,
+        oldMainNode,
+        handlePostpageTransition
       );
+    });
+
+    postObserver.observe(mainWrapper, mutationObserverOpts);
   }
 })();

includes/navigation.html

@@ -30,6 +30,6 @@ <h1 class="nav__header-title"><a href="/">ulises</a>{% include "header-noun-scro
     </div>
 
     <div class="nav__action"><button id="js-nav-menu-toggle" class="button">Menu</button></div>
-    {% if layout == "post-page" %}<div class="nav__close"><a href="/{{ nav_title }}"></a></div>{% endif %}
+    <div class="nav__close"><a href="/{{ nav_title }}"></a></div>
   </div>
 </div>