Mobile/responsive work

2024-07-03 17:24:59 +02:00 · 2024-07-03 17:24:59 +02:00 · 920a8b392e
parent 44625ca5f0
commit 920a8b392e
5 changed files with 66 additions and 72 deletions
--- a/hsman/app/templates/node.html
+++ b/hsman/app/templates/node.html
@ -1,24 +1,22 @@
 {% extends "base.html" %}

 {% block content %}
-<div class="row">
-    <div class="col col-2 float-left">
-        <strong>name</strong>
-    </div>
-    <div class="col col-8 float-left">
-    <span id="givenName">{{ node.givenName }}</span>
+<h3>
+    <span id="givenName">
+    {{node.givenName}}
+    </span>
    <a href="#" data-toggle="modal" data-target="#renameModal">
-        <span
-        data-toggle="tooltip"
+        <span data-toggle="tooltip"
            data-placement="right"
            title="rename node">
-        <i class="fas fa-edit"></i>
+            <i class="fas fa-edit h6"></i>
        </span>
    </a>
-    </div>
-</div>
+</h3>
+<hr>
+<p></p>
 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-3 float-left">
        <strong>registered</strong>
    </div>
    <div class="col col-8 float-left">
@ -29,7 +27,7 @@
 </div>

 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-3 float-left">
        <strong>expiry</strong>
    </div>
    <div class="col col-8 float-left">
@ -45,8 +43,8 @@
 </div>

 <div class="row">
-    <div class="col col-2 float-left">
-        <strong>user</strong>
+    <div class="col col-3 float-left">
+        <strong>owner</strong>
    </div>
    <div class="col col-8 float-left">
        <a href='{{ url_for("main.user", userName=node.user.name) }}' class="plain">{{ node.user.name }}</a>
@ -66,14 +64,9 @@
 </div>
 {% endfor %}
 <p></p>
-
+<h5>tags</h5>
 <div class="row">
    <div class="col col-3 float-left">
-        <h5>tags</h5>
-    </div>
-</div>
-<div class="row">
-    <div class="col col-2 float-left">
        <strong>
            announced
        </strong>
@ -91,7 +84,7 @@
    </div>
 </div>
 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-3 float-left">
        <strong>forced</strong>
    </div>
    <div class="col col-6 float-left">
@ -109,14 +102,10 @@


 <p></p>
-<div class="row">
-    <div class="col col-3 float-left">
-        <h5>keys</h5>
-    </div>
-</div>
+<h5>keys</h5>

 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-4 float-left">
        <strong>machineKey</strong>
    </div>
    <div class="col col-8 float-left">
@ -125,7 +114,7 @@
 </div>

 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-4 float-left">
        <strong>nodeKey</strong>
    </div>
    <div class="col col-8 float-left">
@ -134,7 +123,7 @@
 </div>

 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-4 float-left">
        <strong>discoKey</strong>
    </div>
    <div class="col col-8 float-left">
@ -144,36 +133,32 @@

 <p></p>

-<div class="row">
-    <div class="col col-3 float-left">
-        <h5>routes
-        {% if isExitNode %}
-        <span class="small badge-pill badge-success">Exit Node</span>
-        {% endif %}
-        </h5>
-    </div>
-</div>
+<h5>routes
+{% if isExitNode %}
+<span class="small badge-pill badge-success">Exit Node</span>
+{% endif %}
+</h5>
 {% if routes %}
 <div class="row">
-    <div class="col col-3 float-left">
+    <div class="col col-4 float-left">
        <strong>prefix</strong>
    </div>
-    <div class="col col-3 float-left">
+    <div class="col col-4 float-left">
        <strong>enabled</strong>
    </div>
-    <div class="col col-3 float-left">
+    <div class="col col-4 float-left">
        <strong>primary</strong>
    </div>
 </div>
 {% for route in routes | sort(attribute='prefix') %}
 <div class="row data">
-    <div class="col col-3 float-left">
+    <div class="col col-4 float-left">
        {{ route.prefix }}
    </div>
-    <div class="col col-3 float-left">
+    <div class="col col-4 float-left">
        {{ route.enabled | fancyBool | safe }}
    </div>
-    <div class="col col-3 float-left">
+    <div class="col col-4 float-left">
        {{ route.isPrimary | fancyBool | safe }}
    </div>
 </div>
--- a/hsman/app/templates/nodes.html
+++ b/hsman/app/templates/nodes.html
@ -5,6 +5,9 @@
 {% endblock %}

 {% block content %}
+<h3>nodes</h3>
+<hr>
+<p></p>
 <table id="nodes" class="display" style="width:100%">
    <thead>
        <tr>
--- a/hsman/app/templates/routes.html
+++ b/hsman/app/templates/routes.html
@ -12,14 +12,14 @@
 <p></p>

 <div class="row">
-    <div class="col col-8">
+    <div class="col col-12">
        <h5>Exit nodes</h5>
    </div>
 </div>

 {% for exitNode in exitNodes %}
 <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') }}">
        &nbsp; {{ exitNode.givenName }}
        </span>
@ -30,10 +30,10 @@
 <p></p>
 {% for prefix, rts in routes.items() %}
 <div class="row">
-    <div class="col col-2 float-left">
+    <div class="col col-4 float-left">
        <strong>prefix</strong>
    </div>
-    <div class="col col-2 float-left">
+    <div class="col col-4 float-left">
        <strong>gateway</strong>
    </div>
    <div class="col col-2 float-left">
@ -44,10 +44,10 @@
    </div>
 </div>
 <div class="row data">
-    <div class="col col-2 float-left">
+    <div class="col col-4 float-left">
        {{ prefix}}
    </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) }}">
            <span data-toggle="tooltip" data-placement="right"
                title="{{ rts[0].node.ipAddresses | join('\n') }}">
@ -66,10 +66,10 @@
 </div>
    {% for rt in rts[1:] %}
 <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>
    </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) }}">
            <span data-toggle="tooltip" data-placement="right"
                title="{{ rt.node.ipAddresses | join('\n') }}">
--- a/hsman/app/templates/user.html
+++ b/hsman/app/templates/user.html
@ -6,19 +6,14 @@

 {% block content %}

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


 {% endblock %}
--- a/hsman/app/templates/users.html
+++ b/hsman/app/templates/users.html
@ -5,6 +5,9 @@
 {% endblock %}

 {% block content %}
+<h3>users</h3>
+<hr>
+<p></p>
 <table id="users" class="display" style="width:100%">
    <thead>
        <tr>