[PATCH 22/46] filters: Redesign the filters form with the help of bootstrap

[Damien Lespiau]

Signed-off-by: Damien Lespiau <damien.lespiau at intel.com>
---
 apps/patchwork/filters.py        | 16 +++++++++-------
 htdocs/css/style.css             | 18 +++++++++++-------
 templates/patchwork/filters.html | 36 ++++++++++++++++++++----------------
 3 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/apps/patchwork/filters.py b/apps/patchwork/filters.py
index 8159e03..41f4d32 100644
--- a/apps/patchwork/filters.py
+++ b/apps/patchwork/filters.py
@@ -133,7 +133,8 @@ class SubmitterFilter(Filter):
             name = self.person.name
         return mark_safe(('<input onKeyUp="submitter_field_change(this)" ' +
                 'name="submitter" id="submitter_input" ' +
-                        'value="%s"> ' % escape(name)) +
+                'class="form-control"' +
+                        'value="%s">' % escape(name)) +
                 '<select id="submitter_select" ' +
                 'disabled="true"></select>')
 
@@ -188,7 +189,7 @@ class StateFilter(Filter):
         return None
 
     def _form(self):
-        str = '<select name="%s">' % self.param
+        str = '<select name="%s" class="form-control">' % self.param
 
         selected = ''
         if not self.applied:
@@ -248,7 +249,7 @@ class SearchFilter(Filter):
         value = ''
         if self.search:
             value = escape(self.search)
-        return mark_safe('<input name="%s" value="%s">' %\
+        return mark_safe('<input name="%s" class="form-control" value="%s">' %\
                 (self.param, value))
 
     def form_function(self):
@@ -301,9 +302,10 @@ class ArchiveFilter(Filter):
             selected = ''
             if self.archive_state == b:
                 selected = 'checked="true"'
-            s += ('<input type="radio" name="%(param)s" ' + \
-                   '%(selected)s value="%(value)s">%(label)s' + \
-                   '    ') % \
+            s += ('<label class="checkbox-inline">' \
+                  ' <input type="radio" name="%(param)s" ' + \
+                           '%(selected)s value="%(value)s">%(label)s' + \
+                   '</label>') % \
                     {'label': label,
                      'param': self.param,
                      'selected': selected,
@@ -357,7 +359,7 @@ class DelegateFilter(Filter):
         delegates = User.objects.filter(userprofile__maintainer_projects =
                 self.filters.project)
 
-        str = '<select name="delegate">'
+        str = '<select name="delegate" class="form-control">'
 
         selected = ''
         if not self.applied:
diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index fcf5ac8..e09821e 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -134,17 +134,21 @@ table.patchlist td img {
 	vertical-align: bottom;
 }
 
-table.patchlist td.patchlistfilters {
-	background: #c0c0ff;
-	border-top: thin solid gray;
-	border-bottom: thin solid black;
-	font-size: smaller;
+.filters {
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    padding: 10px 20px;
+    margin-bottom: 20px;
 }
 
-td.patchlistfilters a {
-   color: black;
+a.filter-action {
+    color: black;
+}
+a.filter-action:hover {
+    text-decoration: none;
 }
 
+
 table.patchlist td.patchlistreorder {
 	background: #c0c0ff;
 	border-top: thin solid gray;
diff --git a/templates/patchwork/filters.html b/templates/patchwork/filters.html
index ae0486f..5bf446f 100644
--- a/templates/patchwork/filters.html
+++ b/templates/patchwork/filters.html
@@ -148,30 +148,34 @@ function submitter_field_change(field)
   {% for filter in filters.applied_filters %}
    {{ filter.name }} = <strong>{{ filter.condition }}</strong>
     {% if not filter.forced %}
-     <a href="{{ filter.url_without_me }}">  <span
-      class="glyphicon glyphicon-minus-sign" /></a>
+     <a class="filter-action"
+        href="{{ filter.url_without_me }}">  <span
+        class="glyphicon glyphicon-minus-sign" /></a>
     {% endif %}
    {% if not forloop.last %}   |   {% endif %}
   {% endfor %}
  {% else %}
-  none  <a href="javascript:filter_click()"><span
+  none  <a class="filter-action"
+   href="javascript:filter_click()"><span
    class="glyphicon glyphicon-plus-sign"></span></a>
  {% endif %}
  </div>
  <div id="filterform" style="padding-top: 1em; display: none">
-  <form action="" method="get" onSubmit="return filter_form_submit(this)">
-    <table>
-    {% for filter in filters.available_filters %}
-     <tr>
-      <td>{{ filter.name }}</td>
-      <td>{{ filter.form }}</td>
-     </tr>
-    {% endfor %}
-     <tr>
-      <td/>
-      <td><input type="submit" value="Apply"/></td>
-     </tr>
-    </table>
+  <form class="form-horizontal" role="form" method="get"
+   onSubmit="return filter_form_submit(this)">
+   {% for filter in filters.available_filters %}
+   <div class="form-group">
+    <label class="col-sm-2 control-label">{{ filter.name }}</label>
+    <div class="col-sm-5">
+      {{ filter.form }}
+    </div>
+   </div>
+   {% endfor %}
+   <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-5">
+     <button type="submit" class="btn btn-default">Apply</button>
+    </div>
+   </div>
   </form>
  </div>
 </div>
-- 
1.8.3.1