github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

Custom styled select boxes for filters

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

38
datasette/static/app.css
View file

@ -135,3 +135,41 @@ form input[type=submit] {
line-height: 1; line-height: 1;
border-radius: .25rem; border-radius: .25rem;
} }
.filter-row {
margin-bottom: 0.3em;
}
.select-wrapper {
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
background-color: #fafafa;
position: relative;
display: inline-block;
}
.select-wrapper.filter-op {
width: 80px;
}
.select-wrapper::after {
content: "\25BE";
position: absolute;
top: 0px;
right: 5px;
color: #bbb;
}
.select-wrapper select {
padding: 5px 8px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
}
.select-wrapper select:focus {
outline: none;
}
</style>

56
datasette/templates/table.html
View file

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