jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make dashboard table scrollable

Browse source
This commit is contained in:
David Larlet 2024-02-09 10:14:44 -05:00
parent 991657f3ea
commit 5827a4cab0
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
2 changed files with 104 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
umap/static/umap/content.css
View file

@ -401,32 +401,39 @@ ul.umap-autocomplete {
line-height: inherit;
height: 2.5rem;
}
table.maps {
.table-wrapper {
overflow-x: scroll;
}
.table-wrapper table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
}
table.maps .map_fragment {
.table-wrapper table .map_fragment {
display: block;
height: 80vh;
width: 100%;
}
table.maps a,
table.maps thead {
.table-wrapper table a,
.table-wrapper table thead {
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;
}
table.maps button.map-icon {
.table-wrapper table button.map-icon {
padding: 0;
border: none;
background: transparent;
}
table.maps form {
.table-wrapper table form {
display: inline;
}
table.maps input[type="submit"] {
.table-wrapper table input[type="submit"] {
display: inline;
background-color: transparent;
color: #263B58;
@ -436,22 +443,22 @@ table.maps input[type="submit"] {
margin: 0;
line-height: inherit;
}
table.maps tbody tr {
.table-wrapper table tbody tr {
border-bottom: 1px solid #BDC7D4;
}
table.maps tbody tr td {
.table-wrapper table tbody tr td {
padding: 5px 4px;
}
table.maps tbody tr:nth-child(odd) {
.table-wrapper table tbody tr:nth-child(odd) {
background-color: #f4f4f4;
}
table.maps td {
.table-wrapper table td {
text-align: center;
}
table.maps thead tr {
.table-wrapper table thead tr {
line-height: 2em;
}
table.maps .button {
.table-wrapper table .button {
margin-bottom: 2px;
padding:4px 6px;
height: 36px;

162
umap/templates/umap/map_table.html
View file

@ -1,85 +1,87 @@
{% load umap_tags i18n %}
<table class="maps">
<thead>
<tr>
<th>{% blocktrans %}Name{% endblocktrans %}</th>
<th>{% blocktrans %}Preview{% endblocktrans %}</th>
<th>{% blocktrans %}Who can see{% endblocktrans %}</th>
<th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
<th>{% blocktrans %}Last save{% endblocktrans %}</th>
<th>{% blocktrans %}Owner{% endblocktrans %}</th>
<th>{% blocktrans %}Actions{% endblocktrans %}</th>
</tr>
</thead>
<tbody>
{% for map_inst in maps %}
{% with unique_id="map_"|addstr:map_inst.pk %}
<tr>
<td>
<a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
</td>
<td>
{{ map_inst.preview_settings|json_script:unique_id }}
<button class="map-icon map-opener" data-map-id="{{ unique_id }}"
title="{% translate "Open preview" %}">
<span class="icon-dashboard icon-view"></span>
<span class="sr-only">{% translate "Open preview" %}</span>
</button>
<dialog>
<form method="dialog">
<div id="{{ unique_id }}_target" class="map_fragment"></div>
<p class="close-dialog">
<button class="button" type="submit">Close</button>
</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>{% blocktrans %}Name{% endblocktrans %}</th>
<th>{% blocktrans %}Preview{% endblocktrans %}</th>
<th>{% blocktrans %}Who can see{% endblocktrans %}</th>
<th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
<th>{% blocktrans %}Last save{% endblocktrans %}</th>
<th>{% blocktrans %}Owner{% endblocktrans %}</th>
<th>{% blocktrans %}Actions{% endblocktrans %}</th>
</tr>
</thead>
<tbody>
{% for map_inst in maps %}
{% with unique_id="map_"|addstr:map_inst.pk %}
<tr>
<td>
<a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
</td>
<td>
{{ map_inst.preview_settings|json_script:unique_id }}
<button class="map-icon map-opener" data-map-id="{{ unique_id }}"
title="{% translate "Open preview" %}">
<span class="icon-dashboard icon-view"></span>
<span class="sr-only">{% translate "Open preview" %}</span>
</button>
<dialog>
<form method="dialog">
<div id="{{ unique_id }}_target" class="map_fragment"></div>
<p class="close-dialog">
<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>
</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 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>
<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>
</div>
{% if maps.has_other_pages %}
<div class="pagination">
{% if maps.has_previous %}