category.php : don't show year if no article

assets/css/src/header.css

@@ -33,17 +33,22 @@
 }
 
 .page-cover {
+  position: relative;
   box-sizing: border-box;
   height: 100svh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding-top: 25svh;
+  padding-top: calc(var(--unit--vertical-relative) * 5);
   padding-bottom: calc(5 * var(--unit--vertical));
 }
 
+.page-cover.open + * {
+  margin-top: calc(var(--unit--vertical-relative) * 19);
+}
+
 #home .page-cover {
-  padding-top: 30svh;
+  padding-top: calc(var(--unit--vertical-relative) * 6);
 }
 
 #category .page-cover {

assets/css/src/html.css

@@ -6,6 +6,10 @@ body {
   color: var(--color-primary);
 }
 
+main {
+  position: relative;
+}
+
 hr {
   height: calc(var(--unit--vertical) / 2);
   border: none;

assets/css/src/tabs.css

@@ -26,22 +26,18 @@ button.toggle.right.open::before {
 }
 
 #tabs {
-  position: relative;
+  position: absolute;
-  margin-top: -25svh;
+  width: 100%;
-  margin-bottom: 30svh;
-  transition: margin-top 0.5s ease-in-out;
   z-index: 1;
-}
+  bottom: calc(var(--unit--vertical-relative) * 2);
-
-#tabs.open {
-  margin-bottom: calc(3 * var(--unit--vertical));
 }
 
 .active-tab {
-  max-height: 65svh;
+  position: absolute;
+  max-height: calc(var(--unit--vertical-relative) * 17);
   overflow: auto;
-  margin-top: var(--unit--vertical);
   transition: max-height 0.5s ease-in-out;
+  padding: var(--unit--vertical) 0;
 }
 /* ================= SCROLLBAR ================= */
 /* Works on Firefox */
@@ -68,10 +64,6 @@ button.toggle.right.open::before {
   border: none;
 }
 
-.page-cover.open .active-tab {
-  height: calc(100svh - 7.5 * var(--unit--vertical));
-}
-
 .texts__year.short .year__edito {
   display: -webkit-box;
   -webkit-box-orient: vertical;

assets/css/src/variables.css

@@ -8,6 +8,9 @@
 
   --unit--horizontal: 5vw;
   --unit--vertical: 1.7rem;
+  --unit--vertical-relative: calc(
+    var(--unit--vertical) * var(--window-height-factor)
+  );
 
   --font-size-s: 0.8rem;
   --font-size-m: calc(var(--font-size-s) * 1.5);

assets/js/script.js

@@ -10,7 +10,7 @@ function toggleTab(data, tab) {
     setTimeout(() => {
       data.isOpen = false;
       data.activeTab = "";
-    }, 300);
+    }, 500);
   } else {
     data.activeTab = tab;
     data.isOpen = true;
@@ -35,7 +35,7 @@ function setWindowHeightFactor() {
   const windowHeight = window.innerHeight;
   const min = 650;
   const delta = windowHeight - min;
-  const factor = roundToNearestHalf(delta / 150);
+  const factor = roundToNearestHalf(delta / 300) + 1;
 
   const head = document.querySelector("head");
   const style = document.createElement("style");
@@ -44,7 +44,8 @@ function setWindowHeightFactor() {
 }
 
 function roundToNearestHalf(num) {
-  return Math.round(num * 2) / 2;
+  const round = Math.round(num * 2) / 2;
+  return Math.max(round, 0);
 }
 
 setWindowHeightFactor();

site/snippets/cover.php

@@ -3,10 +3,14 @@ $isOpen = isset($isOpen) ? $isOpen : false;
 ?>
 
 <header 
+  x-data="{
+    activeTab: ''
+  }"
+  :class="activeTab.length > 0 ? 'open' : 'close'"
   class="page-cover"
 >
   <div class="title-wrapper">
     <?= $slots->title() ?>
   </div>
-</header>
   <?= $slots->tabs() ?>
+</header>

site/snippets/tabs.php

@@ -8,10 +8,7 @@ $authorFilter = isset($authorFilter) ? $authorFilter : false;
 $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
 ?>
 
-<nav id="tabs" x-data="{
+<nav id="tabs" :class="activeTab.length > 0 ? 'open' : 'close'">
-    activeTab: '<?= $activeTab ?>'
-  }"
-  :class="activeTab.length > 0 ? 'open' : 'close'">
     <div class="toggle-btns | flex space-between" style="
     --content:space-between;
     ">

site/templates/category.php

@@ -13,8 +13,10 @@
     >
       <ul>
       <?php foreach($kirby->collection('years') as $year): ?>
-        <?php if ($year) : ?>
+        <?php if (A::some($year->children()->toArray(), function ($text) use ($page) {
-        <?php endif ?>
+            return $text['content']['category'] == $page->title()->value();
+        })): ?>
+        <li>
           <div 
             x-data='{
               isOpen: false
@@ -35,13 +37,20 @@
             </div>
             <button 
               :class="isOpen ? 'open' : 'close'"
-              class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
+              class="see-more toggle left" @click="isOpen = !isOpen"
+            >
+              Lire
+            </button>
           </div>
+          <ul>
           <?php foreach($year->children() as $article): ?>
-          <?php if ($article->category() == $page->title()) : ?>
+            <?php if ($article->category() == $page->title()->value()) : ?>
               <?php snippet('text-item', ['article' => $article]) ?>
             <?php endif ?>
           <?php endforeach ?>
+          </ul>
+        </li>
+        <?php endif ?>
       <?php endforeach ?>
       </ul>
     </div>