fix: responsive buttons on mobile (#1206)

* fix: buttons on mobile * fix: lint error with workspaces * fix: redundant css
2024-07-22 13:49:46 +02:00 · 2024-07-22 13:49:46 +02:00 · caad2e4162
parent 2ef264d06f 3d376e542f
commit caad2e4162
6 changed files with 66 additions and 23 deletions
--- a/How_to_generate_an_bcrypt_hash.md
+++ b/How_to_generate_an_bcrypt_hash.md
@ -9,16 +9,14 @@

 ## Usage with Docker

-To generate a bcrypt password hash using Docker, run the following command:
+To generate a bcrypt password hash using docker, run the following command :

 ```sh
 docker run ghcr.io/wg-easy/wg-easy wgpw YOUR_PASSWORD
 PASSWORD_HASH='$2b$12$coPqCsPtcFO.Ab99xylBNOW4.Iu7OOA2/ZIboHN6/oyxca3MWo7fW' // litteraly YOUR_PASSWORD
 ```

-## Important
-
-Make sure to enclose your password in single quotes when you run a linux host.
+*Important* : make sure to enclose your password in single quotes when you run `docker run` command :

 ```bash
 $ echo $2b$12$coPqCsPtcF
@ -27,8 +25,4 @@ $ echo "$2b$12$coPqCsPtcF"
 b2
 $ echo '$2b$12$coPqCsPtcF'
 $2b$12$coPqCsPtcF
-```
-
-## LICENSE
-
-[wg-easy license](./LICENSE)
+```
--- a/package.json
+++ b/package.json
@ -1,8 +1,10 @@
 {
  "version": "1.0.1",
  "scripts": {
+    "sudobuild": "DOCKER_BUILDKIT=1 sudo docker build --tag wg-easy .",
    "build": "DOCKER_BUILDKIT=1 docker build --tag wg-easy .",
    "serve": "docker compose -f docker-compose.yml -f docker-compose.dev.yml up",
+    "sudostart": "sudo docker run --env WG_HOST=0.0.0.0 --name wg-easy --cap-add=NET_ADMIN --cap-add=SYS_MODULE --sysctl=\"net.ipv4.conf.all.src_valid_mark=1\" --mount type=bind,source=\"$(pwd)\"/config,target=/etc/wireguard -p 51820:51820/udp -p 51821:51821/tcp wg-easy",
    "start": "docker run --env WG_HOST=0.0.0.0 --name wg-easy --cap-add=NET_ADMIN --cap-add=SYS_MODULE --sysctl=\"net.ipv4.conf.all.src_valid_mark=1\" --mount type=bind,source=\"$(pwd)\"/config,target=/etc/wireguard -p 51820:51820/udp -p 51821:51821/tcp wg-easy"
  }
-}
+}
--- a/src/config.js
+++ b/src/config.js
@ -1,8 +1,8 @@
 'use strict';

-const { release } = require('./package.json');
+const { release: { version } } = require('./package.json');

-module.exports.RELEASE = release;
+module.exports.RELEASE = version;
 module.exports.PORT = process.env.PORT || '51821';
 module.exports.WEBUI_HOST = process.env.WEBUI_HOST || '0.0.0.0';
 module.exports.PASSWORD_HASH = process.env.PASSWORD_HASH;
--- a/src/package.json
+++ b/src/package.json
@ -1,5 +1,7 @@
 {
-  "release": "13",
+  "release": {
+    "version": "13"
+  },
  "name": "wg-easy",
  "version": "1.0.1",
  "description": "The easiest way to run WireGuard VPN + Web-based Admin UI.",
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@ -1034,6 +1034,16 @@ video {
  border-radius: 0.375rem;
 }

+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-r-full {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
 .border {
  border-width: 1px;
 }
@ -1522,6 +1532,25 @@ video {
  fill: #4b5563;
 }

+@media not all and (min-width: 768px) {
+  .max-md\:hidden {
+    display: none;
+  }
+
+  .max-md\:border-x-0 {
+    border-left-width: 0px;
+    border-right-width: 0px;
+  }
+
+  .max-md\:border-l-0 {
+    border-left-width: 0px;
+  }
+
+  .max-md\:border-r-0 {
+    border-right-width: 0px;
+  }
+}
+
@media (min-width: 450px) {
  .xxs\:flex-row {
    flex-direction: row;
@ -1649,6 +1678,14 @@ video {
 }

@media (min-width: 768px) {
+  .md\:mr-2 {
+    margin-right: 0.5rem;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
  .md\:inline-block {
    display: inline-block;
  }
@ -1657,10 +1694,18 @@ video {
    min-width: 6rem;
  }

+  .md\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
  .md\:gap-4 {
    gap: 1rem;
  }

+  .md\:rounded {
+    border-radius: 0.25rem;
+  }
+
  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
--- a/src/www/index.html
+++ b/src/www/index.html
@ -93,33 +93,33 @@
            <div class="flex-grow">
              <p class="text-2xl font-medium dark:text-neutral-200">{{$t("clients")}}</p>
            </div>
-            <div class="flex-shrink-0">
+            <div class="flex md:block md:flex-shrink-0">
              <!-- Restore configuration -->
              <label for="inputRC" :title="$t('titleRestoreConfig')"
-                class="hover:cursor-pointer hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition">
-                <svg inline class="w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                class="hover:cursor-pointer hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-r-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-l-full md:rounded inline-flex items-center transition">
+                <svg inline class="w-4 md:mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"></path>
                </svg>
-                <span class="text-sm">{{$t("restore")}}</span>
+                <span class="max-md:hidden text-sm">{{$t("restore")}}</span>
                <input id="inputRC" type="file" name="configurationfile" accept="text/*,.json" @change="restoreConfig" class="hidden"/>
              </label>
              <!-- Backup configuration -->
              <a href="./api/wireguard/backup" :title="$t('titleBackupConfig')"
-                class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition">
-                <svg inline class="w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-x-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 md:rounded inline-flex items-center transition">
+                <svg inline class="w-4 md:mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"></path>
                </svg>
-                <span class="text-sm">{{$t("backup")}}</span>
+                <span class="max-md:hidden text-sm">{{$t("backup")}}</span>
              </a>
              <!-- New client -->
              <button @click="clientCreate = true; clientCreateName = '';"
-                class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition">
-                <svg class="w-4 mr-2" inline xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition">
+                <svg class="w-4 md:mr-2" inline 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="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
-                <span class="text-sm">{{$t("new")}}</span>
+                <span class="max-md:hidden text-sm">{{$t("new")}}</span>
              </button>
            </div>
          </div>