Yay refine looks better (#1028)

* Yay refine looks better

* Added Translation

public/css/main.css

@@ -886,4 +886,30 @@ input.nav-btn {
 
 .comment-captcha {
 	width: 240px;
+}
+.refine-drop {
+	display: inline-block;
+	user-select: none;
+	cursor: pointer;
+}
+.refine-btn {
+	width: 10%;
+}
+.form-refine {
+	margin-bottom: 10px;
+}
+summary::-webkit-details-marker {
+	display: none
+}
+summary:after {
+	vertical-align: middle;
+	float: left;
+	margin: -3px 5px 0 0; 
+	content: "+"; 
+	font-size: 1.5em; 
+	font-weight: bold; 
+}
+details[open] summary:after {
+	content: "-";
+	margin: -4px 5px 0 0;
 }

templates/_search.html

@@ -39,32 +39,33 @@
 {{end}}
 {{define "search_refine"}}
 <div style="text-align:left;" class="box">
-    <form method="GET" action="">
+    <details>
+        <summary class="form-input refine-drop">{{ call $.T "refine_search" }}</summary>
+    <form style="display: grid;" method="GET" action="">
         <input type="hidden" name="s" value="{{.Search.Status}}"/>
         <input type="hidden" name="c" value="{{.Search.Category}}"/>
         <input type="hidden" name="max" value="{{.Navigation.MaxItemPerPage}}"/>
         <input type="hidden" name="userID" value="{{.Search.UserID}}"/>
         <input type="hidden" name="q" value="{{.Search.Query}}"/>
-    <span>Between <input class="form-input" size="7" name="minSize" type="text" value="{{.Search.MinSize}}"> and <input size="7" class="form-input" name="maxSize" type="text" value="{{.Search.MaxSize}}"> 
+    <span style="margin-top: 10px;" class="form-refine">{{ call $.T "between"}} <input class="form-input" size="7" name="minSize" type="text" value="{{.Search.MinSize}}"> {{ call $.T "and"}} <input size="7" class="form-input" name="maxSize" type="text" value="{{.Search.MaxSize}}"> 
     <select name="sizeType" class="form-input">
         <option value="b"{{if eq .Search.SizeType "b"}} selected{{end}}>B</option>
         <option value="k"{{if eq .Search.SizeType "k"}} selected{{end}}>KiB</option>
         <option value="m"{{if eq .Search.SizeType "m"}} selected{{end}}>MiB</option>
         <option value="g"{{if eq .Search.SizeType "g"}} selected{{end}}>GiB</option>
     </select>
-     large.
+     {{ call $.T "large"}}.
     </span>
-    <br>
+    <span class="form-refine">{{ call $.T "between"}} <input class="form-input" size="7" name="fromDate" type="text" value="{{.Search.FromDate}}"> {{ call $.T "and"}} <input class="form-input" size="7" name="toDate" type="text" value="{{.Search.ToDate}}"> 
-    <span>Between <input class="form-input" size="7" name="fromDate" type="text" value="{{.Search.FromDate}}"> and <input class="form-input" size="7" name="toDate" type="text" value="{{.Search.ToDate}}"> 
     <select name="dateType" class="form-input">
-        <option value="d"{{if eq .Search.DateType "d"}} selected{{end}}>days</option>
+        <option value="d"{{if eq .Search.DateType "d"}} selected{{end}}>{{ call $.T "days"}}</option>
-        <option value="m"{{if eq .Search.DateType "m"}} selected{{end}}>months</option>
+        <option value="m"{{if eq .Search.DateType "m"}} selected{{end}}>{{ call $.T "months"}}</option>
-        <option value="y"{{if eq .Search.DateType "y"}} selected{{end}}>years</option>
+        <option value="y"{{if eq .Search.DateType "y"}} selected{{end}}>{{ call $.T "years"}}</option>
     </select>
-     old.
+     {{call $.T "old"}}.
     </span>
-    <br>
+    <button type="submit" class="form-input refine-btn">{{$.T call "refine"}}</button>
-    <button style="margin-top:10px;" type="submit" class="form-input">Refine</button>
     </form>
+    </details>
 </div>
 {{end}}

translations/en-us.all.json

@@ -1390,5 +1390,41 @@
   {
     "id": "error_field_needed",
     "translation": "Field needed: %s"
+  },
+  {
+    "id": "refine_search",
+    "translation": "Refine your search"
+  },
+  {
+    "id": "between",
+    "translation": "Between"
+  },
+  {
+    "id": "and",
+    "translation": "and"
+  },
+  {
+    "id": "days",
+    "translation": "Days"
+  },
+  {
+    "id": "months",
+    "translation": "Months"
+  },
+  {
+    "id": "years",
+    "translation": "Years"
+  },
+  {
+    "id": "refine",
+    "translation": "Refine"
+  },
+  {
+    "id": "large",
+    "translation": "large."
+  },
+  {
+    "id": "old",
+    "translation": "old"
   }
 ]