Fix detailed stats #843 from suxscribe/feat-update-client-layout

src/tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
   content: ['./www/**/*.{html,js}'],
   theme: {
     screens: {
+      xxs: '450px',
       xs: '576px',
       sm: '640px',
       md: '768px',

src/www/css/app.css

@@ -548,6 +548,12 @@ video {
   width: 100%;
 }
 
+@media (min-width: 450px) {
+  .container {
+    max-width: 450px;
+  }
+}
+
 @media (min-width: 576px) {
   .container {
     max-width: 576px;
@@ -710,10 +716,6 @@ video {
   margin-right: 0.5rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -862,8 +864,8 @@ video {
   width: 100%;
 }
 
-.min-w-24 {
+.min-w-20 {
-  min-width: 6rem;
+  min-width: 5rem;
 }
 
 .max-w-3xl {
@@ -878,6 +880,10 @@ video {
   flex-shrink: 0;
 }
 
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -1151,10 +1157,6 @@ video {
   padding-bottom: 3rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pb-20 {
   padding-bottom: 5rem;
 }
@@ -1459,8 +1461,12 @@ video {
   opacity: 1;
 }
 
-@media (min-width: 576px) {
+@media (min-width: 450px) {
-  .xs\:flex-row {
+  .xxs\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .xxs\:flex-row {
     flex-direction: row;
   }
 }
@@ -1532,18 +1538,10 @@ 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;
   }
@@ -1580,18 +1578,22 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:ml-0 {
-    margin-left: 0px;
-  }
-
   .md\:inline-block {
     display: inline-block;
   }
 
+  .md\:min-w-24 {
+    min-width: 6rem;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
 
+  .md\:gap-4 {
+    gap: 1rem;
+  }
+
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -1600,6 +1602,11 @@ video {
   .md\:pb-0 {
     padding-bottom: 0px;
   }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

src/www/index.html

@@ -87,11 +87,11 @@
                 </apexchart>
               </div>
 
-              <div class="relative p-5 z-10 flex flex-col xs:flex-row justify-between gap-3">
+              <div class="relative p-5 z-10 flex flex-col sm:flex-row justify-between gap-3">
-                <div class="flex gap-2 w-full items-center ">
+                <div class="flex gap-3 md:gap-4 w-full items-center ">
 
                   <!-- Avatar -->
-                  <div class="h-10 w-10 mr-4 mt-2 self-start rounded-full bg-gray-50 relative">
+                  <div class="h-10 w-10 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"
@@ -109,11 +109,11 @@
                   </div>
 
                   <!-- Name & Info -->
-                  <div class="flex flex-col md:flex-row w-full gap-2">
+                  <div class="flex flex-col xxs: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"
+                      <div class="text-gray-700 dark:text-neutral-200 group text-sm md:text-base"
                         :title="$t('createdOn') + dateTime(new Date(client.createdAt))">
 
                         <!-- Show -->
@@ -183,7 +183,7 @@
                           {{client.transferRxCurrent | bytes}}/s
                         </span>
                         <!-- Last seen -->
-                        <span class="text-gray-400 dark:text-neutral-500" v-if="true"
+                        <span class="text-gray-400 dark:text-neutral-500" v-if="client.latestHandshakeAt"
                           :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
                           {{!uiDetailedStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
                         </span>
@@ -192,10 +192,10 @@
 
                     <!-- Info -->
                     <div v-if="uiDetailedStats"
-                      class="flex gap-2 items-center text-gray-400 dark:text-neutral-400 text-xs mt-px -ml-4 md:ml-0">
+                      class="flex gap-2 items-center shrink-0 text-gray-400 dark:text-neutral-400 text-xs mt-px -ml-4 xxs:ml-0">
 
                       <!-- Transfer TX -->
-                      <div class="min-w-24" v-if="client.transferTx">
+                      <div class="min-w-20 md: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 mt-0.5" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 20 20" fill="currentColor">
@@ -214,7 +214,7 @@
                       </div>
 
                       <!-- Transfer RX -->
-                      <div class="min-w-24" v-if="client.transferRx">
+                      <div class="min-w-20 md: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 mt-0.5" xmlns="http://www.w3.org/2000/svg"