Update client list layout and show total client RX/TX

Update client layout to show current and total rx/tx values in columns.
Update tablet and mobile layout

src/tailwind.config.js

@@ -5,4 +5,14 @@
 module.exports = {
   darkMode: 'media',
   content: ['./www/**/*.{html,js}'],
+  theme: {
+    screens: {
+      'xs': '576px',
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    }
+  }
 };

src/www/css/app.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -548,6 +548,12 @@ video {
   width: 100%;
 }
 
+@media (min-width: 576px) {
+  .container {
+    max-width: 576px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -676,6 +682,10 @@ video {
   margin-bottom: 4rem;
 }
 
+.-ml-4 {
+  margin-left: -1rem;
+}
+
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -700,8 +710,16 @@ video {
   margin-right: 0.5rem;
 }
 
-.mr-5 {
+.mr-4 {
-  margin-right: 1.25rem;
+  margin-right: 1rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
 }
 
 .mt-10 {
@@ -720,6 +738,10 @@ video {
   margin-top: 1.25rem;
 }
 
+.mt-px {
+  margin-top: 1px;
+}
+
 .block {
   display: block;
 }
@@ -840,6 +862,10 @@ video {
   width: 100%;
 }
 
+.min-w-24 {
+  min-width: 6rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -925,6 +951,18 @@ video {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1421,6 +1459,12 @@ video {
   opacity: 1;
 }
 
+@media (min-width: 576px) {
+  .xs\:flex-row {
+    flex-direction: row;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:mx-0 {
     margin-left: 0px;
@@ -1488,10 +1532,18 @@ video {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:flex-row-reverse {
     flex-direction: row-reverse;
   }
 
+  .sm\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
   .sm\:items-start {
     align-items: flex-start;
   }
@@ -1528,6 +1580,10 @@ video {
 }
 
 @media (min-width: 768px) {
+  .md\:ml-0 {
+    margin-left: 0px;
+  }
+
   .md\:inline-block {
     display: inline-block;
   }

src/www/index.html

@@ -89,11 +89,16 @@
                   style="transform: scaleY(-1);">
                 </apexchart>
               </div>
-              <div class="relative p-5 z-10 flex flex-col md:flex-row justify-between">
+
-                <div class="flex items-center pb-2 md:pb-0">
+              <div class="relative p-5 z-10 flex flex-col xs:flex-row justify-between gap-3">
-                  <div class="h-10 w-10 mr-5 rounded-full bg-gray-50 relative">
+                <div class="flex gap-2 w-full items-center ">
-                    <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg"
+                  <!-- flex-wrap sm:flex-nowrap flex-col sm:flex-row pb-2 md:pb-0-->
-                      viewBox="0 0 20 20" fill="currentColor">
+                  <!-- <div class="flex flex-grow items-center"> -->
+
+                  <!-- Avatar -->
+                  <div class="h-10 w-10 mr-4 mt-2 self-start rounded-full bg-gray-50 relative">
+                    <svg class="w-6 m-2 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                      fill="currentColor">
                       <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                         clip-rule="evenodd" />
                     </svg>
@@ -108,9 +113,11 @@
                     </div>
                   </div>
 
-                  <div class="flex-grow">
+                  <!-- Name & Info -->
+                  <div class="flex flex-col md:flex-row w-full gap-2">
 
                     <!-- Name -->
+                    <div class="flex flex-col flex-grow gap-1">
                       <div class="text-gray-700 dark:text-neutral-200 group"
                         :title="$t('createdOn') + dateTime(new Date(client.createdAt))">
 
@@ -121,7 +128,7 @@
                           :ref="'client-' + client.id + '-name'"
                           class="rounded px-1 border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 dark:placeholder:text-neutral-500 outline-none w-30" />
                         <span v-show="clientEditNameId !== client.id"
-                        class="inline-block border-t-2 border-b-2 border-transparent">{{client.name}}</span>
+                          class="border-t-2 border-b-2 border-transparent">{{client.name}}</span>
 
                         <!-- Edit -->
                         <span v-show="clientEditNameId !== client.id"
@@ -135,13 +142,9 @@
                           </svg>
                         </span>
                       </div>
-
-                    <!-- Info -->
-                    <div class="text-gray-400 dark:text-neutral-400 text-xs">
-
                       <!-- Address -->
-                      <span class="group block md:inline-block pb-1 md:pb-0">
+                      <div class=" block md:inline-block pb-1 md:pb-0 text-gray-500 dark:text-neutral-400 text-xs">
-
+                        <span class="group">
                           <!-- Show -->
                           <input v-show="clientEditAddressId === client.id" v-model="clientEditAddress"
                             v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;"
@@ -149,7 +152,7 @@
                             :ref="'client-' + client.id + '-address'"
                             class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" />
                           <span v-show="clientEditAddressId !== client.id"
-                          class="inline-block border-t-2 border-b-2 border-transparent">{{client.address}}</span>
+                            class="inline-block ">{{client.address}}</span>
 
                           <!-- Edit -->
                           <span v-show="clientEditAddressId !== client.id"
@@ -163,38 +166,59 @@
                             </svg>
                           </span>
                         </span>
+                        <!-- Last seen -->
+                        <span class="text-gray-400 dark:text-neutral-500" v-if=" client.latestHandshakeAt"
+                          :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
+                          {{new Date(client.latestHandshakeAt) | timeago}}
+                        </span>
+                      </div>
+                    </div>
+
+                    <!-- Info -->
+                    <div
+                      class="flex gap-2 items-center text-gray-400 dark:text-neutral-400 text-xs mt-px -ml-4 md:ml-0">
 
                       <!-- Transfer TX -->
-                      <span v-if="client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
+                      <div class="min-w-24" v-if="client.transferTx">
-                        ·
+                        <span class="flex gap-1" :title="$t('totalDownload') + bytes(client.transferTx)">
-                        <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                          <svg class="align-middle h-3 inline mt-0.5" xmlns="http://www.w3.org/2000/svg"
-                          fill="currentColor">
+                            viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd"
                               d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
                               clip-rule="evenodd" />
                           </svg>
-                        {{client.transferTxCurrent | bytes}}/s
+                          <div>
+                            <span class="text-gray-700 dark:text-neutral-200">{{client.transferTxCurrent |
+                              bytes}}/s</span>
+                            <!-- Total TX -->
+                            <br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferTx)}}</span>
+                          </div>
                         </span>
 
+                      </div>
+
                       <!-- Transfer RX -->
-                      <span v-if="client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
+                      <div class="min-w-24" v-if="client.transferRx">
-                        ·
+                        <span class="flex gap-1" :title="$t('totalUpload') + bytes(client.transferRx)">
-                        <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+
-                          fill="currentColor">
+                          <svg class="align-middle h-3 inline mt-0.5" xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd"
                               d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                               clip-rule="evenodd" />
                           </svg>
-                        {{client.transferRxCurrent | bytes}}/s
+                          <div>
+                            <span class="text-gray-700 dark:text-neutral-200">{{client.transferRxCurrent |
+                              bytes}}/s</span>
+                            <!-- Total RX -->
+                            <br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferRx)}}</span>
+                          </div>
                         </span>
+                      </div>
 
-                      <!-- Last seen -->
-                      <span v-if="client.latestHandshakeAt"
-                        :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
-                        · {{new Date(client.latestHandshakeAt) | timeago}}
-                      </span>
                     </div>
                   </div>
+                  <!-- </div> --> <!-- <div class="flex flex-grow items-center"> -->
                 </div>
 
                 <div class="flex items-center justify-end">