mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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
pull/834/head
Sergei Birukov 1 year ago
parent
d7b5f4d100
commit
5b2a9308f5
3 changed files with 166 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/tailwind.config.js
  2. 62
      src/www/css/app.css
  3. 170
      src/www/index.html

10
src/tailwind.config.js
View File

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

62
src/www/css/app.css
View File

@ -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%; width: 100%;
} }
@media (min-width: 576px) {
.container {
max-width: 576px;
}
}
@media (min-width: 640px) { @media (min-width: 640px) {
.container { .container {
max-width: 640px; max-width: 640px;
@ -676,6 +682,10 @@ video {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.-ml-4 {
margin-left: -1rem;
}
.mb-10 { .mb-10 {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
@ -700,8 +710,16 @@ video {
margin-right: 0.5rem; 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 { .mt-10 {
@ -720,6 +738,10 @@ video {
margin-top: 1.25rem; margin-top: 1.25rem;
} }
.mt-px {
margin-top: 1px;
}
.block { .block {
display: block; display: block;
} }
@ -840,6 +862,10 @@ video {
width: 100%; width: 100%;
} }
.min-w-24 {
min-width: 6rem;
}
.max-w-3xl { .max-w-3xl {
max-width: 48rem; max-width: 48rem;
} }
@ -925,6 +951,18 @@ video {
gap: 0.25rem; gap: 0.25rem;
} }
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.self-start {
align-self: flex-start;
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@ -1421,6 +1459,12 @@ video {
opacity: 1; opacity: 1;
} }
@media (min-width: 576px) {
.xs\:flex-row {
flex-direction: row;
}
}
@media (min-width: 640px) { @media (min-width: 640px) {
.sm\:mx-0 { .sm\:mx-0 {
margin-left: 0px; 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)); 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 { .sm\:flex-row-reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.sm\:flex-nowrap {
flex-wrap: nowrap;
}
.sm\:items-start { .sm\:items-start {
align-items: flex-start; align-items: flex-start;
} }
@ -1528,6 +1580,10 @@ video {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:ml-0 {
margin-left: 0px;
}
.md\:inline-block { .md\:inline-block {
display: inline-block; display: inline-block;
} }

170
src/www/index.html
View File

@ -89,11 +89,16 @@
style="transform: scaleY(-1);"> style="transform: scaleY(-1);">
</apexchart> </apexchart>
</div> </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" <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" /> clip-rule="evenodd" />
</svg> </svg>
@ -108,52 +113,26 @@
</div> </div>
</div> </div>
<div class="flex-grow"> <!-- Name & Info -->
<div class="flex flex-col md:flex-row w-full gap-2">
<!-- Name --> <!-- Name -->
<div class="text-gray-700 dark:text-neutral-200 group" <div class="flex flex-col flex-grow gap-1">
:title="$t('createdOn') + dateTime(new Date(client.createdAt))"> <div class="text-gray-700 dark:text-neutral-200 group"
:title="$t('createdOn') + dateTime(new Date(client.createdAt))">
<!-- Show -->
<input v-show="clientEditNameId === client.id" v-model="clientEditName"
v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
: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>
<!-- Edit -->
<span v-show="clientEditNameId !== client.id"
@click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</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">
<!-- Show --> <!-- Show -->
<input v-show="clientEditAddressId === client.id" v-model="clientEditAddress" <input v-show="clientEditNameId === client.id" v-model="clientEditName"
v-on:keyup.enter="updateClientAddress(client, clientEditAddress); clientEditAddress = null; clientEditAddressId = null;" v-on:keyup.enter="updateClientName(client, clientEditName); clientEditName = null; clientEditNameId = null;"
v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;" v-on:keyup.escape="clientEditName = null; clientEditNameId = null;"
:ref="'client-' + client.id + '-address'" :ref="'client-' + client.id + '-name'"
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" /> 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="clientEditAddressId !== client.id" <span v-show="clientEditNameId !== client.id"
class="inline-block border-t-2 border-b-2 border-transparent">{{client.address}}</span> class="border-t-2 border-b-2 border-transparent">{{client.name}}</span>
<!-- Edit --> <!-- Edit -->
<span v-show="clientEditAddressId !== client.id" <span v-show="clientEditNameId !== client.id"
@click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);" @click="clientEditName = client.name; clientEditNameId = client.id; setTimeout(() => $refs['client-' + client.id + '-name'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"> class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none" class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
@ -162,39 +141,84 @@
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg> </svg>
</span> </span>
</span> </div>
<!-- Address -->
<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;"
v-on:keyup.escape="clientEditAddress = null; clientEditAddressId = null;"
: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 ">{{client.address}}</span>
<!-- Edit -->
<span v-show="clientEditAddressId !== client.id"
@click="clientEditAddress = client.address; clientEditAddressId = client.id; setTimeout(() => $refs['client-' + client.id + '-address'][0].select(), 1);"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 inline align-middle opacity-25 hover:opacity-100" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</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 --> <!-- 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" <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" 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" /> clip-rule="evenodd" />
</svg> </svg>
{{client.transferTxCurrent | bytes}}/s <div>
</span> <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 --> <!-- 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"
<path fill-rule="evenodd" viewBox="0 0 20 20" fill="currentColor">
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" <path fill-rule="evenodd"
clip-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"
</svg> clip-rule="evenodd" />
{{client.transferRxCurrent | bytes}}/s </svg>
</span> <div>
<span class="text-gray-700 dark:text-neutral-200">{{client.transferRxCurrent |
<!-- Last seen --> bytes}}/s</span>
<span v-if="client.latestHandshakeAt" <!-- Total RX -->
:title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))"> <br><span class="font-regular" style="font-size:0.85em">{{bytes(client.transferRx)}}</span>
· {{new Date(client.latestHandshakeAt) | timeago}} </div>
</span> </span>
</div>
</div> </div>
</div> </div>
<!-- </div> --> <!-- <div class="flex flex-grow items-center"> -->
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
@ -509,4 +533,4 @@
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save