Commit 46a37afa86197ee82464c9e322c24161c467b126
1 parent
af50e491
Exists in
master
and in
39 other branches
Changing filters on mobile and search form
Showing
4 changed files
with
214 additions
and
166 deletions
Show diff stats
src/search/templates/search/includes/search_filters.html
1 | 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 | 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 | 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 | 11 | <hr /> |
143 | 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 | 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 | 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 | 41 | |
42 | 42 | <div class="row"> |
43 | 43 | <div id="filters" class="hidden-xs hidden-sm col-md-2 col-lg-2"> |
44 | + <h3>{% trans "Filters" %}</h3> | |
44 | 45 | {% include "search/includes/search_filters.html" %} |
45 | 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 | 66 | <div class="col-lg-10"> |
48 | 67 | <ul class="list-unstyled"> |
... | ... | @@ -72,8 +91,8 @@ |
72 | 91 | </span> |
73 | 92 | </div> |
74 | 93 | {% endif %} |
75 | - | |
76 | 94 | </div> |
95 | + | |
77 | 96 | </div> |
78 | 97 | |
79 | 98 | {% endblock %} | ... | ... |
src/static/css/screen.css
... | ... | @@ -395,3 +395,11 @@ ul.emails { |
395 | 395 | span.highlighted { |
396 | 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 | 2 | {% load i18n browserid conversejs gravatar %} |
3 | 3 | <html> |
4 | 4 | <head> |
5 | - {% block head %} | |
5 | + {% block head %} | |
6 | 6 | <meta charset="UTF-8" /> |
7 | 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 | 54 | <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> |
55 | 55 | <div class="container"> |
56 | 56 | <div class="navbar-header"> |
57 | + | |
57 | 58 | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main"> |
58 | 59 | <span class="sr-only">Toggle navigation</span> |
59 | 60 | <span class="icon-bar"></span> |
60 | 61 | <span class="icon-bar"></span> |
61 | 62 | <span class="icon-bar"></span> |
63 | + <span class="icon-bar"></span> | |
62 | 64 | </button> |
63 | 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 | 87 | </div> |
65 | 88 | |
66 | 89 | <div class="collapse navbar-collapse navbar-main"> | ... | ... |