Merge pull request #123 from UnKnoWn-Consortium/patch-3

Issue #116: Reordering of the search bar

nyaa/static/css/main.css

@@ -51,9 +51,11 @@ table.torrent-list thead th.sorting:after {
 	color: #808080;
 	font-size: 0.85em;
 }
+
 table.torrent-list thead th.sorting_asc:after {
 	content: "\f0de";
 }
+
 table.torrent-list thead th.sorting_desc:after {
 	content: "\f0dd";
 }
@@ -97,21 +99,26 @@ table.torrent-list tbody .comments i {
 .table-hover > tbody > tr.deleted:hover > td, .table-hover > tbody > tr.deleted:hover > th, .table-hover > tbody > tr:hover > .deleted, .table-hover > tbody > tr > td.deleted:hover, .table-hover > tbody > tr > th.deleted:hover {
 	background-color:#bdbdbd;
 }
+
 .panel-deleted {
 	border-color:#757575;
 }
+
 .panel-deleted > .panel-heading {
 	color:#212121;
 	background-color:#9e9e9e;
 	border-color:#757575;
 }
+
 .panel-deleted > .panel-heading + .panel-collapse > .panel-body {
 	border-top-color:#757575;
 }
+
 .panel-deleted > .panel-heading .badge {
 	color:#9e9e9e;
 	background-color:#212121;
 }
+
 .panel-deleted > .panel-footer + .panel-collapse > .panel-body {
 	border-bottom-color:#757575;
 }
@@ -124,19 +131,6 @@ table.torrent-list tbody .comments i {
 	min-height: 360px;
 }
 
-@media (max-width: 991px){
-	.panel-body .col-md-5 {
-		margin-left: 20px;
-		margin-bottom: 10px;
-	}
-}
-
-@media (min-width: 992px){
-	.panel-body .col-md-5 {
-		word-wrap: break-word;
-	}
-}
-
 .search-container {
 	display: -webkit-box;
 	display: -ms-flexbox;
@@ -147,18 +141,33 @@ table.torrent-list tbody .comments i {
 	flex-direction: column;
 }
 
+.search-container > .search-bar {
+	border-left: 0;
+}
+
+#navFilter-criteria > .bootstrap-select:first-child {
+	border-right: solid 1px;
+}
+
+#navFilter-criteria > .bootstrap-select:first-child > button {
+	/* !important is used here to override the programmatically added style on element */
+	border-top-left-radius: 4px !important;
+	border-bottom-left-radius: 4px !important;
+}
+
 .form-control.search-bar {
-	-webkit-box-ordinal-group: 2;
+	-webkit-box-ordinal-group: 4;
-	-ms-flex-order: 1;
+	-ms-flex-order: 3;
-	order: 1;
+	order: 3;
 	width: 99%;
 	padding-right: 4em;
+	border-left: 0;
 }
 
 .search-btn {
-	-webkit-box-ordinal-group: 3;
+	-webkit-box-ordinal-group: 5;
-	-ms-flex-order: 2;
+	-ms-flex-order: 4;
-	order: 2;
+	order: 4;
 	-ms-flex-item-align: end;
 	align-self: flex-end;
 	top: -34px;
@@ -168,15 +177,15 @@ table.torrent-list tbody .comments i {
 }
 
 #navFilter-criteria {
-	-webkit-box-ordinal-group: 4;
+	-webkit-box-ordinal-group: 2;
-	-ms-flex-order: 3;
+	-ms-flex-order: 1;
-	order: 3;
+	order: 1;
 }
 
 #navFilter-category {
-	-webkit-box-ordinal-group: 5;
+	-webkit-box-ordinal-group: 3;
-	-ms-flex-order: 4;
+	-ms-flex-order: 2;
-	order: 4;
+	order: 2;
 }
 
 .nav-filter {
@@ -194,17 +203,6 @@ table.torrent-list tbody .comments i {
 	overflow-y: visible;
 }
 
-@media (min-width: 991px) {
-	.search-btn {
-		top: 0;
-		width: auto;
-	}
-
-	.bootstrap-select > button {
-		margin-top: auto;
-	}
-}
-
 /* Upload page drop zone */
 #upload-drop-zone
 {
@@ -253,13 +251,19 @@ ul.nav-tabs#profileTabs {
 	margin-top: 10px;
 	margin-bottom: 10px;
 }
+
 .comment-panel:target {
 	border-color: black;
 	border-width: 2px;
 }
 
-.text-purple, a.text-purple:visited { color: #a760bc; }
+.text-purple, a.text-purple:visited {
-a.text-purple:hover, a.text-purple:active, a.text-purple:focus { color: #a760e0; }
+	color: #a760bc; 
+}
+
+a.text-purple:hover, a.text-purple:active, a.text-purple:focus {
+	color: #a760e0; 
+}
 
 .comment-content {
 	word-break: break-all;
@@ -290,21 +294,27 @@ a.text-purple:hover, a.text-purple:active, a.text-purple:focus { color: #a760e0;
 	background-color: #cccfd2;
 	border-color: #ccc;
 }
+
 .btn-grey:hover, .btn-grey:focus, .btn-grey:active, .btn-grey.active, .open > .dropdown-toggle.btn-grey {
 	background-color: #aaaaaa;
 }
+
 .btn span.glyphicon-check {
 	display: none;
 }
+
 .btn.active span.glyphicon-check {
 	display: inline;
 }
+
 .btn span.glyphicon-unchecked {
 	display: inline;
 }
+
 .btn.active span.glyphicon-unchecked {
 	display: none;
 }
+
 .center {
 	float: none;
 	margin: 0 auto;
@@ -365,3 +375,35 @@ h6:hover .header-anchor {
 	visibility: visible;
 	display: inline-block;
 }
+
+@media (max-width: 991px){
+	.panel-body .col-md-5 {
+		margin-left: 20px;
+		margin-bottom: 10px;
+	}
+	
+	#navFilter-criteria > .bootstrap-select:first-child > button {
+		/* !important is used here to override the programmatically added style on element */
+		border-top-left-radius: 0 !important;
+		border-bottom-left-radius: 0 !important;
+	}
+	
+	.search-container > .search-bar {
+		margin-top: 15px;
+	}
+}
+
+@media (min-width: 992px){
+	.panel-body .col-md-5 {
+		word-wrap: break-word;
+	}
+	
+	.search-btn {
+		top: 0;
+		width: auto;
+	}
+
+	.bootstrap-select > button {
+		margin-top: auto;
+	}
+}

nyaa/templates/layout.html

@@ -246,8 +246,6 @@
 					<form class="navbar-form navbar-right form" action="{{ url_for('home') }}" method="get">
 					{% endif %}
 						<div class="input-group search-container hidden-xs hidden-sm">
-							<input type="text" class="form-control search-bar" name="q" placeholder="{{ search_placeholder }}" value="{{ search['term'] if search is defined else '' }}" />
-					
 							<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="No filter" {% if search is defined and search["quality_filter"] == "0" %}selected{% else %}selected{% endif %}>No filter</option>
@@ -261,7 +259,8 @@
 									On narrow viewports, there isn't enough room to fit the full stuff in the selectpicker, so we show a full-width one on wide viewports, but squish it on narrow ones.
 								-->
 								{# XXX Search breaks with multiple fields with the same name: default to the shorter one so we don't break visuals. This is a hack! #}
-								{# <select class="selectpicker show-tick visible-lg" title="Category" data-width="200px" name="c">
+								{# 
+								<select class="selectpicker show-tick visible-lg" title="Category" data-width="200px" name="c">
 									<option value="0_0" title="All categories" {% if search is defined and search["category"] == "0_0" %}selected{% else %}selected{% endif %}>
 										All categories
 									</option>
@@ -270,7 +269,8 @@
 										{{ cat_name }}
 									</option>
 									{% endfor %}
-								</select> #}
+								</select> 
+								#}
 								<select class="selectpicker show-tick" title="Category" data-width="130px" name="c">
 									<option value="0_0" title="All categories" {% if search is defined and search["category"] == "0_0" %}selected{% else %}selected{% endif %}>
 										All categories
@@ -282,6 +282,7 @@
 									{% endfor %}
 								</select>
 							</div>
+							<input type="text" class="form-control search-bar" name="q" placeholder="{{ search_placeholder }}" value="{{ search['term'] if search is defined else '' }}" />
 							<div class="input-group-btn search-btn">
 								<button class="btn btn-primary" type="submit">
 									<i class="fa fa-search fa-fw"></i>