move sort-by select box to right top corner of search result

Author: linyihai

templates/header/topbar_end.html

@@ -67,19 +67,6 @@
                     <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" tabindex="-1"
                         placeholder="Find crate" {%- if search_query %} value="{{ search_query }}" {%- endif %}>
                 </div>
-                {# The sort by select-box #}
-                <div id="search-select-nav"> 
-                    <label for="nav-sort">
-                        {{ "list" | fas }}
-                    </label>
-                    <select name="sort" id="nav-sort" aria-label="Find crate by the sort by select-box"  tabindex="-1">
-                        <option value="relevance" {%- if search_sort_by and search_sort_by == "relevance" %} selected="selected" {%- endif %}>Relevance</option>
-                        <option value="downloads" {%- if search_sort_by and search_sort_by == "downloads" %} selected="selected" {%- endif %}>All-Time Downloads</option>
-                        <option value="recent-downloads" {%- if search_sort_by and search_sort_by == "recent-downloads" %} selected="selected" {%- endif %}>Recent Downloads</option>
-                        <option value="recent-updates" {%- if search_sort_by and search_sort_by == "recent-updates" %} selected="selected" {%- endif %}>Recent Updates</option>
-                        <option value="new" {%- if search_sort_by and search_sort_by == "new" %} selected="selected" {%- endif %}>Newly Added</option>
-                    </select>
-                </div>
             </form>
         </div>
     </div>

templates/releases/releases.html

@@ -22,6 +22,7 @@
 {%- block body -%}
     <div class="container">
         <div class="recent-releases-container">
+            {%- block sort_by %}{% endblock sort_by -%}
             <ul>
                 {# TODO: If there are no releases, then display a message that says so #}
                 {%- for release in releases -%}

templates/releases/search_results.html

@@ -1,5 +1,23 @@
 {%- extends "releases/releases.html" -%}
 
+{% block sort_by %}
+<div id="search-select-nav"> 
+    <div class="item-end">
+        <span>Sort by</span>
+        <label for="nav-sort">
+            {{ "list" | fas }}
+        </label>
+        <select form="nav-search-form" name="sort" id="nav-sort" aria-label="Find crate by the sort by select-box"  tabindex="-1">
+            <option value="relevance" {%- if search_sort_by and search_sort_by == "relevance" %} selected="selected" {%- endif %}>Relevance</option>
+            <option value="downloads" {%- if search_sort_by and search_sort_by == "downloads" %} selected="selected" {%- endif %}>All-Time Downloads</option>
+            <option value="recent-downloads" {%- if search_sort_by and search_sort_by == "recent-downloads" %} selected="selected" {%- endif %}>Recent Downloads</option>
+            <option value="recent-updates" {%- if search_sort_by and search_sort_by == "recent-updates" %} selected="selected" {%- endif %}>Recent Updates</option>
+            <option value="new" {%- if search_sort_by and search_sort_by == "new" %} selected="selected" {%- endif %}>Newly Added</option>
+        </select>
+    </div>
+</div>
+{% endblock sort_by %}
+
 {% block pagination %}
     {%- if previous_page_link -%}
         <a class="pure-button pure-button-normal" href="{{ previous_page_link|safe }}">

templates/style/_navbar.scss

@@ -99,7 +99,7 @@ div.nav-container {
         display: flex;
         flex-direction: row;
 
-        #search-input-nav, #search-select-nav {
+        #search-input-nav {
             max-width: 150px;
             display: none;
             border-left: 1px solid var(--color-border);
@@ -130,7 +130,7 @@ div.nav-container {
             }
         }
 
-        input.search-input-nav:focus,  select.search-select-nav:focus {
+        input.search-input-nav:focus {
             outline: unset;
         }
 

templates/style/style.scss

@@ -241,6 +241,15 @@ div.landing {
     }
 }
 
+#search-select-nav {
+    display: flex;
+    flex-direction: column;
+
+    .item-end {
+        align-self: flex-end
+    }
+}
+
 div.recent-releases-container {
     text-align: left;
     padding-bottom: 50px;