From 46a37afa86197ee82464c9e322c24161c467b126 Mon Sep 17 00:00:00 2001
From: Luan <luanpab@gmail.com>
Date: Fri, 1 Nov 2013 10:48:34 -0200
Subject: [PATCH] Changing filters on mobile and search form

---
 src/search/templates/search/includes/search_filters.html | 326 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/search/templates/search/search.html                  |  21 ++++++++++++++++++++-
 src/static/css/screen.css                                |   8 ++++++++
 src/templates/base.html                                  |  25 ++++++++++++++++++++++++-
 4 files changed, 214 insertions(+), 166 deletions(-)

diff --git a/src/search/templates/search/includes/search_filters.html b/src/search/templates/search/includes/search_filters.html
index ba889af..c69f14c 100644
--- a/src/search/templates/search/includes/search_filters.html
+++ b/src/search/templates/search/includes/search_filters.html
@@ -1,172 +1,170 @@
 {% load i18n superarchives %}
 
-<h3>{% trans "Filters" %}</h3>
-
-  {% if filters %}
-    <ul class="unstyled-list">
-      <li class="selected" title="{% trans "Remove filter" %}">
-        <a href="{% url 'haystack_search' %}?q={{ request.GET.q }}{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.since %}&since={{ request.GET.since }}{% endif %}{% if request.GET.until %}&until={{ request.GET.until }}{% endif %}">
-          <span class="glyphicon glyphicon-remove"></span> {{ filters.name }}
-        </a>
-      </li>
-    </ul>
-    <hr />
-    <form role="form">
-      <input type="hidden" name="q" value="{{ request.GET.q }}" />
-      <input type="hidden" name="order" value="{{ request.GET.order }}" />
-      <input type="hidden" name="type" value="{{ type_chosen }}" />
-      <input type="hidden" name="since" value="{{ request.GET.since }}" />
-      <input type="hidden" name="until" value="{{ request.GET.until }}" />
-
-      {% for field_lookup, field_display, field_value in filters.fields %}
-        <div class="form-group">
-          <label for="{{ field_lookup }}">{{ field_display }}</label>
-          {% if field_lookup == "list" %}
-            <select name="{{ field_lookup }}" class="form-control" multiple>
-              {% for value, option in form.fields.list.choices %}
-                <option value="{{ value }}" {% if value in field_value %}selected{% endif %}>{{ option }}</option>
-              {% endfor %}
-            </select>
-          {% elif field_lookup == "size" %}
-            <ul class="unstyled-list">
-              {% for value, option in size_choices %}
-                {% with value|add:" "|add:size_chosen as sizelistadd %}
-                  {% if value in field_value %}
-                    <li class="selected" title="{% trans "Remove filter" %}">
-                      <span class="glyphicon glyphicon-remove"></span>
-                      <a href="{% pop_from_get size=value %}">{{ option }}</a>
-                    </li>
-                  {% else %}
-                    <li>
-                      <span class="glyphicon glyphicon-chevron-right"></span>
-                      <a href="{% append_to_get size=sizelistadd %}">{{ option }}</a>
-                    </li>
-                  {% endif %}
-                {% endwith %}
-              {% endfor %}
-            </ul>
-          {% elif field_lookup == "mimetype" %}
-            <ul class="unstyled-list">
-              {% for value, option in mimetype_choices %}
-                {% with value|add:" "|add:mimetype_chosen as mimelistadd %}
-                  {% if value in mimetype_chosen %}
-                    <li class="selected"  title="{% trans "Remove filter" %}">
-                      <span class="glyphicon glyphicon-remove"></span>
-                      <a href="{% pop_from_get mimetype=value %}">{{ option }}</a>
-                    </li>
-                  {% else %}
-                    <li>
-                      <span class="glyphicon glyphicon-chevron-right"></span>
-                      <a href="{% append_to_get mimetype=mimelistadd %}">{{ option }}</a>
-                    </li>
-                  {% endif %}
-                {% endwith %}
-              {% endfor %}
-            </ul>
-          {% elif field_lookup == "used_by" %}
-            <ul class="unstyled-list">
-              {% for value, option in used_by_choices %}
-                {% with value|add:" "|add:used_by_chosen as used_byadd %}
-                  {% if value in used_by_chosen %}
-                    <li class="selected"  title="{% trans "Remove filter" %}">
-                      <span class="glyphicon glyphicon-remove"></span>
-                      <a href="{% pop_from_get used_by=value %}">{{ option }}</a>
-                    </li>
-                  {% else %}
-                    <li>
-                      <span class="glyphicon glyphicon-chevron-right"></span>
-                      <a href="{% append_to_get used_by=used_byadd %}">{{ option }}</a>
-                    </li>
-                  {% endif %}
-                {% endwith %}
-              {% endfor %}
-            </ul>
-          {% else %}
-            <input type="text" class="form-control" placeholder="{{ field_display }}" name="{{ field_lookup }}" {% if field_value %}value="{{ field_value }}"{% endif %}>
-          {% endif %}
-        </div>
-      {% endfor %}
-      <button type="submit" class="btn btn-default pull-right">
-        <span class="glyphicon glyphicon-filter"></span> {% trans 'Filter' %}
-      </button>
-    </form>
-    <br /><br /><hr />
-  {% endif %}
-
-  <h4>{% trans "Sort by" %}</h4>
+{% if filters %}
   <ul class="unstyled-list">
-    {% for option, dict_order in order_data.items %}
-      <li>
-        <span class="glyphicon glyphicon-chevron-right"></span>
-        <a href="{% append_to_get order=option p=1 %}">
-          {% ifequal request.GET.order option %}
-            {% blocktrans with name=dict_order.name %}<strong>{{ name }}</strong>{% endblocktrans %}
-          {% else %}
-            {% blocktrans with name=dict_order.name %}{{ name }}{% endblocktrans %}
-          {% endifequal %}
-        </a>
-      </li>
-    {% endfor %}
+    <li class="selected" title="{% trans "Remove filter" %}">
+      <a href="{% url 'haystack_search' %}?q={{ request.GET.q }}{% if request.GET.order %}&order={{ request.GET.order }}{% endif %}{% if request.GET.since %}&since={{ request.GET.since }}{% endif %}{% if request.GET.until %}&until={{ request.GET.until }}{% endif %}">
+        <span class="glyphicon glyphicon-remove"></span> {{ filters.name }}
+      </a>
+    </li>
   </ul>
-
-  {% if not request.GET.type %}
-    <h4>{% trans "Types" %}</h4>
-
-    <ul class="unstyled-list">
-      <li>
-        <span class="glyphicon glyphicon-book"></span>
-        <a href="{% append_to_get type='wiki' %}">{% trans "Wiki" %}</a>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-envelope"></span>
-        <a href="{% append_to_get type='thread' %}">{% trans "Discussion" %}</a>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tag"></span>
-        <a href="{% append_to_get type='ticket' %}">{% trans "Ticket" %}</a>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-align-right"></span>
-        <a href="{% append_to_get type='changeset' %}">{% trans "Changeset" %}</a>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-user"></span>
-        <a href="{% append_to_get type='user' %}">{% trans "User" %}</a>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-file"></span>
-        <a href="{% append_to_get type='attachment' %}">{% trans "Attachment" %}</a>
-      </li>
-    </ul>
-  {% endif %}
   <hr />
   <form role="form">
-    {% for name, value in request.GET.items %}
-      {% if value and not name == "since" and not name == "until" %}
-        <input type="hidden" name="{{ name }}" value="{{ value }}" />
-      {% endif %}
+    <input type="hidden" name="q" value="{{ request.GET.q }}" />
+    <input type="hidden" name="order" value="{{ request.GET.order }}" />
+    <input type="hidden" name="type" value="{{ type_chosen }}" />
+    <input type="hidden" name="since" value="{{ request.GET.since }}" />
+    <input type="hidden" name="until" value="{{ request.GET.until }}" />
+
+    {% for field_lookup, field_display, field_value in filters.fields %}
+      <div class="form-group">
+        <label for="{{ field_lookup }}">{{ field_display }}</label>
+        {% if field_lookup == "list" %}
+          <select name="{{ field_lookup }}" class="form-control" multiple>
+            {% for value, option in form.fields.list.choices %}
+              <option value="{{ value }}" {% if value in field_value %}selected{% endif %}>{{ option }}</option>
+            {% endfor %}
+          </select>
+        {% elif field_lookup == "size" %}
+          <ul class="unstyled-list">
+            {% for value, option in size_choices %}
+              {% with value|add:" "|add:size_chosen as sizelistadd %}
+                {% if value in field_value %}
+                  <li class="selected" title="{% trans "Remove filter" %}">
+                    <span class="glyphicon glyphicon-remove"></span>
+                    <a href="{% pop_from_get size=value %}">{{ option }}</a>
+                  </li>
+                {% else %}
+                  <li>
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                    <a href="{% append_to_get size=sizelistadd %}">{{ option }}</a>
+                  </li>
+                {% endif %}
+              {% endwith %}
+            {% endfor %}
+          </ul>
+        {% elif field_lookup == "mimetype" %}
+          <ul class="unstyled-list">
+            {% for value, option in mimetype_choices %}
+              {% with value|add:" "|add:mimetype_chosen as mimelistadd %}
+                {% if value in mimetype_chosen %}
+                  <li class="selected"  title="{% trans "Remove filter" %}">
+                    <span class="glyphicon glyphicon-remove"></span>
+                    <a href="{% pop_from_get mimetype=value %}">{{ option }}</a>
+                  </li>
+                {% else %}
+                  <li>
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                    <a href="{% append_to_get mimetype=mimelistadd %}">{{ option }}</a>
+                  </li>
+                {% endif %}
+              {% endwith %}
+            {% endfor %}
+          </ul>
+        {% elif field_lookup == "used_by" %}
+          <ul class="unstyled-list">
+            {% for value, option in used_by_choices %}
+              {% with value|add:" "|add:used_by_chosen as used_byadd %}
+                {% if value in used_by_chosen %}
+                  <li class="selected"  title="{% trans "Remove filter" %}">
+                    <span class="glyphicon glyphicon-remove"></span>
+                    <a href="{% pop_from_get used_by=value %}">{{ option }}</a>
+                  </li>
+                {% else %}
+                  <li>
+                    <span class="glyphicon glyphicon-chevron-right"></span>
+                    <a href="{% append_to_get used_by=used_byadd %}">{{ option }}</a>
+                  </li>
+                {% endif %}
+              {% endwith %}
+            {% endfor %}
+          </ul>
+        {% else %}
+          <input type="text" class="form-control" placeholder="{{ field_display }}" name="{{ field_lookup }}" {% if field_value %}value="{{ field_value }}"{% endif %}>
+        {% endif %}
+      </div>
     {% endfor %}
-    <div class="form-group">
-      <label for="since">{% trans "Since" %}</label>
-        <div class="input-group date" id="datepicker_since">
-          <input type="text" class="form-control" placeholder="{% trans "Since" %}" name="since" value="{{ request.GET.since }}" />
-          <span class="input-group-addon">
-            <span class="glyphicon glyphicon-calendar"></span>
-          </span>
-        </div>
-    </div>
-    <div class="form-group">
-      <label for="until">{% trans "Until" %}</label>
-        <div class="input-group date" id="datepicker_until">
-          <input type="text" class="form-control" placeholder="{% trans "Until" %}" name="until" value="{{ request.GET.until }}" />
-          <span class="input-group-addon">
-            <span class="glyphicon glyphicon-calendar"></span>
-          </span>
-        </div>
-    </div>
-    <p class="text-right">
-      <button type="submit" class="btn btn-default">
-        <span class="glyphicon glyphicon-filter"></span> {% trans "Filter" %}
-      </button>
-    </p>
+    <button type="submit" class="btn btn-default pull-right">
+      <span class="glyphicon glyphicon-filter"></span> {% trans 'Filter' %}
+    </button>
   </form>
+  <br /><br /><hr />
+{% endif %}
+
+<h4>{% trans "Sort by" %}</h4>
+<ul class="unstyled-list">
+  {% for option, dict_order in order_data.items %}
+    <li>
+      <span class="glyphicon glyphicon-chevron-right"></span>
+      <a href="{% append_to_get order=option p=1 %}">
+        {% ifequal request.GET.order option %}
+          {% blocktrans with name=dict_order.name %}<strong>{{ name }}</strong>{% endblocktrans %}
+        {% else %}
+          {% blocktrans with name=dict_order.name %}{{ name }}{% endblocktrans %}
+        {% endifequal %}
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+
+{% if not request.GET.type %}
+  <h4>{% trans "Types" %}</h4>
+
+  <ul class="unstyled-list">
+    <li>
+      <span class="glyphicon glyphicon-book"></span>
+      <a href="{% append_to_get type='wiki' %}">{% trans "Wiki" %}</a>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-envelope"></span>
+      <a href="{% append_to_get type='thread' %}">{% trans "Discussion" %}</a>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-tag"></span>
+      <a href="{% append_to_get type='ticket' %}">{% trans "Ticket" %}</a>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-align-right"></span>
+      <a href="{% append_to_get type='changeset' %}">{% trans "Changeset" %}</a>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-user"></span>
+      <a href="{% append_to_get type='user' %}">{% trans "User" %}</a>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-file"></span>
+      <a href="{% append_to_get type='attachment' %}">{% trans "Attachment" %}</a>
+    </li>
+  </ul>
+{% endif %}
+<hr />
+<form role="form">
+  {% for name, value in request.GET.items %}
+    {% if value and not name == "since" and not name == "until" %}
+      <input type="hidden" name="{{ name }}" value="{{ value }}" />
+    {% endif %}
+  {% endfor %}
+  <div class="form-group">
+    <label for="since">{% trans "Since" %}</label>
+      <div class="input-group date" id="datepicker_since">
+        <input type="text" class="form-control" placeholder="{% trans "Since" %}" name="since" value="{{ request.GET.since }}" />
+        <span class="input-group-addon">
+          <span class="glyphicon glyphicon-calendar"></span>
+        </span>
+      </div>
+  </div>
+  <div class="form-group">
+    <label for="until">{% trans "Until" %}</label>
+      <div class="input-group date" id="datepicker_until">
+        <input type="text" class="form-control" placeholder="{% trans "Until" %}" name="until" value="{{ request.GET.until }}" />
+        <span class="input-group-addon">
+          <span class="glyphicon glyphicon-calendar"></span>
+        </span>
+      </div>
+  </div>
+  <p class="text-right">
+    <button type="submit" class="btn btn-default">
+      <span class="glyphicon glyphicon-filter"></span> {% trans "Filter" %}
+    </button>
+  </p>
+</form>
diff --git a/src/search/templates/search/search.html b/src/search/templates/search/search.html
index 7e59636..2e76098 100644
--- a/src/search/templates/search/search.html
+++ b/src/search/templates/search/search.html
@@ -41,8 +41,27 @@
 
   <div class="row">
     <div id="filters" class="hidden-xs hidden-sm col-md-2 col-lg-2">
+      <h3>{% trans "Filters" %}</h3>
       {% include "search/includes/search_filters.html" %}
     </div>
+
+    <div class="col-xs-12 col-sm-12 hidden-md hidden-lg">
+      <div class="panel-group" id="accordion">
+        <div class="panel panel-default">
+          <div class="panel-heading subject">
+            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFilters">
+              <h4 class="panel-title">{% trans "Filters" %}</h4>
+            </a>
+          </div>
+          <div id="collapseFilters" class="panel-collapse collapse">
+            <div class="panel-body">
+              {% include "search/includes/search_filters.html" %}
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr />
+    </div>
   
     <div class="col-lg-10">
       <ul class="list-unstyled">
@@ -72,8 +91,8 @@
           </span>
         </div>
       {% endif %}
-
     </div>
+
   </div>
 
 {% endblock %}
diff --git a/src/static/css/screen.css b/src/static/css/screen.css
index 069c2d8..28c5377 100644
--- a/src/static/css/screen.css
+++ b/src/static/css/screen.css
@@ -395,3 +395,11 @@ ul.emails {
 span.highlighted {
     background-color: yellow;
 }
+
+/* Mobile search form */
+.navbar-nav > li > .mobile-search-form {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  line-height: 20px;
+  padding: 5px 15px 5px 15px;
+}
diff --git a/src/templates/base.html b/src/templates/base.html
index bfdc566..fadc00c 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -2,7 +2,7 @@
 {% load i18n browserid conversejs gravatar %}
 <html>
   <head>
-    {% block head %}
+  {% block head %}
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
@@ -54,13 +54,36 @@
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
         <div class="navbar-header">
+
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="/"><img alt="Colab" src="/static/img/logo_nav.png"></a>
+
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".mobile-search">
+            <span class="glyphicon glyphicon-search"></span>
+          </button>
+
+        </div>
+
+        <!-- Mobile Search -->
+        <div class="collapse mobile-search">
+          <ul class="nav navbar-nav hidden-md hidden-lg">
+            <li>
+              <form action="{% url 'haystack_search' %}" class="search mobile-search-form" role="search">
+                <div class="form-group">
+                  <input name="q" class="form-control"
+                         value="{{ request.GET.q }}"
+                         type="search" placeholder="{% trans 'Search here...' %}" />
+                </div>
+                <button class="btn btn-default">{% trans "Search" %} <span class="glyphicon glyphicon-search"></span></button>
+              </form>
+            </li>
+          </ul>
         </div>
 
         <div class="collapse navbar-collapse navbar-main">
--
libgit2 0.21.2