From 917e6b616760a7e9b5e872ac8885af4232d36eb9 Mon Sep 17 00:00:00 2001
From: PlexSheep <software@cscherr.de>
Date: Sun, 8 Oct 2023 13:49:19 +0200
Subject: [PATCH] card view is now usable on mobile

---
 gawa/blog/templates/blog/browse.html   | 26 +++++++++++++-------------
 gawa/blog/templates/blog/featured.html |  2 +-
 gawa/static/custom.js                  |  7 +++++++
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/gawa/blog/templates/blog/browse.html b/gawa/blog/templates/blog/browse.html
index 84f2306..8f84dc7 100644
--- a/gawa/blog/templates/blog/browse.html
+++ b/gawa/blog/templates/blog/browse.html
@@ -110,18 +110,18 @@
         </div>
         <div class="row mb-5">
             <div class="container-fluid p-0 w-100 h-100">
-                <div class="row gap-3">
-                    {% if is_empty %}
-                        <div class="text-center">
-                            <img src="/media/img/http/404.svg"
-                                 class="img-fluid pb-5 pt-2 darkmode-invert"
-                                 style="max-height: 650px"
-                                 alt="404" />
-                            <h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
-                        </div>
-                    {% else %}
+                {% if is_empty %}
+                    <div class="text-center">
+                        <img src="/media/img/http/404.svg"
+                             class="img-fluid pb-5 pt-2 darkmode-invert"
+                             style="max-height: 650px"
+                             alt="404" />
+                        <h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
+                    </div>
+                {% else %}
+                    <div class="row gap-3 cardrow">
                         {% for post in posts %}
-                            <div class="card col mx-auto my-2 py-2" style="min-width: 400px;">
+                            <div class="card col mx-auto my-2 py-2">
                                 <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
                                    href=" {% url 'blog:post' post.category.slug post.slug %}">
                                     <img src="{{ post.thumbnail.url }}"
@@ -173,8 +173,8 @@
                                 </a>
                             </div>
                         {% endfor %}
-                    {% endif %}
-                </div>
+                    </div>
+                {% endif %}
             </div>
         </div>
     </div>
diff --git a/gawa/blog/templates/blog/featured.html b/gawa/blog/templates/blog/featured.html
index ee9f3e4..361907e 100644
--- a/gawa/blog/templates/blog/featured.html
+++ b/gawa/blog/templates/blog/featured.html
@@ -3,7 +3,7 @@
 {% get_current_language as LANGUAGE_CODE %}
 <div class="container-lg mt-5">
     <h4 class="">{% trans "Featured" %}</h4>
-    <div class="row row-cols-6 gap-1">
+    <div class="row gap-1 cardrow">
         {% for post in featured_posts %}
             <div class="card col mx-auto my-2">
                 <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
diff --git a/gawa/static/custom.js b/gawa/static/custom.js
index 3117a52..ad10936 100644
--- a/gawa/static/custom.js
+++ b/gawa/static/custom.js
@@ -58,3 +58,10 @@ document.querySelectorAll(".reset-empty-button").forEach((element) => {
     element.form.reset();
   };
 });
+
+// smaller cards depending on viewport
+document.querySelectorAll(".cardrow").forEach((element) => {
+  var level = Math.min(Math.floor(screen.width / 200), 6);
+  console.log(level);
+  element.classList.add("row-cols-" + level);
+});