mirror
/
datasette
kopia lustrzana https://github.com/simonw/datasette
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Custom styled select boxes for filters 

Refs #86
pull/168/head
Simon Willison 2017-11-23 07:58:55 -08:00
rodzic 2f97834d0e
commit a74e455ced
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: FBB38AFE227189DB
2 zmienionych plików z 70 dodań i 24 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

38
datasette/static/app.css
Wyświetl plik

@ -135,3 +135,41 @@ form input[type=submit] {
line-height: 1;
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
Wyświetl plik

@ -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>