Custom styled select boxes for filters

Refs #86
This commit is contained in:
Simon Willison 2017-11-23 07:58:55 -08:00
commit a74e455ced
No known key found for this signature in database
GPG key ID: FBB38AFE227189DB
2 changed files with 70 additions and 24 deletions

View file

@ -31,39 +31,47 @@
<form class="filters" action="/{{ database }}-{{ database_hash }}/{{ table|quote_plus }}" method="get">
{% for column, lookup, value in filters.selections() %}
<p>
<select name="_filter_column_{{ loop.index }}" style="font-size: 20px">
{% for c in display_columns %}
{% if c != 'rowid' %}
<option{% if c == column %} selected{% endif %}>{{ c }}</option>
<div class="filter-row">
<div class="select-wrapper">
<select name="_filter_column_{{ loop.index }}">
{% for c in display_columns %}
{% if c != 'rowid' %}
<option{% if c == column %} selected{% endif %}>{{ c }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="select-wrapper filter-op">
<select name="_filter_op_{{ loop.index }}">
{% for key, display, no_argument in filters.lookups() %}
<option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
{% endfor %}
</select>
</div>
<input type="text" name="_filter_value_{{ loop.index }}" style="width: 200px" value="{{ value }}">
</div>
{% endfor %}
<div class="filter-row">
<div class="select-wrapper">
<select name="_filter_column">
<option value="">- pick a column -</option>
{% for column in display_columns %}
{% if column != 'rowid' %}
<option>{{ column }}</option>
{% endif %}
{% endfor %}
</select>
<select name="_filter_op_{{ loop.index }}" style="font-size: 20px">
</div>
<div class="select-wrapper filter-op">
<select name="_filter_op">
{% for key, display, no_argument in filters.lookups() %}
<option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
{% endfor %}
</select>
<input type="text" name="_filter_value_{{ loop.index }}" style="width: 200px" value="{{ value }}">
</p>
{% endfor %}
<p>
<select name="_filter_column" style="font-size: 20px">
<option value="">- pick a column -</option>
{% for column in display_columns %}
{% if column != 'rowid' %}
<option>{{ column }}</option>
{% endif %}
{% endfor %}
</select>
<select name="_filter_op" style="font-size: 20px">
{% for key, display, no_argument in filters.lookups() %}
<option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
{% endfor %}
</select>
</div>
<input type="text" name="_filter_value" style="width: 200px">
<input type="submit" value="{% if filters.has_selections() %}Apply filters{% else %}Add filter{% endif %}">
</p>
</div>
</form>
<pre>{{ query.sql }}</pre>