Some refine input & design changes changes (#1408)

* Fix missing class & change refine-container-2 inputs

* CSS changes to go along

* 1 pixel

* 2px

* -1px

* fix firefox select misalignement

public/css/main.css

@@ -167,6 +167,7 @@ select.form-input {
     -webkit-appearance: none;
     -moz-appearance: none;
     padding-right: 1.5rem;
+	padding: 4px 1.5rem 4px 5px;
     background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48"><path fill="%23676767" d="M24 34l18-20H6"/></svg>');
     background-position: right center;
     background-repeat: no-repeat;
@@ -426,21 +427,24 @@ select.form-input {
 .box.refine .refine-container-2 {
     width: 48%;
     position: relative;
-	padding-top: 71px;
+	padding-top: 67px;
 }
 
-.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
+.refine-container-2 span.form-refine {
 	float: right;
-	margin-left: 8px;
+	max-width: 426px;
+}
+.refine-container-2 span.spacing {
+	width: 75px;
+}
+.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
+	margin-right: 4px;
 	margin-bottom: 5px;
 	width: 100px!important;
 }
 .refine-container-2 input[type="text"] {
 	width: 70px;
 }
-.refine-container-2 .form-refine  span.spacing {
-	display: none;
-}
 .refine-date {
     width: 98px!important;	
 }
@@ -796,16 +800,12 @@ html, body {
     .form-refine .refine-searchbox {
 	min-width: 190px;
     }
-	.refine-container-2 .refine-tag {
+	.refine-container-2 span.spacing {
-	display:inline-block;
+		width: 100px;
 	}
-	.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
+	.refine-container-2 span.form-refine {
-	float: initial;
+		float: initial!important;
-	margin-left: auto;
+		max-width: none;
-	margin-right: 0;
-	}
-	.refine-container-2 .form-refine  span.spacing {
-		display:inline-block;
 	}
     .hide-xs {
 	display: none !important;
@@ -1702,9 +1702,7 @@ details[open] summary:after {
 .refine-btn {
     width: 426px;
 	max-width: 100%;
-	position:absolute;
+	float:right;
-	bottom: 2px;
-	right: 0;
 }
 
 .torrent-preview-table>table {

templates/layouts/partials/helpers/search.jet.html

@@ -56,7 +56,7 @@
     <span class="spacing">{{ T("from")}}</span>
     <input class="form-input refine-date" name="fromDate" type="text" value="{{Search.FromDate}}" placeholder="YYYY/MM/DD"/>
     {{ T("to")}}
-    <input class="form-input spacing" size="7" name="toDate" type="text" value="{{Search.ToDate}}" placeholder="YYYY/MM/DD"/>
+    <input class="form-input refine-date spacing" size="7" name="toDate" type="text" value="{{Search.ToDate}}" placeholder="YYYY/MM/DD"/>
     Exclude: <input type="number" name="nuserID" placeholder="UserID" value="" class="form-input refine-userid"/>
     </span>
 	<span class="form-refine show-xs" style="margin-bottom: 2px;">
@@ -76,9 +76,14 @@
 	</span>
     </div>
 	  <div class="refine-container-2">
-		  <span class="form-refine refine-tag">
+		  <span class="form-refine">
+			<span class="spacing">Quality:</span>
+			<select name="vq" class="form-input">
+			  <option value="1080">1080p</option>
+			</select>
+		  </span>
+		  <span class="form-refine">
 			<span class="spacing">Tags:</span>
-			  <input type="text" name="vq" placeholder="Quality" value="" class="form-input"/>
 			  <input type="number" name="vgmdb" placeholder="VGMdb" value="" class="form-input"/>
 			  <input type="number" name="vndb" placeholder="VnDB" value="" class="form-input"/>
 			  <input type="number" name="anidb" placeholder="AniDB" value="" class="form-input"/>