From 621e021c19136a3909e98334b013d58e282f50bc Mon Sep 17 00:00:00 2001
From: Joe Clay <27cupsofcoffee@gmail.com>
Date: Sat, 25 Jan 2025 19:23:07 +0000
Subject: [PATCH] Use CSS grid for cards

The way that Semantic UI does columns for the cards is a massive pain to override (it uses negative margins for everything), and this was making the menu glitch out on mobile. CSS grid is supported by every major browser now, so there's no reason not to use it.
---
 sass/_extra.scss               | 37 +++++++++++++++++++++++++++-------
 static/assets/js/sortCrates.js |  2 +-
 templates/categories/page.html |  6 +++---
 templates/index.html           |  2 +-
 templates/macros.html          |  2 +-
 5 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/sass/_extra.scss b/sass/_extra.scss
index 997bf7d8..5a1d933f 100644
--- a/sass/_extra.scss
+++ b/sass/_extra.scss
@@ -41,16 +41,38 @@
     padding: 5em 0em;
 }
 
+// This is a replacement for Semantic UI's .cards class, using CSS Grid
+// instead of relying on negative margins for layout.
+.card-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5em;
+    margin: 0;
+}
+
+.card-grid.three {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.card-grid.four {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+.card-grid .ui.card {
+    width: 100%;
+    margin: 0;
+}
+
 .ui.card .image {
     height: 256px;
 }
 
-.ui.cards > .card > .content > .header:not(.ui, .center.aligned), .ui.card > .content > .header:not(.ui, .center.aligned) {
+.ui.card > .content > .header:not(.ui, .center.aligned) {
     display: inline-block;
     margin-bottom: 0;
 }
 
-.ui.card > .image > img, .ui.cards > .card > .image > img {
+.ui.card > .image > img {
     object-fit: cover;
     width: 100%;
     height: 100%;
@@ -79,7 +101,7 @@ ul.ui.list li::before {
 }
 
 #sort-menu {
-    margin-bottom: 1em;
+    margin-bottom: 1.5em;
 }
 
 @media only screen and (max-width: 991px) {
@@ -111,6 +133,10 @@ ul.ui.list li::before {
     .vertical.stripe .text.container p {
         font-size: 1.1em;
     }
+
+    .card-grid.three, .card-grid.four {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* Colors overridden to avoid inaccessible contrast levels */
@@ -120,11 +146,8 @@ a {
 }
 
 .ui.card > .extra,
-.ui.cards > .card > .extra,
 .ui.card .meta,
-.ui.cards > .card .meta,
-.ui.card .meta > a:not(.ui),
-.ui.cards > .card .meta > a:not(.ui) {
+.ui.card .meta > a:not(.ui) {
     color: #767676;
 }
 
diff --git a/static/assets/js/sortCrates.js b/static/assets/js/sortCrates.js
index 534a3e3b..123f80be 100644
--- a/static/assets/js/sortCrates.js
+++ b/static/assets/js/sortCrates.js
@@ -1,5 +1,5 @@
 function sortCrates(attribute, numeric, ascending) {
-    var section = $("#crates-section .cards");
+    var section = $("#crates-section .card-grid");
     var cards = section.children(".card");
 
     var default_value = numeric ? 0 : "";
diff --git a/templates/categories/page.html b/templates/categories/page.html
index 4ad71cdb..775d0c56 100644
--- a/templates/categories/page.html
+++ b/templates/categories/page.html
@@ -66,7 +66,7 @@ <h2 class="ui horizontal divider small header">
                 <ul class="menu">
                     <li class="item" data-value="data-name" data-order="asc">Sort by A-Z</li>
                     <li class="item" data-value="data-name">Sort by Z-A</li>
-                    
+
                     {% if section.extra.plural == "crates" %}
                         <li class="item" data-value="data-downloads" data-type="num">Sort by Downloads</li>
                         <li class="item" data-value="data-recent" data-type="num">Sort by Recent Downloads</li>
@@ -76,7 +76,7 @@ <h2 class="ui horizontal divider small header">
                 </ul>
             </div>
 
-            <ul class="ui stackable cards nolist {{ columns }}">
+            <ul class="ui card-grid nolist {{ columns }}">
                 {% for item in crates %}
                     {{ category_macros::info(item=item, section=section) }}
                 {% endfor %}
@@ -101,7 +101,7 @@ <h2 class="ui horizontal divider small header">
                     These {{ section.extra.plural }} are no longer maintained, but may still be of interest.
                 </div>
 
-                <ul class="ui stackable cards nolist {{ columns }}">
+                <ul class="ui card-grid nolist {{ columns }}">
                     {% for item in archived %}
                         {{ category_macros::info(item=item, section=section, archived=true) }}
                     {% endfor %}
diff --git a/templates/index.html b/templates/index.html
index ce252508..9c844b6b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -114,7 +114,7 @@ <h3 class="ui horizontal divider small header">
         </div>
 
         <div class="ui container">
-            <div class="ui three stackable cards">
+            <div class="ui three card-grid">
                 {% set data = load_data(path="content/contributors/data.toml") %}
                 {{ macros::contributors(contributors=data.contributors) }} 
 
diff --git a/templates/macros.html b/templates/macros.html
index aa562f29..7d723113 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -14,7 +14,7 @@ <h3 class="ui horizontal divider small header">
         {% endif %}
 
         <div class="ui container">
-            <div class="ui four stackable cards">
+            <div class="ui four card-grid">
                 {% set data = load_data(path="content/" ~ section.path ~ "data.toml") %}
 
                 {% for category in section.pages | sort(attribute="title") %}