nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-20 10:34:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

networks: Use table for styling network connection list

Browse Source 
- Split CSS into a separate file.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2020-12-17 13:53:00 -08:00 committed by Veiko Aasa
parent 4b10d525bd
commit eeac81b8c6
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
4 changed files with 124 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
plinth/modules/networks/static/networks.css Normal file
View File

@ -0,0 +1,65 @@
/*
# SPDX-License-Identifier: AGPL-3.0-or-later
*/
.connection-status-cell {
width: 4.125rem;
}
.connection-status-label {
width: 4.125rem;
padding: 0.3125rem 0;
text-align: center;
margin-right: 0.625rem;
}
.connection-actions {
width: 10rem;
}
.form-action {
display: inline;
}
.form-action button {
min-width: 6.25rem;
}
/* Connection diagram */
.connection-diagram {
margin-top: 2rem;
margin-bottom: 2rem;
}
.col-image {
display: block;
width: 100%;
}
.network-entity {
max-width: 8rem;
}
.network-type-icon {
width: 1.5rem;
height: 1.5rem;
}
.network-connection {
height: 0.5rem;
margin-bottom: 0.75rem;
}
.network-connection-vertical {
width: 0.5rem;
margin-left: 3.75rem;
}
.connection-list {
margin-left: 1.5rem;
}
.connection-list-heading {
font-weight: bold;
}

39
plinth/modules/networks/templates/connections_diagram.html
View File

@ -5,45 +5,6 @@
{% load static %}
{% load i18n %}
<style type="text/css">
.connection-diagram {
margin-top: 2rem;
margin-bottom: 2rem;
}
.col-image {
display: block;
width: 100%;
}
.network-entity {
max-width: 8rem;
}
.network-type-icon {
width: 1.5rem;
height: 1.5rem;
}
.network-connection {
height: 0.5rem;
margin-bottom: 0.75rem;
}
.network-connection-vertical {
width: 0.5rem;
margin-left: 3.75rem;
}
.connection-list {
margin-left: 1.5rem;
}
.connection-list-heading {
font-weight: bold;
}
</style>
<div class="row connection-diagram">
<div class="col-md-2">
<img src="{% static 'theme/img/network-internet.svg' %}"

98
plinth/modules/networks/templates/connections_list.html
View File

@ -20,51 +20,65 @@
</a>
</div>
<div class="list-group">
{% for connection in connections %}
<div class="list-group-item clearfix">
<a href="{% url 'networks:delete' connection.uuid %}"
class="btn btn-default btn-sm pull-right"
role="button"
title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
<span class="fa fa-trash-o"
aria-hidden="true"></span>
</a>
<div class="table-responsive">
<table class="table">
<tbody>
{% for connection in connections %}
<tr>
<td class="connection-status-cell">
{% if connection.is_active %}
<span class="badge badge-success connection-status-label">
{% trans "Active" %}
</span>
{% else %}
<span class="badge badge-warning connection-status-label">
{% trans "Inactive" %}
</span>
{% endif %}
</td>
{% if connection.is_active %}
<form class="form form-action pull-right" method="post"
action="{% url 'networks:deactivate' connection.uuid %}">
{% csrf_token %}
<td>
<a class="connection-show-label"
href="{% url 'networks:show' connection.uuid %}"
title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
{{ connection.name }}
</a>
</td>
<button type="submit" class="btn btn-default btn-sm">
{% trans "Deactivate" %}</button>
</form>
{% else %}
<form class="form form-action pull-right" method="post"
action="{% url 'networks:activate' connection.uuid %}">
{% csrf_token %}
<td>
<span class="connection-type-label">
{{ connection.type_name }}
</span>
</td>
<button type="submit" class="btn btn-default btn-sm">
{% trans "Activate" %}</button>
</form>
{% endif %}
<td class="connection-actions">
{% if connection.is_active %}
<form class="form form-action" method="post"
action="{% url 'networks:deactivate' connection.uuid %}">
{% csrf_token %}
<button type="submit" class="btn btn-default btn-sm">
{% trans "Deactivate" %}</button>
</form>
{% else %}
<form class="form form-action" method="post"
action="{% url 'networks:activate' connection.uuid %}">
{% csrf_token %}
<button type="submit" class="btn btn-default btn-sm">
{% trans "Activate" %}</button>
</form>
{% endif %}
{% if connection.is_active %}
<span class="badge badge-success connection-status-label">
{% trans "Active" %}</span>
{% else %}
<span class="badge badge-warning connection-status-label">
{% trans "Inactive" %}</span>
{% endif %}
<a class="connection-show-label"
href="{% url 'networks:show' connection.uuid %}"
title="{% blocktrans with name=connection.name %}Show connection {{ name }}{% endblocktrans %}">
{{ connection.name }}
</a>
<span class="connection-type-label">{{ connection.type_name }}</span>
</div>
{% endfor %}
<a href="{% url 'networks:delete' connection.uuid %}"
class="btn btn-default btn-sm"
role="button"
title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
<span class="fa fa-trash-o"
aria-hidden="true"></span>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% include "connections_diagram.html" %}

33
plinth/modules/networks/templates/networks_configuration.html
View File

@ -3,40 +3,13 @@
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}
{% load static %}
{% load bootstrap %}
{% load i18n %}
{% block page_head %}
<style type="text/css">
.connection-status-label {
display: inline-block;
width: 4.125rem;
padding: 0.3125rem 0;
text-align: center;
margin-right: 0.625rem;
}
.connection-show-label {
display: inline-block;
width: 40%;
}
.connection-type-label {
display: inline-block;
}
.list-group-item .btn {
margin: -0.125rem 0;
}
.form-action.pull-right {
margin-right: 1.25rem;
}
.form-action button {
min-width: 6.125rem;
}
</style>
<link type="text/css" rel="stylesheet"
href="{% static 'networks/networks.css' %}"/>
{% endblock %}
{% block configuration %}