From bf20177756993a1373a235c195072151b3d13d49 Mon Sep 17 00:00:00 2001
From: rubenwardy <rw@rubenwardy.com>
Date: Mon, 14 Aug 2023 18:55:42 +0100
Subject: [PATCH] Use CSS grid for package tiles

---
 app/scss/custom.scss                      | 18 ++++++++++++++++++
 app/scss/packagegrid.scss                 |  7 -------
 app/templates/base.html                   |  2 +-
 app/templates/macros/packagegridtile.html |  9 ++-------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/scss/custom.scss b/app/scss/custom.scss
index 1b2d1a38..d2a48e87 100644
--- a/app/scss/custom.scss
+++ b/app/scss/custom.scss
@@ -262,3 +262,21 @@ pre {
 }
 
 @import "dracula.scss";
+
+.grid-2 {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-4 {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+}
+
+.gap-2 {
+	gap: 0.75rem;
+}
+
+.gap-3 {
+	gap: 1rem;
+}
diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
index e5f684b9..d0b6963e 100644
--- a/app/scss/packagegrid.scss
+++ b/app/scss/packagegrid.scss
@@ -1,11 +1,4 @@
 .packagetile {
-	list-style: none;
-	padding: 0;
-	margin: 0 7px 7px 0;
-	min-width: 250px;
-}
-
-li.d-flex {
 	list-style: none;
 	padding: 0;
 	margin: 0;
diff --git a/app/templates/base.html b/app/templates/base.html
index 51164f71..2845d38c 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -16,7 +16,7 @@
 	{%- endif %}
 
 	<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
-	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=40">
+	<link rel="stylesheet" type="text/css" href="/static/custom.css?v=41">
 	<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
 
 	{% if noindex -%}
diff --git a/app/templates/macros/packagegridtile.html b/app/templates/macros/packagegridtile.html
index 2fa3fab6..0ed7e7d5 100644
--- a/app/templates/macros/packagegridtile.html
+++ b/app/templates/macros/packagegridtile.html
@@ -38,16 +38,11 @@
 {% endmacro %}
 
 {% macro render_pkggrid(packages, show_author=True) -%}
-	<ul class="d-flex p-0 flex-row flex-wrap justify-content-start align-content-start ">
+	<ul class="grid-4 gap-2 p-0">
 		{% for p in packages %}
 			{{ render_pkgtile(p, show_author) }}
 		{% else %}
-			<li class="packagetile flex-fill"><i>{{ _("No packages available") }}</i></li>
+			<li class="packagetile"><i>{{ _("No packages available") }}</i></li>
 		{% endfor %}
-		{% if packages %}
-			{% for i in range(4) %}
-				<li class="packagetile flex-fill"></li>
-			{% endfor %}
-		{% endif %}
 	</ul>
 {% endmacro %}