From 679bc8aa3b0c518f79e105ea318ed43a6f67099b Mon Sep 17 00:00:00 2001 From: Nabil Kashyap Date: Sat, 27 Jan 2024 10:35:24 -0800 Subject: [PATCH] initial try at adding the post page transition and styles --- assets/css/components/_footer.scss | 4 ++ assets/css/components/_nav.scss | 18 ++++-- assets/css/pages/_post-page.scss | 31 ++++++---- assets/css/pages/_post-type.scss | 24 ++++++++ assets/css/style.scss | 46 ++++++++------ assets/js/main.js | 98 ++++++++++++++++++++++++------ includes/navigation.html | 2 +- layouts/default.liquid | 19 +++++- layouts/post-page.liquid | 30 ++++----- 9 files changed, 199 insertions(+), 73 deletions(-) create mode 100644 assets/css/pages/_post-type.scss diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index 76f6c13..3c5c4e5 100644 --- a/assets/css/components/_footer.scss +++ b/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 { diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 03d6f6b..5b69b5b 100644 --- a/assets/css/components/_nav.scss +++ b/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; } diff --git a/assets/css/pages/_post-page.scss b/assets/css/pages/_post-page.scss index 1a77edd..2ae8061 100644 --- a/assets/css/pages/_post-page.scss +++ b/assets/css/pages/_post-page.scss @@ -1,14 +1,21 @@ -.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; @@ -16,7 +23,7 @@ } } -.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 { diff --git a/assets/css/pages/_post-type.scss b/assets/css/pages/_post-type.scss new file mode 100644 index 0000000..32e306d --- /dev/null +++ b/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; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 0454506..d3d8f3f 100644 --- a/assets/css/style.scss +++ b/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; + } } } diff --git a/assets/js/main.js b/assets/js/main.js index bdd2f38..c1f93bf 100644 --- a/assets/js/main.js +++ b/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,13 +97,28 @@ 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; @@ -103,8 +126,11 @@ function handleMutation(mutations, el, 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); } })(); diff --git a/includes/navigation.html b/includes/navigation.html index 302e1e5..188095f 100644 --- a/includes/navigation.html +++ b/includes/navigation.html @@ -30,6 +30,6 @@

ulises{% include "header-noun-scro
- {% if layout == "post-page" %}
{% endif %} +
\ No newline at end of file diff --git a/layouts/default.liquid b/layouts/default.liquid index 5e447b6..0ede2c8 100644 --- a/layouts/default.liquid +++ b/layouts/default.liquid @@ -3,12 +3,25 @@ {% include "head.html" %} -{% capture pageClasses %}{% if layout == "post-page" %}{{ layout }}{% else %}{{ title }}{% endif %} {{ tags | itemType }}{% endcapture %} - +{% capture pageClass %} + {% if layout == "post-page" %} + {{ layout }} + {% else %} + {% if title == "events" or title == "projects"%} + post-type + {% else %} + {{ title }} + {% endif %} + {% endif %} +{% endcapture %} + + {% include "navigation.html" %}
+
{{ content }} -
+ + {% include "footer.html" %} diff --git a/layouts/post-page.liquid b/layouts/post-page.liquid index 1597589..84ebb73 100644 --- a/layouts/post-page.liquid +++ b/layouts/post-page.liquid @@ -2,38 +2,38 @@ layout: default --- -
-
-
-

{{ title }}

+
+
+
+

{{ title }}

{% if featured_img %} -
+
{% include "picture.html" metadata: imageMetadata %}
Caption
{% endif %%} {% if event_display_date %} -
-
- {{ title }} +
+
+ {{ title }}
-
- Date - {{ event_display_date }} +
+ Date + {{ event_display_date }}
{% if event_location %} -
- Location - {{ event_location }} +
+ Location + {{ event_location }}
{% endif %}
{% endif %} -
+
{{ content }}