[search] modify ui to include search suggestions

public/css/gogs.css

@@ -3302,3 +3302,104 @@ textarea#description {
   height: 5em;
   min-height: 5em;
 }
+.ui.loading.ginsearch .input > i.icon:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -0.64285714em 0 0 -0.64285714em;
+  width: 1.28571429em;
+  height: 1.28571429em;
+  -webkit-animation: button-spin 0.6s linear;
+  animation: button-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  border-radius: 500rem;
+  border-color: #767676 transparent transparent;
+  border-style: solid;
+  border-width: .2em;
+  box-shadow: 0 0 0 1px transparent;
+}
+/*--------------
+    Results
+---------------*/
+.ui.ginsearch > .results {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0%;
+  -webkit-transform-origin: center top;
+  transform-origin: center top;
+  white-space: normal;
+  background: #FFFFFF;
+  margin-top: 0.5em;
+  width: 18em;
+  border-radius: 0.28571429rem;
+  -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+  box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+  border: 1px solid #D4D4D5;
+  z-index: 998;
+}
+.ui.ginsearch > .results > :first-child {
+  border-radius: 0.28571429rem 0.28571429rem 0em 0em;
+}
+.ui.ginsearch > .results > :last-child {
+  border-radius: 0em 0em 0.28571429rem 0.28571429rem;
+}
+/*--------------
+    Result
+---------------*/
+.ui.ginsearch > .results .result {
+  cursor: pointer;
+  display: block;
+  overflow: hidden;
+  font-size: 1em;
+  padding: 0.85714286em 1.14285714em;
+  color: rgba(0, 0, 0, 0.87);
+  line-height: 1.33;
+  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
+}
+.ui.ginsearch > .results .result:last-child {
+  border-bottom: none !important;
+}
+/* Image */
+.ui.ginsearch > .results .result .image {
+  float: right;
+  overflow: hidden;
+  background: none;
+  width: 5em;
+  height: 3em;
+  border-radius: 0.25em;
+}
+.ui.ginsearch > .results .result .image img {
+  display: block;
+  width: auto;
+  height: 100%;
+}
+/*--------------
+    Message
+---------------*/
+.ui.ginsearch > .results > .message {
+  padding: 1em 1em;
+}
+.ui.ginsearch > .results > .message .header {
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.87);
+}
+.ui.ginsearch > .results > .message .description {
+  margin-top: 0.25rem;
+  font-size: 1em;
+  color: rgba(0, 0, 0, 0.87);
+}
+/* View All Results */
+.ui.ginsearch > .results > .action {
+  display: block;
+  border-top: none;
+  background: #F3F4F5;
+  padding: 0.92857143em 1em;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: bold;
+  text-align: center;
+}

public/js/gogs.js

@@ -1133,6 +1133,22 @@ function initCookieWarn() {
 	}
 }
 
+function initSuggest() {
+	$('.ui.ginsearch')
+		.search({
+			apiSettings: {
+				url: '/api/v1/repos/suggest/{query}'
+			},
+			fields: {
+				results: 'Items',
+				title: 'Title'
+			},
+			minCharacters: 3,
+			showNoResults: false
+		})
+	;
+}
+
 function initUserSettings() {
     console.log('initUserSettings');
 
@@ -1438,6 +1454,7 @@ $(document).ready(function () {
     initAdmin();
     initCodeView();
 	initCookieWarn();
+	initSuggest();
 
     // Repo clone url.
     if ($('#repo-clone-url').length > 0) {

public/less/_gin.less

@@ -141,3 +141,122 @@ textarea#description {
     min-height: 5em;
 }
 
+.ui.loading.ginsearch .input > i.icon:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+
+  margin:-.64285714em 0 0 -.64285714em;
+  width:1.28571429em;
+  height:1.28571429em;
+
+  -webkit-animation:button-spin .6s linear;
+  animation:button-spin .6s linear;
+  -webkit-animation-iteration-count:infinite;
+  animation-iteration-count:infinite;
+  border-radius:500rem;
+  border-color:#767676 transparent transparent;
+  border-style:solid;
+  border-width:.2em;
+  box-shadow:0 0 0 1px transparent
+}
+
+/*--------------
+    Results
+---------------*/
+
+.ui.ginsearch > .results {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0%;
+  -webkit-transform-origin: center top;
+  transform-origin: center top;
+  white-space: normal;
+  background: #FFFFFF;
+  margin-top: 0.5em;
+  width: 18em;
+  border-radius: 0.28571429rem;
+  -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+  box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
+  border: 1px solid #D4D4D5;
+  z-index: 998;
+}
+
+.ui.ginsearch > .results > :first-child {
+  border-radius: 0.28571429rem 0.28571429rem 0em 0em;
+}
+
+.ui.ginsearch > .results > :last-child {
+  border-radius: 0em 0em 0.28571429rem 0.28571429rem;
+}
+
+/*--------------
+    Result
+---------------*/
+
+.ui.ginsearch > .results .result {
+  cursor: pointer;
+  display: block;
+  overflow: hidden;
+  font-size: 1em;
+  padding: 0.85714286em 1.14285714em;
+  color: rgba(0, 0, 0, 0.87);
+  line-height: 1.33;
+  border-bottom: 1px solid rgba(34, 36, 38, 0.1);
+}
+
+.ui.ginsearch > .results .result:last-child {
+  border-bottom: none !important;
+}
+
+/* Image */
+
+.ui.ginsearch > .results .result .image {
+  float: right;
+  overflow: hidden;
+  background: none;
+  width: 5em;
+  height: 3em;
+  border-radius: 0.25em;
+}
+
+.ui.ginsearch > .results .result .image img {
+  display: block;
+  width: auto;
+  height: 100%;
+}
+
+/*--------------
+    Message
+---------------*/
+
+.ui.ginsearch > .results > .message {
+  padding: 1em 1em;
+}
+
+.ui.ginsearch > .results > .message .header {
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.ui.ginsearch > .results > .message .description {
+  margin-top: 0.25rem;
+  font-size: 1em;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* View All Results */
+
+.ui.ginsearch > .results > .action {
+  display: block;
+  border-top: none;
+  background: #F3F4F5;
+  padding: 0.92857143em 1em;
+  color: rgba(0, 0, 0, 0.87);
+  font-weight: bold;
+  text-align: center;
+}

templates/explore/search_ext.tmpl

@@ -1,24 +1,35 @@
 <form class="ui form labeled ">
-	<div class="ui fluid action input">
-		<input name="q" value="{{.Keywords}}" placeholder="{{if not .Keywords}}{{.i18n.Tr " explore.search"}}...{{end}}" autofocus>
-		<select class="ui dropdown" name="stype" id="search-type-select">
-			<option value="0" {{if eq .opsel 0}}selected{{end}}>Match</option>
-			<option value="1" {{if eq .opsel 1}}selected{{end}}>Fuzzy Term</option>
-			<option value="2" {{if eq .opsel 2}}selected{{end}}>Wildcard Term</option>
-			<option value="3" {{if eq .opsel 3}}selected{{end}}>Query String</option>
-		</select>
-		<button class="ui blue animated button">
-		<div class="hidden content">Search</div>
-		<div class="visible content">
+	<div class="ui ginsearch focus">
+		<div class="ui fluid action input">
+		<div class="ui left icon input">
+			<input name="q" value="{{.Keywords}}" class="prompt" placeholder="{{if not .Keywords}}{{.i18n.Tr " explore.search"}}...{{end}}"
+			autocomplete="off" type="text" autofocus>
 			<i class="search icon"></i>
 		</div>
-		</button>
-		<a href="https://web.gin.g-node.org/G-Node/Info/wiki/Search" class="ui vertical animated button" tabindex="0">
-		<div class="hidden content">Help</div>
-		<div class="visible content">
-			<i class="info icon"></i>
-		</div>
-		</a>
+
+	<select class="ui dropdown" name="stype" id="search-type-select">
+		<option value="0"
+		{{if eq .opsel 0}}selected{{end}}>Match</option>
+	<option value="1"
+	{{if eq .opsel 1}}selected{{end}}>Fuzzy Term
+</option>
+<option value="2" {{if eq .opsel 2}}selected{{end}}>Wildcard Term</option>
+<option value="3" {{if eq .opsel 3}}selected{{end}}>Query String</option>
+	</select>
+<button class="ui blue animated button">
+<div class="hidden content">Search</div>
+<div class="visible content">
+	<i class="search icon"></i>
+</div>
+</button>
+<a href="https://web.gin.g-node.org/G-Node/Info/wiki/Search" class="ui vertical animated button" tabindex="0">
+<div class="hidden content">Help</div>
+<div class="visible content">
+	<i class="info icon"></i>
+</div>
+</a>
+	</div>
 	</div>
 </form>
 <div class="ui divider"></div>
+