Use semantic dropdown for code search query type (#15276)

Add comments to CSS rules

Co-authored-by: zeripath <art27@cantab.net>

templates/explore/code.tmpl

@@ -5,19 +5,17 @@
 		<form class="ui form ignore-dirty" style="max-width: 100%">
 			<input type="hidden" name="tab" value="{{$.TabName}}">
 			<div class="ui fluid action input">
-            <div class="twelve wide field">
 				<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
+				<div class="ui dropdown selection">
+					<input name="t" type="hidden" value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					<div class="text">{{.i18n.Tr (printf "explore.search.%s" (or .queryType "fuzzy"))}}</div>
+					<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
+						<div class="item" data-value="">{{.i18n.Tr "explore.search.fuzzy"}}</div>
+						<div class="item" data-value="match">{{.i18n.Tr "explore.search.match"}}</div>
 					</div>
-            <div class="two wide field mx-2">
-                <select name="t">
-                    <option value="">{{.i18n.Tr "explore.search.fuzzy"}}</option>
-                    <option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "explore.search.match"}}</option>
-                </select>
 				</div>
-            <div class="three field">
 				<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
 			</div>
-            </div>
 		</form>
 		<div class="ui divider"></div>
 

templates/repo/search.tmpl

@@ -5,20 +5,16 @@
 		<div class="ui repo-search">
 			<form class="ui form ignore-dirty" method="get">
 				<div class="ui fluid action input">
-					<div class="twelve wide field">
 					<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
+					<div class="ui dropdown selection">
+						<input name="t" type="hidden" value="{{.queryType}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="text">{{.i18n.Tr (printf "repo.search.%s" (or .queryType "fuzzy"))}}</div>
+						<div class="menu transition hidden" tabindex="-1" style="display: block !important;">
+							<div class="item" data-value="">{{.i18n.Tr "repo.search.fuzzy"}}</div>
+							<div class="item" data-value="match">{{.i18n.Tr "repo.search.match"}}</div>
 						</div>
-					<div class="two wide field">
-						<select name="t">
-							<option value="">{{.i18n.Tr "repo.search.fuzzy"}}</option>
-							<option value="match" {{if eq .queryType "match"}}selected{{end}}>{{.i18n.Tr "repo.search.match"}}</option>
-						</select>
-					</div>
-					<div class="three field">
-					  <button class="ui button" type="submit">
-						  <i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
-					  </button>
 					</div>
+					<button class="ui icon button" type="submit">{{svg "octicon-search" 16}}</button>
 				</div>
 			</form>
 		</div>

web_src/less/_base.less

@@ -240,6 +240,15 @@ a.muted:hover,
   border-color: var(--color-primary) !important;
 }
 
+/* currently used for search bar dropdowns in repo search and explore code */
+.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
+  min-width: 10em;
+
+  &:not(:focus):not(:hover) {
+    border-right-color: transparent;
+  }
+}
+
 .ui.action.input:not([class*="left action"]) > input:focus {
   border-right-color: var(--color-primary);
 }