chore: some improvements in 'overview page'

- reduced font size
- added caption to buttons
- fixed display of xray state
- xray version display returned

web/html/xui/index.html

@@ -25,13 +25,16 @@
     cursor: pointer;
   }
   .dark .ant-backup-list-item svg,
-  .dark .ant-card-actions>li>span>.anticon, .ant-card-actions>li>span a:not(.ant-btn),
+  .dark .ant-card-actions>li>*,
   .dark .ant-badge-status-text,
   .dark .ant-statistic-title,
   .dark .ant-statistic-content,
   .dark .ant-card-extra {
     color: var(--dark-color-text-primary) !important;
   }
+  .dark .ant-card-actions>li>*:hover {
+    color: var(--color-primary-100) !important;
+  }
   .dark .ant-backup-list, 
   .dark .ant-xray-version-list,
   .dark .ant-card-actions,
@@ -41,6 +44,12 @@
   .ant-card-actions {
     background: transparent !important;
   }
+  .ant-statistic-content-prefix {
+    font-size: 20px;
+  }
+  .ant-statistic-content-value {
+    font-size: 18px;
+  }
   .ip-hidden {
     filter: blur(10px);
   }
@@ -120,6 +129,58 @@
             </template>
             <template v-else>
               <a-row>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable>
+                    <template #extra>
+                      <template v-if="status.xray.state != State.Error">
+                        <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
+                      </template>
+                      <template v-else>
+                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                          <span slot="title" style="font-size: 12pt">An error occurred while running Xray
+                            <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+                          </span>
+                          <template slot="content">
+                            <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
+                          </template>
+                          <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
+                        </a-popover>
+                      </template>
+                    </template>
+                    <template #actions>
+                      <a-space direction="horizontal" @click="stopXrayService" style="justify-content: center;">
+                        <a-icon type="poweroff"></a-icon>
+                        <span>{{ i18n "pages.index.stopXray" }}</span>
+                      </a-space>
+                      <a-space direction="horizontal" @click="restartXrayService" style="justify-content: center;">
+                        <a-icon type="reload"></a-icon>
+                        <span>{{ i18n "pages.index.restartXray" }}</span>
+                      </a-space>
+                      <a-space direction="horizontal" @click="openSelectV2rayVersion" style="justify-content: center;">
+                        <a-icon type="tool"></a-icon>
+                        <span>v[[ status.xray.version ]]</span>
+                      </a-space>
+                    </template>
+                  </a-card>
+                </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "menu.link" }}' hoverable>
+                    <template #actions>
+                      <a-space direction="horizontal" @click="openLogs()" style="justify-content: center;">
+                        <a-icon type="bars"></a-icon>
+                        <span>{{ i18n "pages.index.logs" }}</span>
+                      </a-space>
+                      <a-space direction="horizontal" @click="openConfig" style="justify-content: center;">
+                        <a-icon type="control"></a-icon>
+                        <span>{{ i18n "pages.index.config" }}</span>
+                      </a-space>
+                      <a-space direction="horizontal" @click="openBackup" style="justify-content: center;">
+                        <a-icon type="cloud-server"></a-icon>
+                        <span>{{ i18n "pages.index.backup" }}</span>
+                      </a-space>
+                    </template>
+                  </a-card>
+                </a-col>
                 <a-col :sm="24" :lg="12">
                   <a-card title='3X-UI' hoverable>
                     <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
@@ -132,54 +193,6 @@
                     <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
                   </a-card>
                 </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable>
-                    <template #extra>
-                      <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
-                      <a-popover v-if="status.xray.state === State.Error" :overlay-class-name="themeSwitcher.currentTheme">
-                        <span slot="title" style="font-size: 12pt">An error occurred while running Xray
-                          <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
-                        </span>
-                        <template slot="content">
-                          <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
-                        </template>
-                        <a-icon type="question-circle"></a-icon>
-                      </a-popover>
-                    </template>
-                    <template #actions class="ant-card-actions">
-                      <a-tooltip>
-                        <template #title>{{ i18n "pages.index.stopXray" }}</template>
-                        <a-icon type="poweroff" @click="stopXrayService"/>
-                      </a-tooltip>
-                      <a-tooltip>
-                        <template #title>{{ i18n "pages.index.restartXray" }}</template>
-                        <a-icon type="reload" @click="restartXrayService"/>
-                      </a-tooltip>
-                      <a-tooltip>
-                        <template #title>v[[ status.xray.version ]]</template>
-                        <a-icon type="tool" @click="openSelectV2rayVersion"/>
-                      </a-tooltip>
-                    </template>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "menu.link" }}' hoverable>
-                    <template #actions class="ant-card-actions">
-                      <a-tooltip>
-                        <template #title>{{ i18n "pages.index.logs" }}</template>
-                        <a-icon type="bars" @click="openLogs()"/>
-                      </a-tooltip>
-                      <a-tooltip>
-                        <template #title>{{ i18n "pages.index.config" }}</template>
-                        <a-icon type="control" @click="openConfig"/>
-                      </a-tooltip>
-                      <a-tooltip>
-                        <template #title>{{ i18n "pages.index.backup" }}</template>
-                        <a-icon type="cloud-server" @click="openBackup"/>
-                      </a-tooltip>
-                    </template>
-                  </a-card>
-                </a-col>
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.systemLoad" }}' hoverable>
                     <a-tag color="green">
@@ -209,14 +222,14 @@
                       </a-tooltip>
                     </template>
                     <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title="IPv4" :value="status.publicIP.ipv4">
                           <template #prefix>
                             <a-icon type="global" />
                           </template>
                         </a-statistic>
                       </a-col>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title="IPv6" :value="status.publicIP.ipv6">
                           <template #prefix>
                             <a-icon type="global" />
@@ -229,14 +242,14 @@
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
                     <a-row>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title="TCP" :value="status.tcpCount">
                           <template #prefix>
                             <a-icon type="swap" />
                           </template>
                         </a-statistic>
                       </a-col>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title="UDP" :value="status.udpCount">
                           <template #prefix>
                             <a-icon type="swap" />
@@ -249,7 +262,7 @@
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
                     <a-row>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
                           <template #prefix>
                             <a-icon type="arrow-up" />
@@ -259,7 +272,7 @@
                           </template>
                         </a-statistic>
                       </a-col>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
                           <template #prefix>
                             <a-icon type="arrow-down" />
@@ -275,14 +288,14 @@
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
                     <a-row>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
                           <template #prefix>
                             <a-icon type="cloud-upload" />
                           </template>
                         </a-statistic>
                       </a-col>
-                      <a-col :span="12">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
                         <a-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
                           <template #prefix>
                             <a-icon type="cloud-download" />
@@ -388,9 +401,9 @@
 {{template "textModal"}}
 <script>
     const State = {
-        Running: "running",
+      Running: "running",
-        Stop: "stop",
+      Stop: "stop",
-        Error: "error",
+      Error: "error",
     }
     Object.freeze(State);
 
@@ -567,6 +580,7 @@
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
             showIp: false,
+            isMobile: window.innerWidth <= 768
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {

web/translation/translate.en_US.toml

@@ -113,7 +113,7 @@
 "dontRefresh" = "Installation is in progress, please do not refresh this page"
 "logs" = "Logs"
 "config" = "Config"
-"backup" = "Backup & Restore"
+"backup" = "Backup"
 "backupTitle" = "Database Backup & Restore"
 "exportDatabase" = "Back Up"
 "exportDatabaseDesc" = "Click to download a .db file containing a backup of your current database to your device."

web/translation/translate.es_ES.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "La instalación está en progreso, por favor no actualices esta página."
 "logs" = "Registros"
 "config" = "Configuración"
-"backup" = "Copia de Seguridad y Restauración"
+"backup" = "Сopia de Seguridad"
 "backupTitle" = "Copia de Seguridad y Restauración de la Base de Datos"
 "exportDatabase" = "Copia de seguridad"
 "exportDatabaseDesc" = "Haz clic para descargar un archivo .db que contiene una copia de seguridad de tu base de datos actual en tu dispositivo."

web/translation/translate.id_ID.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "Instalasi sedang berlangsung, harap jangan menyegarkan halaman ini"
 "logs" = "Log"
 "config" = "Konfigurasi"
-"backup" = "Cadangan & Pulihkan"
+"backup" = "Cadangan"
 "backupTitle" = "Cadangan & Pulihkan Database"
 "exportDatabase" = "Cadangkan"
 "exportDatabaseDesc" = "Klik untuk mengunduh file .db yang berisi cadangan dari database Anda saat ini ke perangkat Anda."

web/translation/translate.ja_JP.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "インストール中、このページをリロードしないでください"
 "logs" = "ログ"
 "config" = "設定"
-"backup" = "バックアップと復元"
+"backup" = "バックアップ"
 "backupTitle" = "データベースのバックアップと復元"
 "exportDatabase" = "バックアップ"
 "exportDatabaseDesc" = "クリックして、現在のデータベースのバックアップを含む .db ファイルをデバイスにダウンロードします。"

web/translation/translate.pt_BR.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "Instalação em andamento, por favor não atualize a página"
 "logs" = "Logs"
 "config" = "Configuração"
-"backup" = "Backup e Restauração"
+"backup" = "Backup"
 "backupTitle" = "Backup e Restauração do Banco de Dados"
 "exportDatabase" = "Backup"
 "exportDatabaseDesc" = "Clique para baixar um arquivo .db contendo um backup do seu banco de dados atual para o seu dispositivo."

web/translation/translate.ru_RU.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "Установка в процессе. Не обновляйте страницу"
 "logs" = "Логи"
 "config" = "Конфигурация"
-"backup" = "Резервное копирование и восстановление"
+"backup" = "Резервная копия"
 "backupTitle" = "База данных резервных копий"
 "exportDatabase" = "Экспорт базы данных"
 "exportDatabaseDesc" = "Нажмите, чтобы скачать файл .db, содержащий резервную копию вашей текущей базы данных на ваше устройство."

web/translation/translate.tr_TR.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "Kurulum devam ediyor, lütfen bu sayfayı yenilemeyin"
 "logs" = "Günlükler"
 "config" = "Yapılandırma"
-"backup" = "Yedekle & Geri Yükle"
+"backup" = "Yedek"
 "backupTitle" = "Veritabanı Yedekleme & Geri Yükleme"
 "exportDatabase" = "Yedekle"
 "exportDatabaseDesc" = "Mevcut veritabanınızın yedeğini içeren bir .db dosyasını cihazınıza indirmek için tıklayın."

web/translation/translate.uk_UA.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "Інсталяція триває, будь ласка, не оновлюйте цю сторінку"
 "logs" = "Журнали"
 "config" = "Конфігурація"
-"backup" = "Резервне копіювання та відновлення"
+"backup" = "Резервна копія"
 "backupTitle" = "Резервне копіювання та відновлення бази даних"
 "exportDatabase" = "Резервна копія"
 "exportDatabaseDesc" = "Натисніть, щоб завантажити файл .db, що містить резервну копію вашої поточної бази даних на ваш пристрій."

web/translation/translate.vi_VN.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "Đang tiến hành cài đặt, vui lòng không làm mới trang này."
 "logs" = "Nhật ký"
 "config" = "Cấu hình"
-"backup" = "Sao lưu & Khôi phục"
+"backup" = "Sao lưu"
 "backupTitle" = "Sao lưu & Khôi phục Cơ sở dữ liệu"
 "exportDatabase" = "Sao lưu"
 "exportDatabaseDesc" = "Nhấp để tải xuống tệp .db chứa bản sao lưu cơ sở dữ liệu hiện tại của bạn vào thiết bị."

web/translation/translate.zh_CN.toml

@@ -115,7 +115,7 @@
 "dontRefresh" = "安装中，请勿刷新此页面"
 "logs" = "日志"
 "config" = "配置"
-"backup" = "备份和恢复"
+"backup" = "备份"
 "backupTitle" = "备份和恢复数据库"
 "exportDatabase" = "备份"
 "exportDatabaseDesc" = "点击下载包含当前数据库备份的 .db 文件到您的设备。"