Fix filter-list behavior with a class flag

This commit is contained in:
redref
2017-01-31 16:19:30 +01:00
parent 347749c0e1
commit 17f902c18f
4 changed files with 31 additions and 42 deletions

View File

@@ -1,11 +1,9 @@
$ = jQuery $ = jQuery
$ ->
$('input.filter-list').parent('div').removeClass('hide')
$("input.filter-list").on "keyup", (e) -> $("input.filter-list").on "keyup", (e) ->
rex = new RegExp($(this).val(), "i") rex = new RegExp($(this).val(), "i")
$(".searchable li").hide() $(".searchable li").hide()
$(".searchable li").parent().parent().hide() $(".searchable li").parent().parent('.list_hide_segment').hide()
$(".searchable li").filter( -> $(".searchable li").filter( ->
rex.test $(this).text() rex.test $(this).text()
).show() ).show()

View File

@@ -4,15 +4,11 @@
$ = jQuery; $ = jQuery;
$(function() {});
$('input.filter-list').parent('div').removeClass('hide');
$("input.filter-list").on("keyup", function(e) { $("input.filter-list").on("keyup", function(e) {
var ev, rex; var ev, rex;
rex = new RegExp($(this).val(), "i"); rex = new RegExp($(this).val(), "i");
$(".searchable li").hide(); $(".searchable li").hide();
$(".searchable li").parent().parent().hide(); $(".searchable li").parent().parent('.list_hide_segment').hide();
$(".searchable li").filter(function() { $(".searchable li").filter(function() {
return rex.test($(this).text()); return rex.test($(this).text());
}).show(); }).show();

View File

@@ -1,29 +1,29 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block content %} {% block content %}
<div class="ui fluid icon input hide" style="margin-bottom:20px"> <div class="ui fluid icon input" style="margin-bottom:20px">
<input autofocus="autofocus" class="filter-list" placeholder="Type here to filter..."> <input autofocus="autofocus" class="filter-list" placeholder="Type here to filter...">
</div> </div>
<div class="ui searchable stackable doubling four column grid factlist"> <div class="ui searchable stackable doubling four column grid factlist">
<div class="column"> <div class="column">
{%- set facts_count = 0 -%} {%- set facts_count = 0 -%}
{%- set break = facts_len//4 + 1 -%} {%- set break = facts_len//4 + 1 -%}
{%- for key,facts_list in facts_dict %} {%- for key,facts_list in facts_dict %}
<div class="ui segment"> <div class="ui list_hide_segment segment">
<a class="ui darkblue ribbon label">{{key}}</a> <a class="ui darkblue ribbon label">{{key}}</a>
<ul> <ul>
{%- for fact in facts_list %} {%- for fact in facts_list %}
<li><a href="{{url_for('fact', env=current_env, fact=fact)}}">{{fact}}</a></li> <li><a href="{{url_for('fact', env=current_env, fact=fact)}}">{{fact}}</a></li>
{%- endfor %} {%- endfor %}
</ul> </ul>
</div> </div>
{%- set facts_count = facts_count + facts_list|length -%} {%- set facts_count = facts_count + facts_list|length -%}
{%- if facts_count >= break -%} {%- if facts_count >= break -%}
</div> </div>
<div class="column"> <div class="column">
{%- set break = facts_len//4 + 1 + break -%} {%- set break = facts_len//4 + 1 + break -%}
{%- endif -%} {%- endif -%}
{%- set facts_count = facts_count + 5 -%} {%- set facts_count = facts_count + 5 -%}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% endblock content %} {% endblock content %}

View File

@@ -1,19 +1,14 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block content %} {% block content %}
<h1>Metrics</h1> <h1>Metrics</h1>
<div class="ui fluid icon input hide" style="margin-bottom:20px"> <div class="ui fluid icon input" style="margin-bottom:20px">
<input autofocus="autofocus" class="filter-table" placeholder="Type here to filter..."> <input autofocus="autofocus" class="filter-list" placeholder="Type here to filter...">
</div> </div>
<table class='ui very compact very basic sortable table'> <ul class="ui list searchable">
<thead>
<tr>Metric</tr>
</thead>
<tbody class="searchable">
{% for metric in metrics %} {% for metric in metrics %}
<tr> <li>
<td><a href="{{url_for('metric', env=current_env, metric=metric)}}">{{metric}}</a></td> <a href="{{url_for('metric', env=current_env, metric=metric)}}">{{metric}}</a>
</tr> </li>
{% endfor %} {% endfor %}
</tbody> </ul>
</table>
{% endblock content %} {% endblock content %}