From 7c655a95058aa753355251eb78b83d31d44972ab Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 23 Aug 2022 14:07:20 +0200
Subject: Better navigation of related content

---
 templates/partials/grid_card.html | 76 ++++++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 36 deletions(-)

(limited to 'templates/partials/grid_card.html')

diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 9a0b06e..e75fa51 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -9,38 +9,45 @@
     $endif$
 >
     <div class="c-card__row l-media">
-        $if(it.indicator)$
-            <div class="c-card__indicator l-media__block"></div>
-        $endif$
-        $if(it.icon)$
+        $if(it.is_prev)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#arrow-left"></use>
+            </svg>
+        $elseif(it.is_next)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#blank"></use>
+            </svg>
+        $elseif(it.icon)$
             <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                 <use href="$assets.icons_svg$#$it.icon$"></use>
             </svg>
+        $elseif(it.indicator)$
+            <div class="c-card__indicator l-media__block"></div>
         $endif$
         <div class="l-media__block l-media__block--main">
-            $if(it.subtitle)$
+            $if(it.is_prev)$
+                <small class="u-d-block">Previous</small>
                 <div>
-                    <strong class="p-name" itemprop="name headline">
-                        $it.title$
-                    </strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
-                <small class="u-d-block">
-                    $it.subtitle$
-                </small>
+            $elseif(it.is_next)$
+                <small class="u-d-block">Next</small>
+                <div>
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
+                </div>
+            $elseif(it.subtitle)$
+                <div>
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
+                </div>
+                <small class="u-d-block">$it.subtitle$</small>
             $elseif(it.category)$
-                <small class="u-d-block">
-                    $it.category$
-                </small>
+                <small class="u-d-block">$it.category$</small>
                 <div>
-                    <strong class="p-name" itemprop="name headline">
-                        $it.title$
-                    </strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
             $elseif(it.show_date)$
                 <small class="u-d-block">
@@ -49,23 +56,20 @@
                     </time>
                 </small>
                 <div>
-                    <strong class="p-name" itemprop="name headline">
-                        $it.title$
-                    </strong>
-                    $if(it.draft)$
-                        <span class="o-badge u-ml-100">Draft</span>
-                    $endif$
+                    <strong class="p-name" itemprop="name headline">$it.title$</strong>
+                    $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
                 </div>
             $else$
-                <span class="p-name" itemprop="name headline">
-                    $it.title$
-                </span>
-                $if(it.draft)$
-                    <span class="o-badge u-ml-100">Draft</span>
-                $endif$
+                <span class="p-name" itemprop="name headline">$it.title$</span>
+                $if(it.draft)$<span class="o-badge u-ml-100">Draft</span>$endif$
             $endif$
         </div>
-        $if(it.post_icon)$
+        $if(it.is_next)$
+            <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="$assets.icons_svg$#arrow-right"></use>
+            </svg>
+        $elseif(it.is_prev)$
+        $elseif(it.post_icon)$
             <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                 <use href="$assets.icons_svg$#$it.post_icon$"></use>
             </svg>
-- 
cgit v1.2.3-70-g09d2