Move dropdown to the right

This seems more in line with how UI is laid out on other sites I've seen.
rust-gamedev · Jan 27, 2025 · cb738ec · cb738ec
1 parent 3656aa2
commit cb738ec
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/sass/_extra.scss b/sass/_extra.scss
@@ -100,7 +100,8 @@ ul.ui.list li::before {
     margin-left: 0.5em;
 }
 
-#sort-menu {
+.crates-toolbar {
+    text-align: right;
     margin-bottom: 1.5em;
 }
 

diff --git a/templates/categories/page.html b/templates/categories/page.html
@@ -58,22 +58,24 @@ <h2 class="ui horizontal divider small header">
 
     <div class="ui vertical stripe">
         <div class="ui container">
-            <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 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 }}">