Commit 46a37afa86197ee82464c9e322c24161c467b126

Authored by Luan
1 parent af50e491

Changing filters on mobile and search form

src/search/templates/search/includes/search_filters.html
1 {% load i18n superarchives %} 1 {% load i18n superarchives %}
2 2
3 -<h3>{% trans "Filters" %}</h3>  
4 -  
5 - {% if filters %}  
6 - <ul class="unstyled-list">  
7 - <li class="selected" title="{% trans "Remove filter" %}">  
8 - <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 %}">  
9 - <span class="glyphicon glyphicon-remove"></span> {{ filters.name }}  
10 - </a>  
11 - </li>  
12 - </ul>  
13 - <hr />  
14 - <form role="form">  
15 - <input type="hidden" name="q" value="{{ request.GET.q }}" />  
16 - <input type="hidden" name="order" value="{{ request.GET.order }}" />  
17 - <input type="hidden" name="type" value="{{ type_chosen }}" />  
18 - <input type="hidden" name="since" value="{{ request.GET.since }}" />  
19 - <input type="hidden" name="until" value="{{ request.GET.until }}" />  
20 -  
21 - {% for field_lookup, field_display, field_value in filters.fields %}  
22 - <div class="form-group">  
23 - <label for="{{ field_lookup }}">{{ field_display }}</label>  
24 - {% if field_lookup == "list" %}  
25 - <select name="{{ field_lookup }}" class="form-control" multiple>  
26 - {% for value, option in form.fields.list.choices %}  
27 - <option value="{{ value }}" {% if value in field_value %}selected{% endif %}>{{ option }}</option>  
28 - {% endfor %}  
29 - </select>  
30 - {% elif field_lookup == "size" %}  
31 - <ul class="unstyled-list">  
32 - {% for value, option in size_choices %}  
33 - {% with value|add:" "|add:size_chosen as sizelistadd %}  
34 - {% if value in field_value %}  
35 - <li class="selected" title="{% trans "Remove filter" %}">  
36 - <span class="glyphicon glyphicon-remove"></span>  
37 - <a href="{% pop_from_get size=value %}">{{ option }}</a>  
38 - </li>  
39 - {% else %}  
40 - <li>  
41 - <span class="glyphicon glyphicon-chevron-right"></span>  
42 - <a href="{% append_to_get size=sizelistadd %}">{{ option }}</a>  
43 - </li>  
44 - {% endif %}  
45 - {% endwith %}  
46 - {% endfor %}  
47 - </ul>  
48 - {% elif field_lookup == "mimetype" %}  
49 - <ul class="unstyled-list">  
50 - {% for value, option in mimetype_choices %}  
51 - {% with value|add:" "|add:mimetype_chosen as mimelistadd %}  
52 - {% if value in mimetype_chosen %}  
53 - <li class="selected" title="{% trans "Remove filter" %}">  
54 - <span class="glyphicon glyphicon-remove"></span>  
55 - <a href="{% pop_from_get mimetype=value %}">{{ option }}</a>  
56 - </li>  
57 - {% else %}  
58 - <li>  
59 - <span class="glyphicon glyphicon-chevron-right"></span>  
60 - <a href="{% append_to_get mimetype=mimelistadd %}">{{ option }}</a>  
61 - </li>  
62 - {% endif %}  
63 - {% endwith %}  
64 - {% endfor %}  
65 - </ul>  
66 - {% elif field_lookup == "used_by" %}  
67 - <ul class="unstyled-list">  
68 - {% for value, option in used_by_choices %}  
69 - {% with value|add:" "|add:used_by_chosen as used_byadd %}  
70 - {% if value in used_by_chosen %}  
71 - <li class="selected" title="{% trans "Remove filter" %}">  
72 - <span class="glyphicon glyphicon-remove"></span>  
73 - <a href="{% pop_from_get used_by=value %}">{{ option }}</a>  
74 - </li>  
75 - {% else %}  
76 - <li>  
77 - <span class="glyphicon glyphicon-chevron-right"></span>  
78 - <a href="{% append_to_get used_by=used_byadd %}">{{ option }}</a>  
79 - </li>  
80 - {% endif %}  
81 - {% endwith %}  
82 - {% endfor %}  
83 - </ul>  
84 - {% else %}  
85 - <input type="text" class="form-control" placeholder="{{ field_display }}" name="{{ field_lookup }}" {% if field_value %}value="{{ field_value }}"{% endif %}>  
86 - {% endif %}  
87 - </div>  
88 - {% endfor %}  
89 - <button type="submit" class="btn btn-default pull-right">  
90 - <span class="glyphicon glyphicon-filter"></span> {% trans 'Filter' %}  
91 - </button>  
92 - </form>  
93 - <br /><br /><hr />  
94 - {% endif %}  
95 -  
96 - <h4>{% trans "Sort by" %}</h4> 3 +{% if filters %}
97 <ul class="unstyled-list"> 4 <ul class="unstyled-list">
98 - {% for option, dict_order in order_data.items %}  
99 - <li>  
100 - <span class="glyphicon glyphicon-chevron-right"></span>  
101 - <a href="{% append_to_get order=option p=1 %}">  
102 - {% ifequal request.GET.order option %}  
103 - {% blocktrans with name=dict_order.name %}<strong>{{ name }}</strong>{% endblocktrans %}  
104 - {% else %}  
105 - {% blocktrans with name=dict_order.name %}{{ name }}{% endblocktrans %}  
106 - {% endifequal %}  
107 - </a>  
108 - </li>  
109 - {% endfor %} 5 + <li class="selected" title="{% trans "Remove filter" %}">
  6 + <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 %}">
  7 + <span class="glyphicon glyphicon-remove"></span> {{ filters.name }}
  8 + </a>
  9 + </li>
110 </ul> 10 </ul>
111 -  
112 - {% if not request.GET.type %}  
113 - <h4>{% trans "Types" %}</h4>  
114 -  
115 - <ul class="unstyled-list">  
116 - <li>  
117 - <span class="glyphicon glyphicon-book"></span>  
118 - <a href="{% append_to_get type='wiki' %}">{% trans "Wiki" %}</a>  
119 - </li>  
120 - <li>  
121 - <span class="glyphicon glyphicon-envelope"></span>  
122 - <a href="{% append_to_get type='thread' %}">{% trans "Discussion" %}</a>  
123 - </li>  
124 - <li>  
125 - <span class="glyphicon glyphicon-tag"></span>  
126 - <a href="{% append_to_get type='ticket' %}">{% trans "Ticket" %}</a>  
127 - </li>  
128 - <li>  
129 - <span class="glyphicon glyphicon-align-right"></span>  
130 - <a href="{% append_to_get type='changeset' %}">{% trans "Changeset" %}</a>  
131 - </li>  
132 - <li>  
133 - <span class="glyphicon glyphicon-user"></span>  
134 - <a href="{% append_to_get type='user' %}">{% trans "User" %}</a>  
135 - </li>  
136 - <li>  
137 - <span class="glyphicon glyphicon-file"></span>  
138 - <a href="{% append_to_get type='attachment' %}">{% trans "Attachment" %}</a>  
139 - </li>  
140 - </ul>  
141 - {% endif %}  
142 <hr /> 11 <hr />
143 <form role="form"> 12 <form role="form">
144 - {% for name, value in request.GET.items %}  
145 - {% if value and not name == "since" and not name == "until" %}  
146 - <input type="hidden" name="{{ name }}" value="{{ value }}" />  
147 - {% endif %} 13 + <input type="hidden" name="q" value="{{ request.GET.q }}" />
  14 + <input type="hidden" name="order" value="{{ request.GET.order }}" />
  15 + <input type="hidden" name="type" value="{{ type_chosen }}" />
  16 + <input type="hidden" name="since" value="{{ request.GET.since }}" />
  17 + <input type="hidden" name="until" value="{{ request.GET.until }}" />
  18 +
  19 + {% for field_lookup, field_display, field_value in filters.fields %}
  20 + <div class="form-group">
  21 + <label for="{{ field_lookup }}">{{ field_display }}</label>
  22 + {% if field_lookup == "list" %}
  23 + <select name="{{ field_lookup }}" class="form-control" multiple>
  24 + {% for value, option in form.fields.list.choices %}
  25 + <option value="{{ value }}" {% if value in field_value %}selected{% endif %}>{{ option }}</option>
  26 + {% endfor %}
  27 + </select>
  28 + {% elif field_lookup == "size" %}
  29 + <ul class="unstyled-list">
  30 + {% for value, option in size_choices %}
  31 + {% with value|add:" "|add:size_chosen as sizelistadd %}
  32 + {% if value in field_value %}
  33 + <li class="selected" title="{% trans "Remove filter" %}">
  34 + <span class="glyphicon glyphicon-remove"></span>
  35 + <a href="{% pop_from_get size=value %}">{{ option }}</a>
  36 + </li>
  37 + {% else %}
  38 + <li>
  39 + <span class="glyphicon glyphicon-chevron-right"></span>
  40 + <a href="{% append_to_get size=sizelistadd %}">{{ option }}</a>
  41 + </li>
  42 + {% endif %}
  43 + {% endwith %}
  44 + {% endfor %}
  45 + </ul>
  46 + {% elif field_lookup == "mimetype" %}
  47 + <ul class="unstyled-list">
  48 + {% for value, option in mimetype_choices %}
  49 + {% with value|add:" "|add:mimetype_chosen as mimelistadd %}
  50 + {% if value in mimetype_chosen %}
  51 + <li class="selected" title="{% trans "Remove filter" %}">
  52 + <span class="glyphicon glyphicon-remove"></span>
  53 + <a href="{% pop_from_get mimetype=value %}">{{ option }}</a>
  54 + </li>
  55 + {% else %}
  56 + <li>
  57 + <span class="glyphicon glyphicon-chevron-right"></span>
  58 + <a href="{% append_to_get mimetype=mimelistadd %}">{{ option }}</a>
  59 + </li>
  60 + {% endif %}
  61 + {% endwith %}
  62 + {% endfor %}
  63 + </ul>
  64 + {% elif field_lookup == "used_by" %}
  65 + <ul class="unstyled-list">
  66 + {% for value, option in used_by_choices %}
  67 + {% with value|add:" "|add:used_by_chosen as used_byadd %}
  68 + {% if value in used_by_chosen %}
  69 + <li class="selected" title="{% trans "Remove filter" %}">
  70 + <span class="glyphicon glyphicon-remove"></span>
  71 + <a href="{% pop_from_get used_by=value %}">{{ option }}</a>
  72 + </li>
  73 + {% else %}
  74 + <li>
  75 + <span class="glyphicon glyphicon-chevron-right"></span>
  76 + <a href="{% append_to_get used_by=used_byadd %}">{{ option }}</a>
  77 + </li>
  78 + {% endif %}
  79 + {% endwith %}
  80 + {% endfor %}
  81 + </ul>
  82 + {% else %}
  83 + <input type="text" class="form-control" placeholder="{{ field_display }}" name="{{ field_lookup }}" {% if field_value %}value="{{ field_value }}"{% endif %}>
  84 + {% endif %}
  85 + </div>
148 {% endfor %} 86 {% endfor %}
149 - <div class="form-group">  
150 - <label for="since">{% trans "Since" %}</label>  
151 - <div class="input-group date" id="datepicker_since">  
152 - <input type="text" class="form-control" placeholder="{% trans "Since" %}" name="since" value="{{ request.GET.since }}" />  
153 - <span class="input-group-addon">  
154 - <span class="glyphicon glyphicon-calendar"></span>  
155 - </span>  
156 - </div>  
157 - </div>  
158 - <div class="form-group">  
159 - <label for="until">{% trans "Until" %}</label>  
160 - <div class="input-group date" id="datepicker_until">  
161 - <input type="text" class="form-control" placeholder="{% trans "Until" %}" name="until" value="{{ request.GET.until }}" />  
162 - <span class="input-group-addon">  
163 - <span class="glyphicon glyphicon-calendar"></span>  
164 - </span>  
165 - </div>  
166 - </div>  
167 - <p class="text-right">  
168 - <button type="submit" class="btn btn-default">  
169 - <span class="glyphicon glyphicon-filter"></span> {% trans "Filter" %}  
170 - </button>  
171 - </p> 87 + <button type="submit" class="btn btn-default pull-right">
  88 + <span class="glyphicon glyphicon-filter"></span> {% trans 'Filter' %}
  89 + </button>
172 </form> 90 </form>
  91 + <br /><br /><hr />
  92 +{% endif %}
  93 +
  94 +<h4>{% trans "Sort by" %}</h4>
  95 +<ul class="unstyled-list">
  96 + {% for option, dict_order in order_data.items %}
  97 + <li>
  98 + <span class="glyphicon glyphicon-chevron-right"></span>
  99 + <a href="{% append_to_get order=option p=1 %}">
  100 + {% ifequal request.GET.order option %}
  101 + {% blocktrans with name=dict_order.name %}<strong>{{ name }}</strong>{% endblocktrans %}
  102 + {% else %}
  103 + {% blocktrans with name=dict_order.name %}{{ name }}{% endblocktrans %}
  104 + {% endifequal %}
  105 + </a>
  106 + </li>
  107 + {% endfor %}
  108 +</ul>
  109 +
  110 +{% if not request.GET.type %}
  111 + <h4>{% trans "Types" %}</h4>
  112 +
  113 + <ul class="unstyled-list">
  114 + <li>
  115 + <span class="glyphicon glyphicon-book"></span>
  116 + <a href="{% append_to_get type='wiki' %}">{% trans "Wiki" %}</a>
  117 + </li>
  118 + <li>
  119 + <span class="glyphicon glyphicon-envelope"></span>
  120 + <a href="{% append_to_get type='thread' %}">{% trans "Discussion" %}</a>
  121 + </li>
  122 + <li>
  123 + <span class="glyphicon glyphicon-tag"></span>
  124 + <a href="{% append_to_get type='ticket' %}">{% trans "Ticket" %}</a>
  125 + </li>
  126 + <li>
  127 + <span class="glyphicon glyphicon-align-right"></span>
  128 + <a href="{% append_to_get type='changeset' %}">{% trans "Changeset" %}</a>
  129 + </li>
  130 + <li>
  131 + <span class="glyphicon glyphicon-user"></span>
  132 + <a href="{% append_to_get type='user' %}">{% trans "User" %}</a>
  133 + </li>
  134 + <li>
  135 + <span class="glyphicon glyphicon-file"></span>
  136 + <a href="{% append_to_get type='attachment' %}">{% trans "Attachment" %}</a>
  137 + </li>
  138 + </ul>
  139 +{% endif %}
  140 +<hr />
  141 +<form role="form">
  142 + {% for name, value in request.GET.items %}
  143 + {% if value and not name == "since" and not name == "until" %}
  144 + <input type="hidden" name="{{ name }}" value="{{ value }}" />
  145 + {% endif %}
  146 + {% endfor %}
  147 + <div class="form-group">
  148 + <label for="since">{% trans "Since" %}</label>
  149 + <div class="input-group date" id="datepicker_since">
  150 + <input type="text" class="form-control" placeholder="{% trans "Since" %}" name="since" value="{{ request.GET.since }}" />
  151 + <span class="input-group-addon">
  152 + <span class="glyphicon glyphicon-calendar"></span>
  153 + </span>
  154 + </div>
  155 + </div>
  156 + <div class="form-group">
  157 + <label for="until">{% trans "Until" %}</label>
  158 + <div class="input-group date" id="datepicker_until">
  159 + <input type="text" class="form-control" placeholder="{% trans "Until" %}" name="until" value="{{ request.GET.until }}" />
  160 + <span class="input-group-addon">
  161 + <span class="glyphicon glyphicon-calendar"></span>
  162 + </span>
  163 + </div>
  164 + </div>
  165 + <p class="text-right">
  166 + <button type="submit" class="btn btn-default">
  167 + <span class="glyphicon glyphicon-filter"></span> {% trans "Filter" %}
  168 + </button>
  169 + </p>
  170 +</form>
src/search/templates/search/search.html
@@ -41,8 +41,27 @@ @@ -41,8 +41,27 @@
41 41
42 <div class="row"> 42 <div class="row">
43 <div id="filters" class="hidden-xs hidden-sm col-md-2 col-lg-2"> 43 <div id="filters" class="hidden-xs hidden-sm col-md-2 col-lg-2">
  44 + <h3>{% trans "Filters" %}</h3>
44 {% include "search/includes/search_filters.html" %} 45 {% include "search/includes/search_filters.html" %}
45 </div> 46 </div>
  47 +
  48 + <div class="col-xs-12 col-sm-12 hidden-md hidden-lg">
  49 + <div class="panel-group" id="accordion">
  50 + <div class="panel panel-default">
  51 + <div class="panel-heading subject">
  52 + <a data-toggle="collapse" data-parent="#accordion" href="#collapseFilters">
  53 + <h4 class="panel-title">{% trans "Filters" %}</h4>
  54 + </a>
  55 + </div>
  56 + <div id="collapseFilters" class="panel-collapse collapse">
  57 + <div class="panel-body">
  58 + {% include "search/includes/search_filters.html" %}
  59 + </div>
  60 + </div>
  61 + </div>
  62 + </div>
  63 + <hr />
  64 + </div>
46 65
47 <div class="col-lg-10"> 66 <div class="col-lg-10">
48 <ul class="list-unstyled"> 67 <ul class="list-unstyled">
@@ -72,8 +91,8 @@ @@ -72,8 +91,8 @@
72 </span> 91 </span>
73 </div> 92 </div>
74 {% endif %} 93 {% endif %}
75 -  
76 </div> 94 </div>
  95 +
77 </div> 96 </div>
78 97
79 {% endblock %} 98 {% endblock %}
src/static/css/screen.css
@@ -395,3 +395,11 @@ ul.emails { @@ -395,3 +395,11 @@ ul.emails {
395 span.highlighted { 395 span.highlighted {
396 background-color: yellow; 396 background-color: yellow;
397 } 397 }
  398 +
  399 +/* Mobile search form */
  400 +.navbar-nav > li > .mobile-search-form {
  401 + padding-top: 10px;
  402 + padding-bottom: 10px;
  403 + line-height: 20px;
  404 + padding: 5px 15px 5px 15px;
  405 +}
src/templates/base.html
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 {% load i18n browserid conversejs gravatar %} 2 {% load i18n browserid conversejs gravatar %}
3 <html> 3 <html>
4 <head> 4 <head>
5 - {% block head %} 5 + {% block head %}
6 <meta charset="UTF-8" /> 6 <meta charset="UTF-8" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
8 8
@@ -54,13 +54,36 @@ @@ -54,13 +54,36 @@
54 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 54 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
55 <div class="container"> 55 <div class="container">
56 <div class="navbar-header"> 56 <div class="navbar-header">
  57 +
57 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main"> 58 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main">
58 <span class="sr-only">Toggle navigation</span> 59 <span class="sr-only">Toggle navigation</span>
59 <span class="icon-bar"></span> 60 <span class="icon-bar"></span>
60 <span class="icon-bar"></span> 61 <span class="icon-bar"></span>
61 <span class="icon-bar"></span> 62 <span class="icon-bar"></span>
  63 + <span class="icon-bar"></span>
62 </button> 64 </button>
63 <a class="navbar-brand" href="/"><img alt="Colab" src="/static/img/logo_nav.png"></a> 65 <a class="navbar-brand" href="/"><img alt="Colab" src="/static/img/logo_nav.png"></a>
  66 +
  67 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".mobile-search">
  68 + <span class="glyphicon glyphicon-search"></span>
  69 + </button>
  70 +
  71 + </div>
  72 +
  73 + <!-- Mobile Search -->
  74 + <div class="collapse mobile-search">
  75 + <ul class="nav navbar-nav hidden-md hidden-lg">
  76 + <li>
  77 + <form action="{% url 'haystack_search' %}" class="search mobile-search-form" role="search">
  78 + <div class="form-group">
  79 + <input name="q" class="form-control"
  80 + value="{{ request.GET.q }}"
  81 + type="search" placeholder="{% trans 'Search here...' %}" />
  82 + </div>
  83 + <button class="btn btn-default">{% trans "Search" %} <span class="glyphicon glyphicon-search"></span></button>
  84 + </form>
  85 + </li>
  86 + </ul>
64 </div> 87 </div>
65 88
66 <div class="collapse navbar-collapse navbar-main"> 89 <div class="collapse navbar-collapse navbar-main">