forked from mirrors/amnezia-wg-easy
Change layout wrapping. Fix last seen
This commit is contained in:
Sergei Birukov
parent
081e3eef75
commit
a522a442ae
3 changed files with 41 additions and 33 deletions
|
|
@ -7,6 +7,7 @@ module.exports = {
|
|||
content: ['./www/**/*.{html,js}'],
|
||||
theme: {
|
||||
screens: {
|
||||
xxs: '450px',
|
||||
xs: '576px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
|
|
|
|||
|
|
@ -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-width: 6rem;
|
||||
.min-w-20 {
|
||||
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) {
|
||||
.xs\:flex-row {
|
||||
@media (min-width: 450px) {
|
||||
.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) {
|
||||
|
|
|
|||
|
|
@ -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="flex gap-2 w-full items-center ">
|
||||
<div class="relative p-5 z-10 flex flex-col md:flex-row justify-between gap-3">
|
||||
<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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue