Mobile layout work (3) (#1616)

* Xlinks, ports and devices

* Tunnels

files/app/main/status/e/neighbor-device.ut

@@ -167,7 +167,8 @@ if (tracker) {
             const l = neighbor.l;
         %}
         <div class="neighbor">
-            <div class="o"><a href="{{n.hostname ? `http://${n.hostname}.local.mesh` : n.ip}}" target="_blank">{{n.hostname || n.ip}}</a>
+            <div class="o">
+                <div><a href="{{n.hostname ? `http://${n.hostname}.local.mesh` : n.ip}}" target="_blank">{{n.hostname || n.ip}}</a></div>
                 <select name="{{n.mac}}" hx-put={{request.env.REQUEST_URI}} hx-swap="none">
                     <option value="always" {{n.user_allow ? "selected" : ""}}>never block</option>
                     <option value="available" {{n.user_allow || n.blocks.user ? "" : "selected"}}>{{n.blocked ? "blocked" : "unblocked"}}</option>

files/app/main/status/e/ports-and-xlinks.ut

@@ -311,8 +311,8 @@ uciMesh.foreach("xlink", "interface", x => {
             </div>
             <form>
                 <div id="xlink-list">
-                    <div class="cols xlink-label">
-                        <div style="white-space:nowrap">
+                    <div class="xlink-label adr">
+                        <div>
                             <div>vlan</div>
                             <div>ip a&zwnj;ddress</div>
                             <div>peer a&zwnj;ddress</div>
@@ -327,7 +327,7 @@ uciMesh.foreach("xlink", "interface", x => {
                     {% for (let i = 0; i < length(xlinks); i++) {
                         const x = xlinks[i];
                     %}
-                        <div class="cols xlink" data-name="{{x.name}}">
+                        <div class="xlink adr" data-name="{{x.name}}">
                             <div>
                                 <input name="vlan" type="text" size="5" required pattern="([4-9]|[1-9][0-9]{1,2}|[1-3][0-9]{3}|40[0-8][0-9]|409[0-5])" placeholder="VLan" value="{{x.vlan}}">
                                 <input name="ipaddr" type="text" size="25" required pattern="{{constants.patIP}}" placeholder="IP A&zwnj;ddress" value="{{x.ipaddr}}">
@@ -437,7 +437,7 @@ uciMesh.foreach("xlink", "interface", x => {
             xlinks.push(x);
             const div = document.createElement("div");
             const ls = htmx.find("#ctrl-modal .dialog #xlink-list");
-            div.innerHTML = `<div class="cols xlink" data-name="${x.name}">
+            div.innerHTML = `<div class="xlink adr" data-name="${x.name}">
 <div>
     <input name="vlan" type="text" size="5" required pattern="([4-9]|[1-9][0-9]{1,2}|[1-3][0-9]{3}|40[0-8][0-9]|409[0-5])" placeholder="VLan">
     <input name="ipaddr" type="text" size="25" required pattern="${patIP}" placeholder="IP A&zwnj;ddress">

files/app/main/status/e/tunnels.ut

@@ -305,10 +305,10 @@ function t2t(type)
                     const t = tunnels[i];
                     const client = t.type === "lc" || t.type === "wc" ? true : false;
                     const wireguard = t.type === "ws" || t.type === "wc" ? true : false;
-                    %}<div class="tunnel cols" data-index="{{t.index}}">
+                    %}<div class="tunnel adr" data-index="{{t.index}}">
                         <div class="cols">
                             <div data-type="{{t.type}}">{{t2t(t.type)}}</div>
-                            <div>
+                            <div class="cols">
                                 <div class="cols">
                                     <input type="text" name="name" required placeholder="{{client ? 'Server name' : 'Node name'}}" value="{{t.name}}">
                                     <label class="switch {{t.up ? 'up' : ''}}"><input type="checkbox" name="enable" {{t.enabled ? "checked" : ""}}></label>
@@ -513,10 +513,10 @@ This value is used by default, but each tunnel may overide it.
                     break;
             }
             const div = document.createElement("div");
-            div.innerHTML = `<div class="tunnel cols new" data-index="${index}">
+            div.innerHTML = `<div class="tunnel adr new" data-index="${index}">
 <div class="cols">
     <div data-type="${type}">${htype}</div>
-    <div>
+    <div class="cols">
         <div class="cols">
             <input type="text" name="name" required placeholder="${client ? 'Server name' : 'Node name'}" value="">
             <label class="switch"><input type="checkbox" name="enable" checked></label>
@@ -532,7 +532,8 @@ This value is used by default, but each tunnel may overide it.
             ${client ? '' : '<button class="clipboard"><div class="icon clipboard"></div></button>'}
         </div>
     </div>
-    <button class="remove">-</button>
+</div>
+<button class="remove">-</button>
 </div>`;
             const t = htmx.find("#tunnels");
             const fc = div.firstChild;

files/app/resource/css/admin.css

@@ -640,12 +640,19 @@ label.switch
 }
 #ctrl-modal .neighbor .o
 {
+    display: flex;
     font-size: calc(var(--font-base-size) + 4px);
     padding: 8px;
     border-radius: 6px;
     margin-bottom: 4px;
     background-color: var(--ctrl-modal-bg-secondary-color);
 }
+#ctrl-modal .neighbor .o > div
+{
+    flex: 1;
+    white-space: nowrap;
+    overflow-x: hidden;
+}
 #ctrl-modal .neighbor > div:not(.o)
 {
     padding-left: 7px;
@@ -664,6 +671,7 @@ label.switch
 }
 #ctrl-modal .neighbor select
 {
+    margin-left: 5px;
     padding: 2px 4px;
     vertical-align: top;
     float: right;
@@ -1162,11 +1170,10 @@ label.switch
 {
     border-color: inherit !important;
 }
-.tunnel > .cols > div:first-child
+#ctrl-modal .tunnel > .cols > div:first-child
 {
     flex: 0;
     font-size: 12px;
-    margin: 0 10px 0 0;
     padding: 0 4px;
     border-radius: 6px;;
     writing-mode: vertical-rl;
@@ -1174,20 +1181,29 @@ label.switch
     text-align: center;
     color: var(--tunnel-fg-color);
     cursor: default;
+    align-self: auto;
+}
+#ctrl-modal .tunnel > .cols > .cols
+{
+    flex: 1;
+}
+.tunnel > .cols > .cols > .cols
+{
+    min-width: 100%;
 }
 .tunnel > .cols > div:first-child[data-type=ws]
 {
     background-color: var(--tunnel-bg-wireguard-server-color);
 }
-.tunnel > .cols > div:first-child[data-type=wc]
+.tunnel div[data-type=wc]
 {
     background-color: var(--tunnel-bg-wireguard-client-color);
 }
-.tunnel > .cols > div:first-child[data-type=ls]
+.tunnel div[data-type=ls]
 {
     background-color: var(--tunnel-bg-legacy-server-color);
 }
-.tunnel > .cols > div:first-child[data-type=lc]
+.tunnel div[data-type=lc]
 {
     background-color: var(--tunnel-bg-legacy-client-color);
 }
@@ -1298,8 +1314,7 @@ label.switch
 }
 #ctrl-modal .ports table thead td div
 {
-    width: 54px;
-    padding: 5px 0;
+    padding: 5px 10px;
     margin: 0 auto;
     border-radius: 14px;
     color: var(--service-fg-color-status);

files/app/resource/css/mobile.css

@@ -203,9 +203,22 @@ body.mobile #ctrl-modal .port-forwards-label div:nth-child(2)
     min-width: 70px;
 }
 
-body.mobile .tunnel .cols .cols.pwnw input[name=network]
+body.mobile #ctrl-modal .xlink-label div:first-child div:first-child,
+body.mobile #ctrl-modal .xlink-label div:first-child div:nth-child(6),
+body.mobile #ctrl-modal .xlink input:first-child,
+body.mobile #ctrl-modal .xlink select:first-child,
+body.mobile #ctrl-modal .xlink select[name=port]
 {
-    width: calc(100% - 64px);
+    width: 45px;
+    flex-grow: 1;
+}
+body.mobile #ctrl-modal .xlink-label div:first-child div:nth-child(2),
+body.mobile #ctrl-modal .xlink-label div:first-child div:nth-child(3),
+body.mobile #ctrl-modal .xlink input:nth-child(2),
+body.mobile #ctrl-modal .xlink input:nth-child(3)
+{
+    width: 70px;
+    flex-grow: 1;
 }
 
 body.mobile #meshpage