datasette/datasette/templates/table.html
Simon Willison 57b19f09d1
Ability to sort using form fields (for mobile portrait mode)
We now display sort options as a select box plus a descending checkbox, which
means you can apply sort orders even in portrait mode on a mobile phone where
the column headers are hidden.

Closes #199
2018-04-09 17:34:32 -07:00

108 lines
4.9 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ database }}: {{ table }}: {% if filtered_table_rows_count or filtered_table_rows_count == 0 %}{{ "{:,}".format(filtered_table_rows_count) }} row{% if filtered_table_rows_count == 1 %}{% else %}s{% endif %}{% endif %}
{% if human_description_en %}where {{ human_description_en }}{% endif %}{% endblock %}
{% block extra_head %}
{{ super() }}
<style>
@media only screen and (max-width: 576px) {
{% for column in display_columns %}
td:nth-of-type({{ loop.index }}):before { content: "{{ column.name|escape_css_string }}"; }
{% endfor %}
}
</style>
{% endblock %}
{% block body_class %}table db-{{ database|to_css_class }} table-{{ table|to_css_class }}{% endblock %}
{% block content %}
<div class="hd"><a href="/">home</a> / <a href="/{{ database }}-{{ database_hash }}">{{ database }}</a></div>
<h1 style="padding-left: 10px; border-left: 10px solid #{{ database_hash[:6] }}">{{ metadata.title or table }}{% if is_view %} (view){% endif %}</h1>
{% block description_source_license %}{% include "_description_source_license.html" %}{% endblock %}
{% if filtered_table_rows_count or human_description_en %}
<h3>{% if filtered_table_rows_count or filtered_table_rows_count == 0 %}{{ "{:,}".format(filtered_table_rows_count) }} row{% if filtered_table_rows_count == 1 %}{% else %}s{% endif %}{% endif %}
{% if human_description_en %}{{ human_description_en }}{% endif %}
</h3>
{% endif %}
<form class="filters" action="/{{ database }}-{{ database_hash }}/{{ table|quote_plus }}" method="get">
{% if supports_search %}
<div class="search-row"><label for="_search">Search:</label><input id="_search" type="search" name="_search" value="{{ search }}"></div>
{% endif %}
{% for column, lookup, value in filters.selections() %}
<div class="filter-row">
<div class="select-wrapper">
<select name="_filter_column_{{ loop.index }}">
<option value="">- remove filter -</option>
{% for c in filter_columns %}
<option{% if c == column %} selected{% endif %}>{{ c }}</option>
{% 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 }}" class="filter-value" value="{{ value }}">
</div>
{% endfor %}
<div class="filter-row">
<div class="select-wrapper">
<select name="_filter_column">
<option value="">- column -</option>
{% for column in filter_columns %}
<option>{{ column }}</option>
{% endfor %}
</select>
</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>
</div><input type="text" name="_filter_value" class="filter-value">
</div>
<div class="filter-row">
{% if is_sortable %}
<div class="select-wrapper">
<select name="_sort" id="sort_by">
<option value="">Sort...</option>
{% for column in display_columns %}
{% if column.sortable %}
<option value="{{ column.name }}"{% if column.name == sort or column.name == sort_desc %} selected{% endif %}>Sort by {{ column.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<label class="sort_by_desc"><input type="checkbox" name="_sort_by_desc"{% if sort_desc %} checked{% endif %}> descending</label>
{% endif %}
<input type="submit" value="Apply">
</div>
</form>
{% if query.sql %}
<p><a class="not-underlined" title="{{ query.sql }}" href="/{{ database }}-{{ database_hash }}?{{ {'sql': query.sql}|urlencode|safe }}{% if query.params %}&amp;{{ query.params|urlencode|safe }}{% endif %}">&#x270e; <span class="underlined">View and edit SQL</span></a></p>
{% endif %}
<p>This data as <a href="{{ url_json }}">.json</a></p>
{% include custom_rows_and_columns_templates %}
{% if next_url %}
<p><a href="{{ next_url }}">Next page</a></p>
{% endif %}
{% if table_definition %}
<pre>{{ table_definition }}</pre>
{% endif %}
{% if view_definition %}
<pre>{{ view_definition }}</pre>
{% endif %}
{% endblock %}