Use semantic dropdown for code search query type (#15276)
Add comments to CSS rules Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
parent
afa781bf20
commit
013657ec76
|
@ -5,19 +5,17 @@
|
||||||
<form class="ui form ignore-dirty" style="max-width: 100%">
|
<form class="ui form ignore-dirty" style="max-width: 100%">
|
||||||
<input type="hidden" name="tab" value="{{$.TabName}}">
|
<input type="hidden" name="tab" value="{{$.TabName}}">
|
||||||
<div class="ui fluid action input">
|
<div class="ui fluid action input">
|
||||||
<div class="twelve wide field">
|
|
||||||
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..." autofocus>
|
<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>
|
||||||
<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>
|
||||||
<div class="three field">
|
|
||||||
<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
|
<button class="ui blue button">{{.i18n.Tr "explore.search"}}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
<div class="ui divider"></div>
|
<div class="ui divider"></div>
|
||||||
|
|
||||||
|
|
|
@ -5,20 +5,16 @@
|
||||||
<div class="ui repo-search">
|
<div class="ui repo-search">
|
||||||
<form class="ui form ignore-dirty" method="get">
|
<form class="ui form ignore-dirty" method="get">
|
||||||
<div class="ui fluid action input">
|
<div class="ui fluid action input">
|
||||||
<div class="twelve wide field">
|
|
||||||
<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "repo.search.search_repo"}}">
|
<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>
|
||||||
<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>
|
</div>
|
||||||
|
<button class="ui icon button" type="submit">{{svg "octicon-search" 16}}</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -240,6 +240,15 @@ a.muted:hover,
|
||||||
border-color: var(--color-primary) !important;
|
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 {
|
.ui.action.input:not([class*="left action"]) > input:focus {
|
||||||
border-right-color: var(--color-primary);
|
border-right-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue