Merge pull request #80 from nathancyam/mobile_search

Issue #35: Mobile search improvements

nyaa/static/css/main.css

@@ -99,6 +99,74 @@ 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;
+}
+
+.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;
+	width: auto;
+	z-index: 3;
+}
+
+#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;
+}
+
+.nav-filter {
+	width: 100%;
+	padding: 1em 0;
+}
+
+.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;
+	}
+
+	.bootstrap-select > button {
+		margin-top: auto;
+	}
+}
+
 /* elasticsearch term highlight */
 .hlt1 {
     font-style: normal;

nyaa/templates/layout.html

@@ -145,16 +145,16 @@
 				{% else %}
 				<form class="navbar-form navbar-right form" action="/" method="get">
 				{% endif %}
-					<div class="input-group">
+					<div class="input-group search-container">
-						<input type="text" class="form-control" name="q" placeholder="Search..." value="{{ search["term"] if search is defined else '' }}">
+						<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">
+						<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">
+						<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'),
@@ -203,7 +203,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>