From 42f4f4cb6f21da4eee306cac74ada150d684ec51 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Sat, 18 Dec 2021 18:38:01 +0700
Subject: [PATCH] improved sort order mobile layout on home

---
 tubearchivist/home/templates/home/home.html | 41 ++++++++++-----------
 tubearchivist/static/css/style.css          |  4 ++
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html
index d61a163..28818ab 100644
--- a/tubearchivist/home/templates/home/home.html
+++ b/tubearchivist/home/templates/home/home.html
@@ -7,27 +7,26 @@
     </div>
     <div class="info-box info-box-2">
         <div class="sort">
-            <p>Sort by <span class="settings-current">{{ sort_by }}</span>
-                <select name="sort" id="sort" onchange="sortChange(this.value)">
-                    <option value="" disabled selected> -- change sort by -- </option>
-                    <option value="published">date published</option>
-                    <option value="downloaded">date downloaded</option>
-                    <option value="views">views</option>
-                    <option value="likes">likes</option>
-                </select>
-                <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
-                    {% if sort_order == "asc" %}
-                        <option value="asc" selected>asc</option>
-                    {% else %}
-                        <option value="asc">asc</option>
-                    {% endif %}
-                    {% if sort_order == "desc" %}
-                        <option value="desc" selected>desc</option>
-                    {% else %}
-                        <option value="desc">desc</option>
-                    {% endif %}
-                </select>
-            </p>
+            <span>Sort by <span class="settings-current">{{ sort_by }}</span></span>
+            <select name="sort" id="sort" onchange="sortChange(this.value)">
+                <option value="" disabled selected> -- change sort by -- </option>
+                <option value="published">date published</option>
+                <option value="downloaded">date downloaded</option>
+                <option value="views">views</option>
+                <option value="likes">likes</option>
+            </select>
+            <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
+                {% if sort_order == "asc" %}
+                    <option value="asc" selected>asc</option>
+                {% else %}
+                    <option value="asc">asc</option>
+                {% endif %}
+                {% if sort_order == "desc" %}
+                    <option value="desc" selected>desc</option>
+                {% else %}
+                    <option value="desc">desc</option>
+                {% endif %}
+            </select>
         </div>
         <div class="search-form icon-text">
             <div class="search-icon">
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 27ebbc5..e284a67 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -525,6 +525,10 @@ button:hover {
     margin-bottom: 10px;
 }
 
+.sort span {
+    width: 100%;
+}
+
 /* login */
 .login-page {
     display: flex;