fix: make dashboard table scrollable
This commit is contained in:
David Larlet
parent
991657f3ea
commit
5827a4cab0
2 changed files with 104 additions and 95 deletions
|
|
@ -401,32 +401,39 @@ ul.umap-autocomplete {
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
.table-wrapper {
|
||||||
table.maps {
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
.table-wrapper table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 600px;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
table.maps .map_fragment {
|
.table-wrapper table .map_fragment {
|
||||||
display: block;
|
display: block;
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
table.maps a,
|
.table-wrapper table a,
|
||||||
table.maps thead {
|
.table-wrapper table thead {
|
||||||
color: #263B58;
|
color: #263B58;
|
||||||
}
|
}
|
||||||
table.maps a:not(.icon-link) {
|
.table-wrapper table thead th:last-of-type {
|
||||||
|
min-width: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper table a:not(.icon-link) {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
table.maps button.map-icon {
|
.table-wrapper table button.map-icon {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
table.maps form {
|
.table-wrapper table form {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
table.maps input[type="submit"] {
|
.table-wrapper table input[type="submit"] {
|
||||||
display: inline;
|
display: inline;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #263B58;
|
color: #263B58;
|
||||||
|
|
@ -436,22 +443,22 @@ table.maps input[type="submit"] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
table.maps tbody tr {
|
.table-wrapper table tbody tr {
|
||||||
border-bottom: 1px solid #BDC7D4;
|
border-bottom: 1px solid #BDC7D4;
|
||||||
}
|
}
|
||||||
table.maps tbody tr td {
|
.table-wrapper table tbody tr td {
|
||||||
padding: 5px 4px;
|
padding: 5px 4px;
|
||||||
}
|
}
|
||||||
table.maps tbody tr:nth-child(odd) {
|
.table-wrapper table tbody tr:nth-child(odd) {
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
}
|
}
|
||||||
table.maps td {
|
.table-wrapper table td {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
table.maps thead tr {
|
.table-wrapper table thead tr {
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
}
|
}
|
||||||
table.maps .button {
|
.table-wrapper table .button {
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
padding:4px 6px;
|
padding:4px 6px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,87 @@
|
||||||
{% load umap_tags i18n %}
|
{% load umap_tags i18n %}
|
||||||
<table class="maps">
|
<div class="table-wrapper">
|
||||||
<thead>
|
<table>
|
||||||
<tr>
|
<thead>
|
||||||
<th>{% blocktrans %}Name{% endblocktrans %}</th>
|
<tr>
|
||||||
<th>{% blocktrans %}Preview{% endblocktrans %}</th>
|
<th>{% blocktrans %}Name{% endblocktrans %}</th>
|
||||||
<th>{% blocktrans %}Who can see{% endblocktrans %}</th>
|
<th>{% blocktrans %}Preview{% endblocktrans %}</th>
|
||||||
<th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
|
<th>{% blocktrans %}Who can see{% endblocktrans %}</th>
|
||||||
<th>{% blocktrans %}Last save{% endblocktrans %}</th>
|
<th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
|
||||||
<th>{% blocktrans %}Owner{% endblocktrans %}</th>
|
<th>{% blocktrans %}Last save{% endblocktrans %}</th>
|
||||||
<th>{% blocktrans %}Actions{% endblocktrans %}</th>
|
<th>{% blocktrans %}Owner{% endblocktrans %}</th>
|
||||||
</tr>
|
<th>{% blocktrans %}Actions{% endblocktrans %}</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
{% for map_inst in maps %}
|
<tbody>
|
||||||
{% with unique_id="map_"|addstr:map_inst.pk %}
|
{% for map_inst in maps %}
|
||||||
<tr>
|
{% with unique_id="map_"|addstr:map_inst.pk %}
|
||||||
<td>
|
<tr>
|
||||||
<a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
|
<td>
|
||||||
</td>
|
<a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
|
||||||
<td>
|
</td>
|
||||||
{{ map_inst.preview_settings|json_script:unique_id }}
|
<td>
|
||||||
<button class="map-icon map-opener" data-map-id="{{ unique_id }}"
|
{{ map_inst.preview_settings|json_script:unique_id }}
|
||||||
title="{% translate "Open preview" %}">
|
<button class="map-icon map-opener" data-map-id="{{ unique_id }}"
|
||||||
<span class="icon-dashboard icon-view"></span>
|
title="{% translate "Open preview" %}">
|
||||||
<span class="sr-only">{% translate "Open preview" %}</span>
|
<span class="icon-dashboard icon-view"></span>
|
||||||
</button>
|
<span class="sr-only">{% translate "Open preview" %}</span>
|
||||||
<dialog>
|
</button>
|
||||||
<form method="dialog">
|
<dialog>
|
||||||
<div id="{{ unique_id }}_target" class="map_fragment"></div>
|
<form method="dialog">
|
||||||
<p class="close-dialog">
|
<div id="{{ unique_id }}_target" class="map_fragment"></div>
|
||||||
<button class="button" type="submit">Close</button>
|
<p class="close-dialog">
|
||||||
</p>
|
<button class="button" type="submit">Close</button>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
</td>
|
||||||
|
<td>{{ map_inst.get_share_status_display }}</td>
|
||||||
|
<td>{{ map_inst.get_edit_status_display }}</td>
|
||||||
|
<td>{{ map_inst.modified_at }}</td>
|
||||||
|
<td>
|
||||||
|
<a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a href="{{ map_inst.get_absolute_url }}?share" class="icon-link"
|
||||||
|
title="{% translate "Share" %}">
|
||||||
|
<span class="icon-dashboard icon-share"></span>
|
||||||
|
<span class="sr-only">{% translate "Share" %}</span>
|
||||||
|
</a>
|
||||||
|
<a href="{{ map_inst.get_absolute_url }}?edit" class="icon-link"
|
||||||
|
title="{% translate "Edit" %}">
|
||||||
|
<span class="icon-dashboard icon-edit"></span>
|
||||||
|
<span class="sr-only">{% translate "Edit" %}</span>
|
||||||
|
</a>
|
||||||
|
<a href="{% url 'map_download' map_inst.pk %}" class="icon-link"
|
||||||
|
title="{% translate "Download" %}">
|
||||||
|
<span class="icon-dashboard icon-download"></span>
|
||||||
|
<span class="sr-only">{% translate "Download" %}</span>
|
||||||
|
</a>
|
||||||
|
<form action="{% url 'map_clone' map_inst.pk %}" method="post">
|
||||||
|
{% csrf_token %}
|
||||||
|
<button class="map-icon" type="submit"
|
||||||
|
title="{% translate "Clone" %}">
|
||||||
|
<span class="icon-dashboard icon-duplicate"></span>
|
||||||
|
<span class="sr-only">{% translate "Clone" %}</span>
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</dialog>
|
<form action="{% url 'map_delete' map_inst.pk %}"
|
||||||
</td>
|
method="post" class="map-delete">
|
||||||
<td>{{ map_inst.get_share_status_display }}</td>
|
{% csrf_token %}
|
||||||
<td>{{ map_inst.get_edit_status_display }}</td>
|
<input type="hidden" name="next" value="{% url 'user_dashboard' %}">
|
||||||
<td>{{ map_inst.modified_at }}</td>
|
<button class="map-icon" type="submit"
|
||||||
<td>
|
title="{% translate "Delete" %}">
|
||||||
<a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
|
<span class="icon-dashboard icon-delete"></span>
|
||||||
</td>
|
<span class="sr-only">{% translate "Delete" %}</span>
|
||||||
<td>
|
</button>
|
||||||
<a href="{{ map_inst.get_absolute_url }}?share" class="icon-link"
|
</form>
|
||||||
title="{% translate "Share" %}">
|
</td>
|
||||||
<span class="icon-dashboard icon-share"></span>
|
</tr>
|
||||||
<span class="sr-only">{% translate "Share" %}</span>
|
{% endwith %}
|
||||||
</a>
|
{% endfor %}
|
||||||
<a href="{{ map_inst.get_absolute_url }}?edit" class="icon-link"
|
</tbody>
|
||||||
title="{% translate "Edit" %}">
|
</table>
|
||||||
<span class="icon-dashboard icon-edit"></span>
|
</div>
|
||||||
<span class="sr-only">{% translate "Edit" %}</span>
|
|
||||||
</a>
|
|
||||||
<a href="{% url 'map_download' map_inst.pk %}" class="icon-link"
|
|
||||||
title="{% translate "Download" %}">
|
|
||||||
<span class="icon-dashboard icon-download"></span>
|
|
||||||
<span class="sr-only">{% translate "Download" %}</span>
|
|
||||||
</a>
|
|
||||||
<form action="{% url 'map_clone' map_inst.pk %}" method="post">
|
|
||||||
{% csrf_token %}
|
|
||||||
<button class="map-icon" type="submit"
|
|
||||||
title="{% translate "Clone" %}">
|
|
||||||
<span class="icon-dashboard icon-duplicate"></span>
|
|
||||||
<span class="sr-only">{% translate "Clone" %}</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
<form action="{% url 'map_delete' map_inst.pk %}"
|
|
||||||
method="post" class="map-delete">
|
|
||||||
{% csrf_token %}
|
|
||||||
<input type="hidden" name="next" value="{% url 'user_dashboard' %}">
|
|
||||||
<button class="map-icon" type="submit"
|
|
||||||
title="{% translate "Delete" %}">
|
|
||||||
<span class="icon-dashboard icon-delete"></span>
|
|
||||||
<span class="sr-only">{% translate "Delete" %}</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endwith %}
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{% if maps.has_other_pages %}
|
{% if maps.has_other_pages %}
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
{% if maps.has_previous %}
|
{% if maps.has_previous %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue