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

improved styling

pull/160/head
ApexioDaCoder 3 years ago
parent
1b036c3b4c
commit
039ee208ff
4 changed files with 275 additions and 190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 1
      src/www/css/vendor/tailwind.min.css
  3. 116
      src/www/index.html
  4. 8
      src/www/js/app.js

2
package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.0",
"version": "1.0.1",
"scripts": {
"build": "docker build --tag wg-easy .",
"serve": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",

1
src/www/css/vendor/tailwind.min.css
View File

File diff suppressed because one or more lines are too long

116
src/www/index.html
View File

@ -3,19 +3,98 @@
<head>
<title>WireGuard</title>
<link href="/css/vendor/tailwind.min.css" rel="stylesheet">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="img/favicon.png">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.popper {
width: auto;
background-color: #fafafa;
color: #212121;
text-align: center;
padding: 2px;
display: inline-block;
border-radius: 3px;
position: absolute;
font-size: 14px;
font-weight: 400;
border: 1px #ebebeb solid;
z-index: 200000;
-moz-box-shadow: #3a3a3a 0 0 6px 0;
-webkit-box-shadow: #3a3a3a 0 0 6px 0;
box-shadow: #3a3a3a 0 0 6px 0
}
.popper .popper__arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px
}
.popper[x-placement^=top] {
margin-bottom: 5px
}
.popper[x-placement^=top] .popper__arrow {
border-width: 5px 5px 0 5px;
border-color: #fafafa transparent transparent transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0
}
.popper[x-placement^=bottom] {
margin-top: 5px
}
.popper[x-placement^=bottom] .popper__arrow {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fafafa transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0
}
.popper[x-placement^=right] {
margin-left: 5px
}
.popper[x-placement^=right] .popper__arrow {
border-width: 5px 5px 5px 0;
border-color: transparent #fafafa transparent transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0
}
.popper[x-placement^=left] {
margin-right: 5px
}
.popper[x-placement^=left] .popper__arrow {
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #fafafa;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0
}
</style>
</head>
<body class="bg-gray-50">
<div id="app">
<div class="container mx-auto max-w-3xl">
<div class="container mx-auto max-w-sm md:max-w-2xl lg:max-w-3xl">
<div v-if="authenticated === true">
<span v-if="requiresPassword"
@ -189,13 +268,12 @@
<div class="text-gray-400">
<!-- Enable/Disable -->
<div @click="disableClient(client)" v-if="client.enabled === true" title="Disable Client"
class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-red-800 cursor-pointer hover:bg-red-700 transition-all">
<div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
</div>
<div @click="enableClient(client)" v-if="client.enabled === false" title="Enable Client"
class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 cursor-pointer hover:bg-gray-300 transition-all">
<div class="rounded-full w-4 h-4 m-1 bg-white"></div>
<div class="relative inline-block align-middle group m-1 ml-5" title="Disable Client">
<input type="checkbox"
class="z-20 cursor-pointer absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md"
:checked="client.enabled === true" @input="switchClientStatus(client)" />
<span
class="z-10 after:z-10 w-10 h-6 flex items-center flex-shrink-0 p-1 bg-gray-200 rounded-full duration-200 ease-in-out peer-checked:bg-red-800 group-hover:bg-gray-300 after:w-4 after:h-4 after:bg-white after:rounded-full after:duration-200 peer-checked:after:translate-x-4"></span>
</div>
<!-- Show QR-->
@ -232,8 +310,6 @@
</div>
</div>
</div>
<div v-if="clients && clients.length === 0">
<p class="text-center m-10 text-gray-400 text-sm">There are no clients yet.<br /><br />
<button @click="clientCreate = true; clientCreateName = '';"
@ -260,10 +336,12 @@
</div>
<!-- QR Code-->
<div v-if="qrcode">
<div class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">
<div class="bg-white rounded-md shadow-lg relative p-8">
<button @click="qrcode = null" class="absolute right-4 top-4 text-gray-600 hover:text-gray-800">
<div v-if="qrcode" class="">
<div
class="bg-black bg-opacity-50 fixed top-0 right-0 left-0 bottom-0 flex items-center justify-center z-20">
<div class="max-w-sm md:max-w-2xl lg:max-w-3xl bg-white rounded-md shadow-lg relative p-8">
<button @click="qrcode = null"
class="absolute right-3 top-3 transition hover:bg-red-800 hover:text-white text-gray-700 p-1 rounded inline-flex items-center transitio">
<svg class="w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@ -276,7 +354,7 @@
<!-- Create Dialog -->
<div v-if="clientCreate" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
@ -349,7 +427,7 @@
<!-- Delete Dialog -->
<div v-if="clientDelete" class="fixed z-10 inset-0 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
@ -384,8 +462,8 @@
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>

8
src/www/js/app.js
View File

@ -92,6 +92,14 @@ new Vue({
},
},
methods: {
switchClientStatus(client) {
if (client.enabled === true) {
this.disableClient(client)
}
else {
this.enableClient(client);
}
},
dateTime: value => {
return new Intl.DateTimeFormat(undefined, {
year: 'numeric',

Write Preview
Loading…
Cancel
Save