Make relays table more compact with two rows per entry

This commit is contained in:
Mark Veidemanis 2022-08-18 07:20:30 +01:00
parent 65fddc5fe9
commit 9d125de999
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
2 changed files with 105 additions and 65 deletions

View File

@ -90,6 +90,9 @@
height: 20em; height: 20em;
overflow: auto; overflow: auto;
} }
table.relays-table tr:nth-of-type(2n) td {
border-bottom: 3px solid grey;
}
/* @media screen and (min-width: 500px) { /* @media screen and (min-width: 500px) {
.datetimepicker-wrapper { .datetimepicker-wrapper {

View File

@ -4,7 +4,7 @@
{% if relays is not None %} {% if relays is not None %}
<div class="content" style="max-height: 30em; overflow: auto;"> <div class="content" style="max-height: 30em; overflow: auto;">
<div class="table-container"> <div class="table-container">
<table class="table is-fullwidth is-hoverable"> <table class="table is-fullwidth is-hoverable relays-table">
<thead> <thead>
<th>id</th> <th>id</th>
<th> <th>
@ -40,7 +40,7 @@
<th>nick</th> <th>nick</th>
<th> <th>
<span class="icon has-tooltip-bottom" data-tooltip="Actions"> <span class="icon has-tooltip-bottom" data-tooltip="Actions">
<i class="fa-solid fa-wrench" aria-hidden="true"></i> <i class="fa-solid fa-wrench"></i>
</span> </span>
</th> </th>
</thead> </thead>
@ -100,69 +100,106 @@
{{ relay.nick }} {{ relay.nick }}
</td> </td>
<td> <td>
<div class="nowrap-parent"> <a
<div class="nowrap-child"> hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
{% if relay.enabled %} hx-post="{% url 'modal_context' %}"
<a hx-vals='{"net": "{{ net }}",
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' "num": "{{ relay.id }}",
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}" "src": "irc",
hx-target="#relays" "channel": "None",
hx-swap="outerHTML" "time": "None",
class="button has-background-warning"> "date": "None",
<span class="icon" data-tooltip="Disable"> "index": "int",
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i> "type": "znc",
</span> "mtype": "None",
</a> "nick": "None"}'
{% else %} hx-target="#modals-here"
<a hx-trigger="click"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="button is-small has-background-info has-text-white">
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}" <span class="icon has-tooltip-left" data-tooltip="ZNC context">
hx-target="#relays" <i class="fa-brands fa-unity" aria-hidden="true"></i>
hx-swap="outerHTML" </span>
class="button has-background-success has-text-white"> </a>
<span class="icon" data-tooltip="Enable"> </td> {# actions-top #}
<i class="fa-solid fa-wifi" aria-hidden="true"></i> </tr>
</span> <tr>
</a> <td>
{% endif %} <a
<a hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}"
hx-delete="{% url 'threshold_irc_network_relay_del' relay|index:'net' relay|index:'id' %}" hx-target="#relays"
hx-target="#relays" hx-swap="outerHTML"
hx-swap="outerHTML" class="button is-small has-background-danger has-text-white">
class="button has-background-danger has-text-white"> <span class="icon" data-tooltip="Delete">
<span class="icon" data-tooltip="Delete"> <i class="fa-solid fa-xmark" aria-hidden="true"></i>
<i class="fa-solid fa-xmark" aria-hidden="true"></i> </span>
</span> </a>
</a> </td> {# id #}
</div> <td>
</div> <a
<div class="nowrap-parent"> hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
<div class="nowrap-child"> hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}"
<a hx-target="#relays"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-swap="outerHTML"
hx-post="{% url 'threshold_irc_network_relay_provision' relay|index:'net' relay|index:'id' %}" class="button is-small has-background-info has-text-white">
hx-target="#relays" <span class="icon" data-tooltip="Provision">
hx-swap="outerHTML" <i class="fa-solid fa-wrench" aria-hidden="true"></i>
class="button has-background-info has-text-white"> </span>
<span class="icon" data-tooltip="Provision"> </a>
<i class="fa-solid fa-wrench" aria-hidden="true"></i> </td> {# reg #}
</span> <td>
</a> <a
<a hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}" hx-target="#relays"
hx-target="#relays" hx-swap="outerHTML"
hx-swap="outerHTML" class="button is-small has-background-info has-text-white">
class="button has-background-info has-text-white"> <span class="icon" data-tooltip="Enable authentication">
<span class="icon" data-tooltip="Enable authentication"> <i class="fa-solid fa-passport" aria-hidden="true"></i>
<i class="fa-solid fa-passport" aria-hidden="true"></i> </span>
</span> </a>
</a> </td> {# auth #}
</div> <td></td> {# conn #}
</div> <td>
{% if relay.enabled %}
</td> <a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 0 %}"
hx-target="#relays"
hx-swap="outerHTML"
class="button is-small has-background-warning">
<span class="icon" data-tooltip="Disable">
<i class="fa-solid fa-wifi-slash" aria-hidden="true"></i>
</span>
</a>
{% else %}
<a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_relay_status' relay|index:'net' relay|index:'id' 1 %}"
hx-target="#relays"
hx-swap="outerHTML"
class="button is-small has-background-success has-text-white">
<span class="icon" data-tooltip="Enable">
<i class="fa-solid fa-wifi" aria-hidden="true"></i>
</span>
</a>
{% endif %}
</td> {# on #}
<td></td>
<td></td>
<td></td>
<td>
<a
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-post="{% url 'threshold_irc_network_relay_auth' relay|index:'net' relay|index:'id' %}"
hx-target="#relays"
hx-swap="outerHTML"
class="button is-small has-background-info has-text-white">
<span class="icon has-tooltip-left" data-tooltip="Auth entity context">
<i class="fa-solid fa-signature" aria-hidden="true"></i>
</span>
</a>
</td> {# actions-bottom #}
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>