From a349ae37341632b8987b9aa24911e561cee64e0b Mon Sep 17 00:00:00 2001
From: Sebastian Henschel <sebastian@tesobe.com>
Date: Wed, 8 Mar 2017 10:28:49 +0100
Subject: [PATCH] Improved responsiveness of filters in consumers + users list

---
 .../static/consumers/css/consumers.css        |  4 --
 .../consumers/templates/consumers/index.html  | 48 ++++++++++-------
 apimanager/users/templates/users/index.html   | 54 ++++++++++---------
 3 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/apimanager/consumers/static/consumers/css/consumers.css b/apimanager/consumers/static/consumers/css/consumers.css
index 27bb21c..7ec49ed 100644
--- a/apimanager/consumers/static/consumers/css/consumers.css
+++ b/apimanager/consumers/static/consumers/css/consumers.css
@@ -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;
diff --git a/apimanager/consumers/templates/consumers/index.html b/apimanager/consumers/templates/consumers/index.html
index 327a6e0..4162229 100644
--- a/apimanager/consumers/templates/consumers/index.html
+++ b/apimanager/consumers/templates/consumers/index.html
@@ -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>
 
diff --git a/apimanager/users/templates/users/index.html b/apimanager/users/templates/users/index.html
index 6ab3ede..c156b4f 100644
--- a/apimanager/users/templates/users/index.html
+++ b/apimanager/users/templates/users/index.html
@@ -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>