Add sorting functionality to category pages

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;
 }
 

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';

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");
+        },
+    });
+});

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 }}">

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 %}

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) }} 
 

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") %}