Add sorting functionality to category pages (#596)

* Add sort menu to category pages * 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. * Remove data-license attribute * Make dropdown full width on mobile * Move dropdown to the right This seems more in line with how UI is laid out on other sites I've seen. * Don't generate sort attributes for archived crates
rust-gamedev · Jan 28, 2025 · 9f60c5d · 9f60c5d
1 parent d8e9e57
commit 9f60c5d
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 14 deletions.
diff --git 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%;
@@ -78,6 +100,11 @@ ul.ui.list li::before {
     margin-left: 0.5em;
 }
 
+.crates-toolbar {
+    text-align: right;
+    margin-bottom: 1.5em;
+}
+
 @media only screen and (max-width: 991px) {
     .masthead .ui.menu a.item {
         display: none;
@@ -107,6 +134,14 @@ ul.ui.list li::before {
     .vertical.stripe .text.container p {
         font-size: 1.1em;
     }
+
+    .card-grid.three, .card-grid.four {
+        grid-template-columns: 1fr;
+    }
+
+    #sort-menu {
+        width: 100%;
+    }
 }
 
 /* Colors overridden to avoid inaccessible contrast levels */
@@ -116,11 +151,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/sass/_semantic.scss b/sass/_semantic.scss
@@ -31,7 +31,7 @@
 // @import 'semantic/accordion';
 // @import 'semantic/checkbox';
 // @import 'semantic/dimmer';
-// @import 'semantic/dropdown';
+@import 'semantic/dropdown';
 //@import 'semantic/embed';
 //@import 'semantic/video';
 // @import 'semantic/modal';

diff --git a/static/assets/js/sortCrates.js b/static/assets/js/sortCrates.js
@@ -0,0 +1,42 @@
+function sortCrates(attribute, numeric, ascending) {
+    var section = $("#crates-section .card-grid");
+    var cards = section.children(".card");
+
+    var default_value = numeric ? 0 : "";
+
+    cards.sort(function (a, b) {
+        var aAttr = a.getAttribute(attribute) || default_value;
+        var bAttr = b.getAttribute(attribute) || default_value;
+
+        if (numeric) {
+            aAttr = parseInt(aAttr);
+            bAttr = parseInt(bAttr);
+        } else {
+            aAttr = aAttr.toUpperCase();
+            bAttr = bAttr.toUpperCase();
+        }
+
+        if (aAttr > bAttr) {
+            return ascending ? 1 : -1;
+        } else if (aAttr < bAttr) {
+            return ascending ? -1 : 1;
+        } else {
+            return 0;
+        }
+    });
+
+    cards.detach().appendTo(section);
+}
+
+$(document).ready(function () {
+    var sortDropdown = $("#sort-menu");
+
+    sortDropdown.dropdown({
+        onChange: function (value, text, selected) {
+            var type = selected[0].getAttribute("data-type");
+            var order = selected[0].getAttribute("data-order");
+
+            sortCrates(value, type == "num", order == "asc");
+        },
+    });
+});
diff --git a/templates/categories/macros.html b/templates/categories/macros.html
@@ -82,7 +82,7 @@
     {% endif %}
 {% endif %}
 
-<li class="ui card{% if archived %} archived{% endif %}">
+<li {% if archived %}class="ui card archived"{% else %}class="ui card" data-name="{{ name }}"{% if downloads %} data-downloads="{{ downloads }}"{%endif%}{% if recent_downloads %} data-recent="{{ recent_downloads }}"{% endif %}{% if stars %} data-stars="{{ stars }}"{% endif %}{% if last_activity %} data-activity="{{ last_activity }}"{% endif %}{% endif %}>
     {% if item.image %}
          {% if primary_url %}
             <a class="image" href="{{ primary_url }}">

diff --git a/templates/categories/page.html b/templates/categories/page.html
@@ -48,7 +48,7 @@ <h1 class="ui center aligned icon header">
     {% endif %}
 {% endfor %}
 
-<section>
+<section id="crates-section">
     <h2 class="ui horizontal divider small header">
         <a href="#{{ section.extra.plural | slugify }}" id="{{ section.extra.plural | slugify }}">
             <i class="list icon big" aria-hidden="true"></i>
@@ -58,7 +58,27 @@ <h2 class="ui horizontal divider small header">
 
     <div class="ui vertical stripe">
         <div class="ui container">
-            <ul class="ui stackable cards nolist {{ columns }}">
+            <div class="crates-toolbar">
+                <div id="sort-menu" class="ui dropdown icon selection">
+                    <i class="sort amount down icon" aria-hidden="true"></i>
+                    <span class="text">Sort by A-Z</span>
+                    <i class="dropdown icon" aria-hidden="true"></i>
+
+                    <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>
+                            <li class="item" data-value="data-stars" data-type="num">Sort by Stars</li>
+                            <li class="item" data-value="data-activity">Sort by Last Activity</li>
+                        {% endif %}
+                    </ul>
+                </div>
+            </div>
+
+            <ul class="ui card-grid nolist {{ columns }}">
                 {% for item in crates %}
                     {{ category_macros::info(item=item, section=section) }}
                 {% endfor %}
@@ -83,7 +103,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 %}
@@ -115,4 +135,9 @@ <h2 class="ui horizontal divider small header">
         </div>
     </div>
 </section>
-{% endblock content %}
+{% endblock content %}
+
+{% block footer %}
+    <script src="/assets/semantic/js/dropdown.min.js"></script>
+    <script src="/assets/js/sortCrates.js"></script>
+{% endblock %}
diff --git 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
@@ -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") %}