common/static/common/styles/_forms.sass

@@ -10,6 +10,10 @@
   +margin(2, left)
 
 .form-control-sm
+  font-size: var(--fs-sm)
+  height: calc(var(--spacer) * 2)
+  +padding(0, y)
+
   &[type="file"]
     font-size: var(--fs-xs)
     height: calc(var(--spacer) * 2)
@@ -22,3 +26,8 @@
 .was-validated .form-control:invalid,
 .form-control.is-invalid
   background-image: none
+
+select
+  &.form-control
+    &:hover
+      cursor: pointer

extensions/templates/extensions/list.html

@@ -6,33 +6,56 @@
 {% block content %}
 <div class="row">
   <div class="col-md-12 my-4">
-    {% if author %}
-      <h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ author }}</em></h2>
-    {% endif %}
-    {% if team %}
-      <h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ team.name }}</em></h2>
-    {% endif %}
-    {% if tag %}
-      <h2 class="d-flex align-items-center">
-        <span class="me-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
-        {% include "extensions/components/badge_tag.html" %}
-      </h2>
-    {% endif %}
     {% if type %}
-      <h2>{{ type }}</h2>
+      <div class="align-items-center d-flex justify-content-between mb-3">
-    {% endif %}
+        <h2>{{ type }}</h2>
-    {% if request.GET.q %}
+
-      <h2>{{ page_obj.paginator.count }} result{{ page_obj.paginator.count | pluralize }} for <em class="search-highlight">{{ request.GET.q }}</em></h2>
+        {# TODO: @back-end add sort based on select options #}
+        <div class="box d-flex p-2">
+          <label class="align-items-center d-flex fs-sm mb-0 me-3 text-nowrap"><i class="i-repeat me-1"></i>Sort by</label>
+          <select class="form-control form-control-sm">
+            <option value="-date_approved">Newest First</option>
+            <option value="date_approved">Oldest First</option>
+            <option value="-date_modified">Recently Updated</option>
+            <option value="-total_ratings_count">Most Reviewed</option>
+            <option value="-average_score">Rating</option>
+            <option value="-download_count">Downloads</option>
+            <option value="-name">Title (A-Z)</option>
+            <option value="name">Title (Z-A)</option>
+          </select>
+        </div>
+      </div>
+    {% else %}
+      {% if author %}
+        <h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ author }}</em></h2>
+      {% endif %}
+      {% if team %}
+        <h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ team.name }}</em></h2>
+      {% endif %}
+      {% if tag %}
+        <h2 class="d-flex align-items-center">
+          <span class="me-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
+          {% include "extensions/components/badge_tag.html" %}
+        </h2>
+      {% endif %}
+      {% if request.GET.q %}
+        <h2>{{ page_obj.paginator.count }} result{{ page_obj.paginator.count | pluralize }} for <em class="search-highlight">{{ request.GET.q }}</em></h2>
+      {% endif %}
     {% endif %}
 
     {% if tags %}
-      <div class="row">
+      <div class="mb-3 row">
         <div class="col-md-12">
           <div class="box p-2">
             <div class="btn-row">
               {# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
-              <a class="btn btn-sm {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
+              <a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
-                All
+                <div>
+                  All
+                </div>
+                <div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
+                  1
+                </div>
               </a>
               {% for list_tag in tags %}
                 <a class="align-items-center btn btn-sm d-flex {% if tag == list_tag %}btn-primary{% endif %}" href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
@@ -40,11 +63,9 @@
                     {{ list_tag.name }}
                   </div>
                   {# TODO: @back-end add tags count dynamic #}
-                  {% comment %}
+                  <div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
-                    <div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
+                    1
-                      1
+                  </div>
-                    </div>
-                  {% endcomment %}
                 </a>
               {% endfor %}
             </div>