Mobile/responsive work

This commit is contained in:
Andrea Mistrali 2024-07-03 17:24:59 +02:00
parent 44625ca5f0
commit 920a8b392e
5 changed files with 66 additions and 72 deletions

View File

@ -1,24 +1,22 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="row"> <h3>
<div class="col col-2 float-left"> <span id="givenName">
<strong>name</strong> {{node.givenName}}
</div> </span>
<div class="col col-8 float-left">
<span id="givenName">{{ node.givenName }}</span>
<a href="#" data-toggle="modal" data-target="#renameModal"> <a href="#" data-toggle="modal" data-target="#renameModal">
<span <span data-toggle="tooltip"
data-toggle="tooltip"
data-placement="right" data-placement="right"
title="rename node"> title="rename node">
<i class="fas fa-edit"></i> <i class="fas fa-edit h6"></i>
</span> </span>
</a> </a>
</div> </h3>
</div> <hr>
<p></p>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-3 float-left">
<strong>registered</strong> <strong>registered</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8 float-left">
@ -29,7 +27,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-3 float-left">
<strong>expiry</strong> <strong>expiry</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8 float-left">
@ -45,8 +43,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-3 float-left">
<strong>user</strong> <strong>owner</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8 float-left">
<a href='{{ url_for("main.user", userName=node.user.name) }}' class="plain">{{ node.user.name }}</a> <a href='{{ url_for("main.user", userName=node.user.name) }}' class="plain">{{ node.user.name }}</a>
@ -66,14 +64,9 @@
</div> </div>
{% endfor %} {% endfor %}
<p></p> <p></p>
<h5>tags</h5>
<div class="row"> <div class="row">
<div class="col col-3 float-left"> <div class="col col-3 float-left">
<h5>tags</h5>
</div>
</div>
<div class="row">
<div class="col col-2 float-left">
<strong> <strong>
announced announced
</strong> </strong>
@ -91,7 +84,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-3 float-left">
<strong>forced</strong> <strong>forced</strong>
</div> </div>
<div class="col col-6 float-left"> <div class="col col-6 float-left">
@ -109,14 +102,10 @@
<p></p> <p></p>
<div class="row">
<div class="col col-3 float-left">
<h5>keys</h5> <h5>keys</h5>
</div>
</div>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-4 float-left">
<strong>machineKey</strong> <strong>machineKey</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8 float-left">
@ -125,7 +114,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-4 float-left">
<strong>nodeKey</strong> <strong>nodeKey</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8 float-left">
@ -134,7 +123,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-4 float-left">
<strong>discoKey</strong> <strong>discoKey</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8 float-left">
@ -144,36 +133,32 @@
<p></p> <p></p>
<div class="row">
<div class="col col-3 float-left">
<h5>routes <h5>routes
{% if isExitNode %} {% if isExitNode %}
<span class="small badge-pill badge-success">Exit Node</span> <span class="small badge-pill badge-success">Exit Node</span>
{% endif %} {% endif %}
</h5> </h5>
</div>
</div>
{% if routes %} {% if routes %}
<div class="row"> <div class="row">
<div class="col col-3 float-left"> <div class="col col-4 float-left">
<strong>prefix</strong> <strong>prefix</strong>
</div> </div>
<div class="col col-3 float-left"> <div class="col col-4 float-left">
<strong>enabled</strong> <strong>enabled</strong>
</div> </div>
<div class="col col-3 float-left"> <div class="col col-4 float-left">
<strong>primary</strong> <strong>primary</strong>
</div> </div>
</div> </div>
{% for route in routes | sort(attribute='prefix') %} {% for route in routes | sort(attribute='prefix') %}
<div class="row data"> <div class="row data">
<div class="col col-3 float-left"> <div class="col col-4 float-left">
{{ route.prefix }} {{ route.prefix }}
</div> </div>
<div class="col col-3 float-left"> <div class="col col-4 float-left">
{{ route.enabled | fancyBool | safe }} {{ route.enabled | fancyBool | safe }}
</div> </div>
<div class="col col-3 float-left"> <div class="col col-4 float-left">
{{ route.isPrimary | fancyBool | safe }} {{ route.isPrimary | fancyBool | safe }}
</div> </div>
</div> </div>

View File

@ -5,6 +5,9 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h3>nodes</h3>
<hr>
<p></p>
<table id="nodes" class="display" style="width:100%"> <table id="nodes" class="display" style="width:100%">
<thead> <thead>
<tr> <tr>

View File

@ -12,14 +12,14 @@
<p></p> <p></p>
<div class="row"> <div class="row">
<div class="col col-8"> <div class="col col-12">
<h5>Exit nodes</h5> <h5>Exit nodes</h5>
</div> </div>
</div> </div>
{% for exitNode in exitNodes %} {% for exitNode in exitNodes %}
<div class="row data"> <div class="row data">
<div class="col col-2"> <div class="col col-12">
<span data-toggle="tooltip" data-placement="right" title="{{ exitNode.ipAddresses | join('\n') }}"> <span data-toggle="tooltip" data-placement="right" title="{{ exitNode.ipAddresses | join('\n') }}">
&nbsp; {{ exitNode.givenName }} &nbsp; {{ exitNode.givenName }}
</span> </span>
@ -30,10 +30,10 @@
<p></p> <p></p>
{% for prefix, rts in routes.items() %} {% for prefix, rts in routes.items() %}
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-4 float-left">
<strong>prefix</strong> <strong>prefix</strong>
</div> </div>
<div class="col col-2 float-left"> <div class="col col-4 float-left">
<strong>gateway</strong> <strong>gateway</strong>
</div> </div>
<div class="col col-2 float-left"> <div class="col col-2 float-left">
@ -44,10 +44,10 @@
</div> </div>
</div> </div>
<div class="row data"> <div class="row data">
<div class="col col-2 float-left"> <div class="col col-4 float-left">
{{ prefix}} {{ prefix}}
</div> </div>
<div class="col col-2 float-left"> <div class="col col-4 float-left">
<a class="plain route primary" href="{{ url_for('main.node', nodeId=rts[0].node.id) }}"> <a class="plain route primary" href="{{ url_for('main.node', nodeId=rts[0].node.id) }}">
<span data-toggle="tooltip" data-placement="right" <span data-toggle="tooltip" data-placement="right"
title="{{ rts[0].node.ipAddresses | join('\n') }}"> title="{{ rts[0].node.ipAddresses | join('\n') }}">
@ -66,10 +66,10 @@
</div> </div>
{% for rt in rts[1:] %} {% for rt in rts[1:] %}
<div class="row data"> <div class="row data">
<div class="col col-2 float-left" style="border: 1px red;"> <div class="col col-4 float-left" style="border: 1px red;">
<span>&nbsp;</span> <span>&nbsp;</span>
</div> </div>
<div class="col col-2"> <div class="col col-4">
<a class="plain route {{rt.enabled}}" href="{{ url_for('main.node', nodeId=rt.node.id) }}"> <a class="plain route {{rt.enabled}}" href="{{ url_for('main.node', nodeId=rt.node.id) }}">
<span data-toggle="tooltip" data-placement="right" <span data-toggle="tooltip" data-placement="right"
title="{{ rt.node.ipAddresses | join('\n') }}"> title="{{ rt.node.ipAddresses | join('\n') }}">

View File

@ -6,19 +6,14 @@
{% block content %} {% block content %}
<h3>{{ user.name }}</h3>
<hr>
<p></p>
<div class="row"> <div class="row">
<div class="col col-2 float-left"> <div class="col col-3">
<strong>name</strong>
</div>
<div class="col col-8 float-left">
{{ user.name }}
</div>
</div>
<div class="row">
<div class="col col-2 float-left">
<strong>registered</strong> <strong>registered</strong>
</div> </div>
<div class="col col-8 float-left"> <div class="col col-8">
<span data-toggle="tooltip" data-placement="right" title="{{ user.createdAt | fmt_datetime }}"> <span data-toggle="tooltip" data-placement="right" title="{{ user.createdAt | fmt_datetime }}">
{{ user.createdAt | htime_dt }} {{ user.createdAt | htime_dt }}
</span> </span>
@ -26,10 +21,10 @@
</div> </div>
<p></p> <p></p>
<h5>nodes</h5> <h5>nodes</h5>
<table id="nodes" class="display" style="width:100%"> <table id="nodes" class="display" style="width:80%">
<thead> <thead>
<tr> <tr>
<th>name</th> <th>&nbsp;</th>
<th>last connect</th> <th>last connect</th>
<th>online</th> <th>online</th>
</tr> </tr>
@ -56,10 +51,11 @@
</table> </table>
<p></p> <p></p>
<h5>pre auth keys</h5> <h5>pre auth keys</h5>
<table id="paks" class="display" style="width:100%"> {% if preauthKeys %}
<table id="paks" class="display" style="width:80%">
<thead> <thead>
<tr> <tr>
<th>name</th> <th>&nbsp;</th>
<th>created</th> <th>created</th>
<th>expiration</th> <th>expiration</th>
<th>attributes</th> <th>attributes</th>
@ -72,8 +68,8 @@
<td> <td>
<span data-toggle="tooltip" <span data-toggle="tooltip"
data-placement="right" data-placement="right"
title="{{ key.key }}" title="click to copy"
class="pak_copy">{{ key.key[:10] }}&hellip;</span> class="pak_copy">{{ key.key }}</span>
</td> </td>
<td> <td>
<span data-toggle="tooltip" <span data-toggle="tooltip"
@ -107,6 +103,13 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
{% else %}
<div class="row">
<div class="col col-9 text-center">
<h3>No preauth keys</h3>
</div>
</div>
{% endif %}
{% endblock %} {% endblock %}

View File

@ -5,6 +5,9 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<h3>users</h3>
<hr>
<p></p>
<table id="users" class="display" style="width:100%"> <table id="users" class="display" style="width:100%">
<thead> <thead>
<tr> <tr>