Download as
Browse Code »

Commit 46a37afa86197ee82464c9e322c24161c467b126

Authored by Luan
1 parent af50e491
Exists in master and in 13 other branches Validation_colab_sprint_30, check-port, generic-plugins, header_footer, mezuro-integration, move_out_plugins, plugin_extra_configs, proxy_base_template, proxy_hotspot, spb-release/3.0, stable, test, trac_indexing

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
  Diff comments   View file @46a37af
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
  Diff comments   View file @46a37af
... ... @@ -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
  Diff comments   View file @46a37af
... ... @@ -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
  Diff comments   View file @46a37af
... ... @@ -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">
... ...