From 9f9a3b911a50bd85f32c4dc067fd028780e69af8 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Tue, 21 May 2024 21:49:10 +0200
Subject: [PATCH] added "show more" button to posts sections

---
 web/_includes/devlog_category.html | 21 +++++++++++++++++----
 web/style.css                      | 13 ++++++++++---
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/web/_includes/devlog_category.html b/web/_includes/devlog_category.html
index c0a46d8..680f544 100644
--- a/web/_includes/devlog_category.html
+++ b/web/_includes/devlog_category.html
@@ -1,10 +1,13 @@
 <div class="devlogs">
-    <h2 class="devlog-category" id="{{ include.tag | slugify }}">{{ include.emoji }} {{ include.tag }}</h2>
+    {% assign slug = include.tag | slugify %}
+    <h2 class="devlog-category" id="{{ slug }}">{{ include.emoji }} {{ include.tag }}</h2>
     <p>{{ include.description }}</p>
 
-    {%- for post in site.posts -%}
+    {% assign total = 0 %}
+    {% for post in site.posts %}
         {%- if post.tags contains include.tag -%}
-            <div class="devlog">
+            {%- assign total = total | plus: 1 -%}
+            <div class="devlog devlog-{{ slug }}" {% if total > 6 %}hidden{% endif %}>
                 {%- if post.image -%}
                     {%- assign start = post.image | slice: 0, 4 -%}
                     {%- if start == "http" -%}
@@ -27,5 +30,15 @@
                 </div>
             </div>
         {%- endif -%}
-    {%- endfor -%}
+    {% endfor %}
+
+    {% if total > 6 %}
+        <button type="button" class="btn btn-link devlog-more" id="devlog-more-{{ slug }}">Show more</button>
+        <script>
+            $("#devlog-more-{{ slug }}").on("click", function () {
+                $(".devlog-{{ slug }}").removeAttr("hidden");
+                $(this).attr("hidden", true);
+            });
+        </script>
+    {% endif %}
 </div>
diff --git a/web/style.css b/web/style.css
index 99d16e3..9c1abf9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -142,12 +142,12 @@ a:visited.wide-link {
 }
 
 .devlog {
-    margin-bottom: 30px;
     min-width: 250px;
-    width: 45%;
+    width: calc(50% - 2px);
     display: inline-block;
     vertical-align: top;
-    margin-right: 20px;
+    padding-right: 20px;
+    padding-bottom: 30px;
 }
 
 .devlog-title {
@@ -165,6 +165,13 @@ a:visited.wide-link {
     margin-bottom: 10px;
 }
 
+.devlog-more {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+}
+
 .video-embed {
     position: relative;
     width: 100%;