added some simple search functionality to the repo list
This commit is contained in:
parent
b3f77d3226
commit
072dbd95b1
2 changed files with 31 additions and 6 deletions
|
@ -32,10 +32,10 @@
|
||||||
</header>
|
</header>
|
||||||
<section>
|
<section>
|
||||||
<form class="{{"pure-form"}} {{"search-form"}}">
|
<form class="{{"pure-form"}} {{"search-form"}}">
|
||||||
<input type="{{"search"}}" placeholder="{{"Filter List"}}" class="{{"pure-u-1"}}" />
|
<input type="{{"search"}}" placeholder="{{"Filter List"}}" class="{{"pure-u-1"}}" id="{{"search"}}" />
|
||||||
</form>
|
</form>
|
||||||
<div class="{{"repo-list"}}">{{range $repo := .Repos}}{{$__amber_5 := __amber_add "/" .Remote}}{{$__amber_6 := __amber_add $__amber_5 "/"}}{{$__amber_7 := __amber_add $__amber_6 .Owner}}{{$__amber_8 := __amber_add $__amber_7 "/"}}{{$__amber_9 := __amber_add $__amber_8 .Name}}
|
<div class="{{"repo-list"}}">{{range $repo := .Repos}}{{$__amber_5 := __amber_add "/" .Host}}{{$__amber_6 := __amber_add $__amber_5 "/"}}{{$__amber_7 := __amber_add $__amber_6 .Owner}}{{$__amber_8 := __amber_add $__amber_7 "/"}}{{$__amber_9 := __amber_add $__amber_8 .Name}}{{$__amber_10 := __amber_add .Owner "/"}}{{$__amber_11 := __amber_add $__amber_10 .Name}}
|
||||||
<a class="{{"pure-g"}} {{"repo-item"}}" data-status="{{.Active}}" href="{{$__amber_9}}">
|
<a class="{{"pure-g"}} {{"repo-item"}} {{"searchable"}}" data-status="{{.Active}}" href="{{$__amber_9}}" data-index="{{$__amber_11}}">
|
||||||
<div class="{{"pure-u-11-12"}}">
|
<div class="{{"pure-u-11-12"}}">
|
||||||
<h2>
|
<h2>
|
||||||
<span>{{.Owner}}</span>
|
<span>{{.Owner}}</span>
|
||||||
|
@ -55,5 +55,17 @@
|
||||||
<script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"}}"></script>
|
<script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"}}"></script>
|
||||||
<script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.1.0/jquery.timeago.js"}}"></script>
|
<script src="{{"//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.1.0/jquery.timeago.js"}}"></script>
|
||||||
<script src="{{"/static/scripts/main.js"}}"></script>
|
<script src="{{"/static/scripts/main.js"}}"></script>
|
||||||
|
<style id="{{"search_style"}}"></style>
|
||||||
|
<script type="{{"text/javascript"}}">
|
||||||
|
var searchStyle = document.getElementById('search_style');
|
||||||
|
document.getElementById('search').addEventListener('input', function() {
|
||||||
|
if (!this.value) {
|
||||||
|
searchStyle.innerHTML = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// look ma, no indexOf!
|
||||||
|
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value + "\"]) { display: none; }";
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -11,10 +11,10 @@ block content
|
||||||
i.fa.fa-rss
|
i.fa.fa-rss
|
||||||
section
|
section
|
||||||
form.pure-form.search-form
|
form.pure-form.search-form
|
||||||
input[type="search"][placeholder="Filter List"].pure-u-1
|
input[type="search"][placeholder="Filter List"].pure-u-1#search
|
||||||
div.repo-list
|
div.repo-list
|
||||||
each $repo in Repos
|
each $repo in Repos
|
||||||
a.pure-g.repo-item[data-status=Active][href="/"+Remote+"/"+Owner+"/"+Name]
|
a.pure-g.repo-item.searchable[data-status=Active][href="/"+Host+"/"+Owner+"/"+Name][data-index=Owner+"/"+Name]
|
||||||
div.pure-u-11-12
|
div.pure-u-11-12
|
||||||
h2
|
h2
|
||||||
span #{Owner}
|
span #{Owner}
|
||||||
|
@ -24,4 +24,17 @@ block content
|
||||||
if Active
|
if Active
|
||||||
span.repo-active On
|
span.repo-active On
|
||||||
else
|
else
|
||||||
span.repo-inactive Off
|
span.repo-inactive Off
|
||||||
|
|
||||||
|
block append scripts
|
||||||
|
style#search_style
|
||||||
|
script[type="text/javascript"]
|
||||||
|
var searchStyle = document.getElementById('search_style');
|
||||||
|
document.getElementById('search').addEventListener('input', function() {
|
||||||
|
if (!this.value) {
|
||||||
|
searchStyle.innerHTML = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// look ma, no indexOf!
|
||||||
|
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value + "\"]) { display: none; }";
|
||||||
|
});
|
||||||
|
|
Loading…
Reference in a new issue