From 36416a35974270868ded817afda312590455370e Mon Sep 17 00:00:00 2001
From: Nathan Yam <nathancyam@gmail.com>
Date: Tue, 16 May 2017 19:53:38 +1000
Subject: [PATCH 1/5] Fix search bar presentation

Need to fix filters and categories though. Looks
terrible.
---
 nyaa/static/css/main.css   | 33 +++++++++++++++++++++++++++++++++
 nyaa/templates/layout.html | 10 +++++-----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css
index 1743595..321bb3b 100644
--- a/nyaa/static/css/main.css
+++ b/nyaa/static/css/main.css
@@ -99,6 +99,39 @@ table.torrent-list thead th.sorting_desc:after {
 	}
 }
 
+.search-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.form-control.search-bar {
+    order: 1;
+    width: 88%;
+}
+
+.search-btn {
+	order: 2;
+	align-self: flex-end;
+	top: -34px;
+	height: 0;
+    width: auto;
+}
+
+#navFilter-category {
+    order: 3;
+}
+
+#navFilter-criteria {
+    order: 4;
+}
+
+@media (min-width: 768px) {
+	.search-btn {
+		top: 0;
+		width: auto;
+	}
+}
+
 /* elasticsearch term highlight */
 .hlt1 {
     font-style: normal;
diff --git a/nyaa/templates/layout.html b/nyaa/templates/layout.html
index 232d2d5..3c3e121 100644
--- a/nyaa/templates/layout.html
+++ b/nyaa/templates/layout.html
@@ -144,16 +144,16 @@
 				{% else %}
 				<form class="navbar-form navbar-right form" action="/" method="get">
 				{% endif %}
-					<div class="input-group">
-						<input type="text" class="form-control" name="q" placeholder="Search..." value="{{ search["term"] if search is defined else '' }}">
-						<div class="input-group-btn" id="navFilter">
+					<div class="input-group search-container">
+						<input type="text" class="form-control search-bar" name="q" placeholder="Search..." value="{{ search["term"] if search is defined else '' }}">
+						<div class="input-group-btn" id="navFilter-criteria">
 							<select class="selectpicker show-tick" title="Filter" data-width="120px" name="f">
 								<option value="0" title="Show all" {% if search is defined and search["quality_filter"] == "0" %}selected{% else %}selected{% endif %}>Show all</option>
 								<option value="1" title="No remakes" {% if search is defined and search["quality_filter"] == "1" %}selected{% endif %}>No remakes</option>
 								<option value="2" title="Trusted only" {% if search is defined and search["quality_filter"] == "2" %}selected{% endif %}>Trusted only</option>
 							</select>
 						</div>
-						<div class="input-group-btn" id="navFilter">
+						<div class="input-group-btn" id="navFilter-category">
 							{% set nyaa_cats = [('1_0', 'Anime', 'Anime'),
 												('1_1', '- Anime Music Video', 'Anime - AMV'),
 												('1_2', '- English-translated', 'Anime - English'),
@@ -202,7 +202,7 @@
 								{% endfor %}
 							</select>
 						</div>
-						<div class="input-group-btn">
+						<div class="input-group-btn search-btn">
 							<button class="btn btn-primary" type="submit">
 								<i class="fa fa-search fa-fw"></i>
 							</button>

From 51b93004d05cbe1d53d53ef29df5c08e6e75c15c Mon Sep 17 00:00:00 2001
From: Nathan Yam <nathancyam@gmail.com>
Date: Tue, 16 May 2017 20:01:38 +1000
Subject: [PATCH 2/5] Fix the order to match desktop

---
 nyaa/static/css/main.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css
index 321bb3b..163e154 100644
--- a/nyaa/static/css/main.css
+++ b/nyaa/static/css/main.css
@@ -117,12 +117,12 @@ table.torrent-list thead th.sorting_desc:after {
     width: auto;
 }
 
-#navFilter-category {
+#navFilter-criteria {
     order: 3;
 }
 
-#navFilter-criteria {
-    order: 4;
+#navFilter-category {
+	order: 4;
 }
 
 @media (min-width: 768px) {

From d3a4809cb94b95e3114add35c506f60ebfb20382 Mon Sep 17 00:00:00 2001
From: Nathan Yam <nathancyam@gmail.com>
Date: Tue, 16 May 2017 20:29:37 +1000
Subject: [PATCH 3/5] Fix text content length

---
 nyaa/static/css/main.css   | 25 +++++++++++++++++++++++--
 nyaa/templates/layout.html |  4 ++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css
index 163e154..301605f 100644
--- a/nyaa/static/css/main.css
+++ b/nyaa/static/css/main.css
@@ -106,7 +106,8 @@ table.torrent-list thead th.sorting_desc:after {
 
 .form-control.search-bar {
     order: 1;
-    width: 88%;
+    width: 99%;
+    padding-right: 4em; // Ensure text can not flow under button
 }
 
 .search-btn {
@@ -115,6 +116,7 @@ table.torrent-list thead th.sorting_desc:after {
 	top: -34px;
 	height: 0;
     width: auto;
+	z-index: 3;
 }
 
 #navFilter-criteria {
@@ -125,7 +127,26 @@ table.torrent-list thead th.sorting_desc:after {
 	order: 4;
 }
 
-@media (min-width: 768px) {
+.nav-filter {
+	width: 100%;
+    padding: 1em 0;
+}
+
+.nav-filter .bootstrap-select {
+	width: 100% !important;
+}
+
+.bootstrap-select > button {
+    margin-top: 1em;
+}
+
+/* Allows the bootstrap selects on nav show outside the
+ collapsible section of the navigation */
+.navbar-collapse.in {
+	overflow-y: visible;
+}
+
+@media (min-width: 991px) {
 	.search-btn {
 		top: 0;
 		width: auto;
diff --git a/nyaa/templates/layout.html b/nyaa/templates/layout.html
index 3c3e121..468e30f 100644
--- a/nyaa/templates/layout.html
+++ b/nyaa/templates/layout.html
@@ -146,14 +146,14 @@
 				{% endif %}
 					<div class="input-group search-container">
 						<input type="text" class="form-control search-bar" name="q" placeholder="Search..." value="{{ search["term"] if search is defined else '' }}">
-						<div class="input-group-btn" id="navFilter-criteria">
+						<div class="input-group-btn nav-filter" id="navFilter-criteria">
 							<select class="selectpicker show-tick" title="Filter" data-width="120px" name="f">
 								<option value="0" title="Show all" {% if search is defined and search["quality_filter"] == "0" %}selected{% else %}selected{% endif %}>Show all</option>
 								<option value="1" title="No remakes" {% if search is defined and search["quality_filter"] == "1" %}selected{% endif %}>No remakes</option>
 								<option value="2" title="Trusted only" {% if search is defined and search["quality_filter"] == "2" %}selected{% endif %}>Trusted only</option>
 							</select>
 						</div>
-						<div class="input-group-btn" id="navFilter-category">
+						<div class="input-group-btn nav-filter" id="navFilter-category">
 							{% set nyaa_cats = [('1_0', 'Anime', 'Anime'),
 												('1_1', '- Anime Music Video', 'Anime - AMV'),
 												('1_2', '- English-translated', 'Anime - English'),

From 0f9336cac5d7f57277bd392d70a170b2f0948c06 Mon Sep 17 00:00:00 2001
From: Nathan Yam <nathancyam@gmail.com>
Date: Tue, 16 May 2017 21:12:19 +1000
Subject: [PATCH 4/5] Format css nicely

---
 nyaa/static/css/main.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css
index 301605f..1434c19 100644
--- a/nyaa/static/css/main.css
+++ b/nyaa/static/css/main.css
@@ -105,9 +105,9 @@ table.torrent-list thead th.sorting_desc:after {
 }
 
 .form-control.search-bar {
-    order: 1;
-    width: 99%;
-    padding-right: 4em; // Ensure text can not flow under button
+	order: 1;
+	width: 99%;
+	padding-right: 4em; // Ensure text can not flow under button
 }
 
 .search-btn {
@@ -115,12 +115,12 @@ table.torrent-list thead th.sorting_desc:after {
 	align-self: flex-end;
 	top: -34px;
 	height: 0;
-    width: auto;
+	width: auto;
 	z-index: 3;
 }
 
 #navFilter-criteria {
-    order: 3;
+	order: 3;
 }
 
 #navFilter-category {
@@ -129,15 +129,11 @@ table.torrent-list thead th.sorting_desc:after {
 
 .nav-filter {
 	width: 100%;
-    padding: 1em 0;
-}
-
-.nav-filter .bootstrap-select {
-	width: 100% !important;
+	padding: 1em 0;
 }
 
 .bootstrap-select > button {
-    margin-top: 1em;
+	margin-top: 1em;
 }
 
 /* Allows the bootstrap selects on nav show outside the
@@ -151,6 +147,10 @@ table.torrent-list thead th.sorting_desc:after {
 		top: 0;
 		width: auto;
 	}
+
+	.bootstrap-select > button {
+		margin-top: auto;
+	}
 }
 
 /* elasticsearch term highlight */

From 2faeb5155076cee461d4e9f81eb4e24a45400812 Mon Sep 17 00:00:00 2001
From: Nathan Yam <nathancyam@gmail.com>
Date: Tue, 16 May 2017 21:20:12 +1000
Subject: [PATCH 5/5] Add vendor prefixes

---
 nyaa/static/css/main.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css
index 1434c19..0fb7cdd 100644
--- a/nyaa/static/css/main.css
+++ b/nyaa/static/css/main.css
@@ -100,18 +100,28 @@ table.torrent-list thead th.sorting_desc:after {
 }
 
 .search-container {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
 	flex-direction: column;
 }
 
 .form-control.search-bar {
+	-webkit-box-ordinal-group: 2;
+	-ms-flex-order: 1;
 	order: 1;
 	width: 99%;
-	padding-right: 4em; // Ensure text can not flow under button
+	padding-right: 4em;
 }
 
 .search-btn {
+	-webkit-box-ordinal-group: 3;
+	-ms-flex-order: 2;
 	order: 2;
+	-ms-flex-item-align: end;
 	align-self: flex-end;
 	top: -34px;
 	height: 0;
@@ -120,10 +130,14 @@ table.torrent-list thead th.sorting_desc:after {
 }
 
 #navFilter-criteria {
+	-webkit-box-ordinal-group: 4;
+	-ms-flex-order: 3;
 	order: 3;
 }
 
 #navFilter-category {
+	-webkit-box-ordinal-group: 5;
+	-ms-flex-order: 4;
 	order: 4;
 }