Reorder the animations of post lists

next-theme · Jan 1, 2023 · 0ed4632 · 0ed4632
1 parent e9cb704
commit 0ed4632
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl
@@ -25,7 +25,7 @@
 // ==================================================
 // Post blocks.
 .main-inner {
-  .sub-menu, .post-block, .tabs-comment, .comments, .pagination {
+  .sub-menu, .post-block, .tabs-comment, :not(.tab-pane) > .comments, .pagination {
     gemini-block();
   }
 
@@ -35,7 +35,7 @@
     }
   }
 
-  .tabs-comment, .comments, .pagination {
+  .tabs-comment, :not(.tab-pane) > .comments, .pagination {
     gemini-block-not-first();
   }
 }

diff --git a/source/js/motion.js b/source/js/motion.js
@@ -87,9 +87,9 @@ NexT.motion.middleWares = {
     const sequence = [];
     const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
 
-    function animate(animation, selector) {
+    function animate(animation, elements) {
       if (!animation) return;
-      document.querySelectorAll(selector).forEach(targets => {
+      elements.forEach(targets => {
         sequence.push({
           targets,
           complete: () => targets.classList.add('animated', animation),
@@ -98,10 +98,18 @@ NexT.motion.middleWares = {
       });
     }
 
-    animate(post_block, '.post-block, .pagination, .comments');
-    animate(coll_header, '.collection-header');
-    animate(post_header, '.post-header');
-    animate(post_body, '.post-body');
+    document.querySelectorAll('.post-block').forEach(targets => {
+      sequence.push({
+        targets,
+        complete: () => targets.classList.add('animated', post_block),
+        deltaT  : '-=100'
+      });
+      animate(coll_header, targets.querySelectorAll('.collection-header'));
+      animate(post_header, targets.querySelectorAll('.post-header'));
+      animate(post_body, targets.querySelectorAll('.post-body'));
+    });
+
+    animate(post_block, document.querySelectorAll('.pagination, .comments'));
 
     return sequence;
   },

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -176,11 +176,11 @@ NexT.utils = {
         tabContent.style.overflow = 'hidden';
         tabContent.style.transition = 'height 1s';
         // Comment system selection tab does not contain .active class.
-        const activeTab = tabContent.querySelector('.active') || tabContent.firstChild;
+        const activeTab = tabContent.querySelector('.active') || tabContent.firstElementChild;
         // Hight might be `auto`.
         const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0;
         const paddingTop = parseInt(window.getComputedStyle(activeTab).paddingTop.replace('px', ''), 10);
-        const marginBottom = parseInt(window.getComputedStyle(activeTab.firstChild).marginBottom.replace('px', ''), 10);
+        const marginBottom = parseInt(window.getComputedStyle(activeTab.firstElementChild).marginBottom.replace('px', ''), 10);
         tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px';
         // Add & Remove active class on `nav-tabs` & `tab-content`.
         [...nav.children].forEach(target => {