forks
/
amnezia-wg-easy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix simple stats wrapping on mobile (#876)

This commit is contained in:
Philip H 2024-02-27 20:55:42 +01:00 committed by GitHub
parent ebc5173bd0 7d19b74845
commit a8be9f3994
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
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
*/ */
/* /*
@ -688,10 +688,6 @@ video {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.-ml-4 {
margin-left: -1rem;
}
.mb-10 { .mb-10 {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
@ -975,6 +971,10 @@ video {
white-space: nowrap; white-space: nowrap;
} }
.whitespace-nowrap {
white-space: nowrap;
}
.rounded { .rounded {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
@ -1141,6 +1141,11 @@ video {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
} }
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.pb-1 { .pb-1 {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }
@ -1454,10 +1459,6 @@ video {
} }
@media (min-width: 450px) { @media (min-width: 450px) {
.xxs\:ml-0 {
margin-left: 0px;
}
.xxs\:flex-row { .xxs\:flex-row {
flex-direction: row; flex-direction: row;
} }

10
src/www/index.html
View File

@ -18,7 +18,7 @@
<body class="bg-gray-50 dark:bg-neutral-800"> <body class="bg-gray-50 dark:bg-neutral-800">
<div id="app"> <div id="app">
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0"> <div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<span v-if="requiresPassword" <span v-if="requiresPassword"
class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right" class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
@ -87,7 +87,7 @@
</apexchart> </apexchart>
</div> </div>
<div class="relative p-5 z-10 flex flex-col sm:flex-row justify-between gap-3"> <div class="relative py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3">
<div class="flex gap-3 md:gap-4 w-full items-center "> <div class="flex gap-3 md:gap-4 w-full items-center ">
<!-- Avatar --> <!-- Avatar -->
@ -162,7 +162,7 @@
</span> </span>
</span> </span>
<!-- Inline Transfer TX --> <!-- Inline Transfer TX -->
<span v-if="!uiTrafficStats && client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)"> <span v-if="!uiTrafficStats && client.transferTx" class="whitespace-nowrap" :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" fill="currentColor"> <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
@ -173,7 +173,7 @@
</span> </span>
<!-- Inline Transfer RX --> <!-- Inline Transfer RX -->
<span v-if="!uiTrafficStats && client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)"> <span v-if="!uiTrafficStats && client.transferRx" class="whitespace-nowrap" :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" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
@ -183,7 +183,7 @@
{{client.transferRxCurrent | bytes}}/s {{client.transferRxCurrent | bytes}}/s
</span> </span>
<!-- Last seen --> <!-- Last seen -->
<span class="text-gray-400 dark:text-neutral-500" v-if="client.latestHandshakeAt" <span class="text-gray-400 dark:text-neutral-500 whitespace-nowrap" v-if="client.latestHandshakeAt"
:title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))"> :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
{{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}} {{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
</span> </span>