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

Header mobile layout

This commit is contained in:
Sergei Birukov 2024-03-18 10:05:12 +03:00
parent 32fc78589a
commit 81ccf8762d
1 changed files with 44 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/www/index.html
View File

@ -18,12 +18,13 @@
<body class="bg-gray-50 dark:bg-neutral-800">
<div id="app">
<div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0 mt-6">
<div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0 mt-4 xs:mt-6">
<div v-if="authenticated === true">
<div class="flex flex-row flex-auto items-center items-end gap-3">
<h1 class="text-4xl dark:text-neutral-200 font-medium flex-grow mb-4">
<div class="flex flex-col-reverse xxs:flex-row flex-auto items-center items-end gap-3">
<h1 class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4">
<img src="./img/logo.png" width="32" class="inline align-middle dark:bg mr-2" /><span class="align-middle">WireGuard</span>
</h1>
<div class="flex items-center grow-0 gap-3 items-end self-end xxs:self-center">
<!-- Dark / light theme -->
<button @click="toggleTheme"
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition" :title="$t(`theme.${uiTheme}`)">
@ -47,7 +48,7 @@
</svg>
</button>
<!-- Show / hide charts -->
<label v-if="uiChartType > 0" class="inline-flex items-center justify-center cursor-pointer w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition group" :title="$t('toggleCharts')">
<label v-if="uiChartType > 0" class="inline-flex items-center justify-center cursor-pointer w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 whitespace-nowrap transition group" :title="$t('toggleCharts')">
<input type="checkbox" value="" class="sr-only peer" v-model="uiShowCharts" @change="toggleCharts">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" fill="currentColor"
class="w-5 h-5 peer fill-gray-400 peer-checked:fill-gray-600 dark:fill-neutral-600 peer-checked:dark:fill-neutral-400 group-hover:dark:fill-neutral-500 transition">
@ -65,6 +66,7 @@
</svg>
</span>
</div>
</div>
<div class="text-sm text-gray-400 dark:text-neutral-400 mb-5"></div>
<div v-if="latestRelease"
class="bg-red-800 dark:bg-red-100 p-4 text-white dark:text-red-600 text-sm font-small mb-10 rounded-md shadow-lg"