UI Improvements (#2228)

* UI Improvements

Better Table
Update QR Code Modal
Better Info Modal
Compression HTML files
Better Dropdown Menu
Better Calendar
and more ..
Remove files
Minor Fixes

1 files changed, 45 insertions, 41 deletions

diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index bc8f4608..df659489 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -1,61 +1,65 @@
 {{define "menuItems"}}
 <a-menu-item key="{{ .base_path }}panel/">
-    <a-icon type="dashboard"></a-icon>
-    <span><b>{{ i18n "menu.dashboard"}}</b></span>
+  <a-icon type="dashboard"></a-icon>
+  <span>
+    <b>{{ i18n "menu.dashboard"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/inbounds">
-    <a-icon type="user"></a-icon>
-    <span><b>{{ i18n "menu.inbounds"}}</b></span>
+  <a-icon type="user"></a-icon>
+  <span>
+    <b>{{ i18n "menu.inbounds"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/settings">
-    <a-icon type="setting"></a-icon>
-    <span><b>{{ i18n "menu.settings"}}</b></span>
+  <a-icon type="setting"></a-icon>
+  <span>
+    <b>{{ i18n "menu.settings"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/xray">
-    <a-icon type="tool"></a-icon>
-    <span><b>{{ i18n "menu.xray"}}</b></span>
+  <a-icon type="tool"></a-icon>
+  <span>
+    <b>{{ i18n "menu.xray"}}</b>
+  </span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}logout">
-    <a-icon type="logout"></a-icon>
-    <span><b>{{ i18n "menu.logout"}}</b></span>
+  <a-icon type="logout"></a-icon>
+  <span>
+    <b>{{ i18n "menu.logout"}}</b>
+  </span>
 </a-menu-item>
 {{end}}
 
 
 {{define "commonSider"}}
-<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <theme-switch></theme-switch>
-    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
-            @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
-        {{template "menuItems" .}}
-    </a-menu>
+<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md">
+  <theme-switch></theme-switch>
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
+    {{template "menuItems" .}}
+  </a-menu>
 </a-layout-sider>
-<a-drawer id="sider-drawer" placement="left" :closable="false"
-          @close="siderDrawer.close()"
-          :visible="siderDrawer.visible"
-          :wrap-class-name="themeSwitcher.currentTheme"
-          :wrap-style="{ padding: 0 }">
-    <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
-        <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
-    </div>
-    <theme-switch></theme-switch>
-    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
-        @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
-        {{template "menuItems" .}}
-    </a-menu>
+<a-drawer id="sider-drawer" placement="left" :closable="false" @close="siderDrawer.close()" :visible="siderDrawer.visible" :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }">
+  <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
+    <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
+  </div>
+  <theme-switch></theme-switch>
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']" @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
+    {{template "menuItems" .}}
+  </a-menu>
 </a-drawer>
 <script>
-    const siderDrawer = {
-        visible: false,
-        show() {
-            this.visible = true;
-        },
-        close() {
-            this.visible = false;
-        },
-        change() {
-            this.visible = !this.visible;
-        },
-    };
+  const siderDrawer = {
+    visible: false,
+    show() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    change() {
+      this.visible = !this.visible;
+    },
+  };
 </script>
 {{end}}