Improved responsiveness of filters in consumers + users list

This commit is contained in:
Sebastian Henschel 2017-03-08 10:28:49 +01:00
parent 733301fd15
commit a349ae3734
3 changed files with 58 additions and 48 deletions

View File

@ -2,10 +2,6 @@
margin-top: 20px;
}
#consumers .btn-group.filter-enabled {
margin-left: 10px;
}
#consumers .btn-group-vertical.filter-enabled,
#consumers .btn-group-vertical.filter-apptype {
margin-top: 10px;

View File

@ -7,30 +7,38 @@
<div id="consumers">
<h1>Consumers</h1>
<div id="filter-time" class="filter">
<div class="btn-group hidden-xs filter-time" role="group" aria-label="filter-time">
{% include "consumers/includes/filter_time.html" %}
<div class="row">
<div class="col-xs-12 col-lg-7">
<div id="filter-time" class="filter">
<div class="btn-group hidden-md hidden-sm hidden-xs filter-time" role="group" aria-label="filter-time">
{% include "consumers/includes/filter_time.html" %}
</div>
<div class="btn-group-vertical visible-md visible-sm visible-xs filter-time" role="group" aria-label="filter-time">
{% include "consumers/includes/filter_time.html" %}
</div>
</div>
</div>
<div class="btn-group-vertical visible-xs filter-time" role="group" aria-label="filter-time">
{% include "consumers/includes/filter_time.html" %}
</div>
</div>
<div id="filter-enabled" class="filter">
<div class="btn-group hidden-sm hidden-xs pull-right filter-enabled" role="group" aria-label="filter-enabled">
{% include "consumers/includes/filter_enabled.html" %}
<div class="col-xs-12 col-lg-3">
<div id="filter-enabled" class="filter">
<div class="btn-group hidden-md hidden-sm hidden-xs filter-enabled" role="group" aria-label="filter-enabled">
{% include "consumers/includes/filter_enabled.html" %}
</div>
<div class="btn-group-vertical visible-md visible-sm visible-xs filter-enabled" role="group" aria-label="filter-enabled">
{% include "consumers/includes/filter_enabled.html" %}
</div>
</div>
</div>
<div class="btn-group-vertical visible-sm visible-xs filter-enabled" role="group" aria-label="filter-enabled">
{% include "consumers/includes/filter_enabled.html" %}
</div>
</div>
<div id="filter-apptype" class="filter">
<div class="btn-group hidden-sm hidden-xs pull-right filter-apptype" role="group" aria-label="filter-apptype">
{% include "consumers/includes/filter_apptype.html" %}
</div>
<div class="btn-group-vertical visible-sm visible-xs filter-apptype" role="group" aria-label="filter-apptype">
{% include "consumers/includes/filter_apptype.html" %}
<div class="col-xs-12 col-lg-2">
<div id="filter-apptype" class="filter">
<div class="btn-group hidden-md hidden-sm hidden-xs filter-apptype" role="group" aria-label="filter-apptype">
{% include "consumers/includes/filter_apptype.html" %}
</div>
<div class="btn-group-vertical visible-md visible-sm visible-xs filter-apptype" role="group" aria-label="filter-apptype">
{% include "consumers/includes/filter_apptype.html" %}
</div>
</div>
</div>
</div>

View File

@ -7,31 +7,37 @@
<div id="users">
<h1>Users</h1>
<div id="filter-role" class="filter">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% if active_role_name_all %}All Roles{% else %}{{ active_role_name }}{% endif %} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="?email={{ active_email }}&role_name=All">All Roles</a></li>
<li role="separator" class="divider"></li>
{% for role_name in role_names %}
<li><a href="?email={{ active_email }}&role_name={{ role_name }}">{{ role_name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div id="filter-email" class="filter">
<div class="btn-group">
<form action="" method="get">
<input type="hidden" name="role_name" value="{{ active_role_name }}" />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="text" class="form-control" size="30" name="email" placeholder="Enter email address ..." value="{% if not active_email_all %}{{ active_email }}{% endif %}" />
<div class="row">
<div class="col-xs-3 col-sm-2 col-lg-1">
<div id="filter-role" class="filter">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% if active_role_name_all %}All Roles{% else %}{{ active_role_name }}{% endif %} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="?email={{ active_email }}&role_name=All">All Roles</a></li>
<li role="separator" class="divider"></li>
{% for role_name in role_names %}
<li><a href="?email={{ active_email }}&role_name={{ role_name }}">{{ role_name }}</a></li>
{% endfor %}
</ul>
</div>
</form>
</div>
</div>
<div class="col-xs-9 col-sm-10 col-lg-11">
<div id="filter-email" class="filter">
<div class="btn-group">
<form action="" method="get">
<input type="hidden" name="role_name" value="{{ active_role_name }}" />
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="text" class="form-control" size="30" name="email" placeholder="Enter email address ..." value="{% if not active_email_all %}{{ active_email }}{% endif %}" />
</div>
</form>
</div>
</div>
</div>
</div>