From de1ace16246da4dce4fe73debb47df68039a696e Mon Sep 17 00:00:00 2001
From: kilo <kilowwwww@gmail.com>
Date: Sun, 27 Aug 2017 03:21:00 +0200
Subject: [PATCH] Add tag inputs to refine search (#1394)

* Avoid language list being higher than 59px in refine

Otherwise that would break the visual for the future anidb & tag inputs on some very specific res

* CSS to make the new input look pretty & responsive

* HTML of the new inputs

* -1px
---
 public/css/main.css                           | 39 +++++++++++++++++--
 .../layouts/partials/helpers/search.jet.html  |  7 ++++
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index b4023b7e..3d961797 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -210,7 +210,7 @@ select.form-input {
     height: auto;
     border-radius: 5px;
     background-color: #F7F8F9;
-    padding: 10px 4px 9px 7px;
+    padding: 10px 4px 9px 6px;
 }
 
 .language span.input-group {
@@ -380,6 +380,7 @@ select.form-input {
 .box.refine .language {
     position: absolute; 
     right: 0;
+	top: 0;
 }
 
 .form-refine {
@@ -399,6 +400,7 @@ select.form-input {
     overflow: hidden;
 }
 
+
 .form-refine .refine-searchbox::placeholder {
     opacity: 0;
 }
@@ -411,7 +413,7 @@ select.form-input {
 .form-refine .refine-category {
     border-left: none;
     border-radius: 0 3px 3px 0;
-    max-width: 41%;
+    max-width: 40%;
     min-width: 162px;
 }
 
@@ -419,11 +421,25 @@ select.form-input {
 	display: flex;
 }
 .box.refine .refine-container-1 {
-    width: 53%;
+    width: 52%;
 }
 .box.refine .refine-container-2 {
-    width: 47%;
+    width: 48%;
     position: relative;
+	padding-top: 71px;
+}
+
+.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
+	float: right;
+	margin-left: 8px;
+	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;	
@@ -772,6 +788,7 @@ html, body {
     }
     .refine-container-2 {
 	margin-top: 5px;
+	padding-top: 0!important;
     }
     .form-refine .refine-category {
 	max-width: 30%;
@@ -779,6 +796,17 @@ html, body {
     .form-refine .refine-searchbox {
 	min-width: 190px;
     }
+	.refine-container-2 .refine-tag {
+	display:inline-block;
+	}
+	.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
+	float: initial;
+	margin-left: auto;
+	margin-right: 0;
+	}
+	.refine-container-2 .form-refine  span.spacing {
+		display:inline-block;
+	}
     .hide-xs {
 	display: none !important;
     }
@@ -924,6 +952,9 @@ html, body {
     #footer {
 	padding-bottom: 25px;
     }
+	.refine-container-2 input[type="number"],.refine-container-2 input[type="text"] {
+    width: 87px!important;
+	}
 }
 
 @media (max-width: 440px) {
diff --git a/templates/layouts/partials/helpers/search.jet.html b/templates/layouts/partials/helpers/search.jet.html
index 2eb1c3ba..c0096790 100644
--- a/templates/layouts/partials/helpers/search.jet.html
+++ b/templates/layouts/partials/helpers/search.jet.html
@@ -76,6 +76,13 @@
 	</span>
     </div>
 	  <div class="refine-container-2">
+		  <span class="form-refine refine-tag">
+			<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"/>
+		  </span>
 		  <div name="language" class="form-refine form-input language">
 			{{ yield flagList(languages=GetTorrentLanguages(), selected=Search.Languages, inputname="lang", id="refine-search")}}
 		  </div>