common/static/common/styles/_navigation.sass

@@ -10,6 +10,10 @@
   display: flex
   +padding(2)
 
+  .badge
+    +margin(3, left)
+    pointer-events: none
+
 .dropdown-item,
 .dropdown-toggle
   white-space: nowrap
@@ -30,7 +34,6 @@
 
 .dropdown-menu-filter-sort
   max-height: calc(var(--spacer) * 24.25)
-  overflow: auto
 
   .dropdown-item
     line-height: var(--lh-base)

extensions/templates/extensions/list.html

@@ -21,20 +21,15 @@
             </h2>
           {% endif %}
 
-          <div class="d-flex">
+          <div class="btn-row align-items-center">
+            <span class="text-secondary">Filter</span>
             {% if tags %}
-              <div class="dropdown dropdown-filter-sort me-2">
+              <div class="dropdown dropdown-filter-sort">
-                <button class="align-items-center d-flex dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-dropdown-menu-filter">
+                <button class="dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-dropdown-menu-filter">
                   {% if tag %}
                     {{ tag.name }}
-                    <div class="align-items-center bg-tertiary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
-                      {{ current_tag_count }}
-                    </div>
                   {% else %}
                     All
-                    <div class="align-items-center bg-tertiary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
-                      {{ total_count }}
-                    </div>
                   {% endif %}
 
                   <i class="i-chevron-down"></i>
@@ -45,7 +40,7 @@
                     {# TODO @back-end: Find a proper way to get the plural tag type to build the URL. #}
                     <a class="dropdown-item {% if not tag.name %}is-active{% endif %}" href="/{{ tag.get_type_display|slugify }}s/">
                       All
-                      <div class="align-items-center bg-tertiary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
+                      <div class="badge">
                         {{ total_count }}
                       </div>
                     </a>
@@ -55,7 +50,7 @@
                     <li>
                       <a class="dropdown-item {% if tag.name == list_tag.name %}is-active{% endif %}" href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
                         {{ list_tag.name }}
-                        <div class="align-items-center bg-tertiary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
+                        <div class="badge">
                         {{list_tag.count}}
                         </div>
                       </a>
@@ -64,20 +59,25 @@
                 </ul>
               </div>
             {% endif %}
-            <div class="dropdown dropdown-filter-sort">
+
-              <button class="dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-dropdown-menu-sort">
+            <div class="d-flex align-items-center ms-3">
-                Sort by {{ sort_by_option_name }} <i class="i-chevron-down"></i>
+              <span class="text-secondary">Sort By</span>
-              </button>
+              <div class="dropdown dropdown-filter-sort ms-3">
-              <ul class="dropdown-menu dropdown-menu-filter-sort dropdown-menu-right js-dropdown-menu" id="js-dropdown-menu-sort">
+                <button class="dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-dropdown-menu-sort">
-              {% for option_sort_by, name in sort_by_options.items %}
+                  {{ sort_by_option_name }} <i class="i-chevron-down"></i>
-                <li>
+                </button>
-                  <a class="dropdown-item{% if option_sort_by == sort_by %} is-active{% endif %}" href="?{% query_transform sort_by=option_sort_by %}">
+                <ul class="dropdown-menu dropdown-menu-filter-sort dropdown-menu-right js-dropdown-menu" id="js-dropdown-menu-sort">
-                    {{ name }}
+                {% for option_sort_by, name in sort_by_options.items %}
-                  </a>
+                  <li>
-                </li>
+                    <a class="dropdown-item{% if option_sort_by == sort_by %} is-active{% endif %}" href="?{% query_transform sort_by=option_sort_by %}">
-              {% endfor %}
+                      {{ name }}
-              </ul>
+                    </a>
+                  </li>
+                {% endfor %}
+                </ul>
+              </div>
             </div>
+
           </div>
         </div>
       </div>