feat: fix pad and mobile views (#1202)

* fix figure width

* fix: pad resolution menu

* feat: drawer style mobile menu

* fix: menu button i18n

web/src/App.js

@@ -16,8 +16,8 @@ import React, {Component} from "react";
 import "./App.less";
 import {Helmet} from "react-helmet";
 import * as Setting from "./Setting";
-import {DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
+import {BarsOutlined, DownOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons";
-import {Avatar, BackTop, Button, Card, Dropdown, Layout, Menu, Result} from "antd";
+import {Avatar, BackTop, Button, Card, Drawer, Dropdown, Layout, Menu, Result} from "antd";
 import {Link, Redirect, Route, Switch, withRouter} from "react-router-dom";
 import OrganizationListPage from "./OrganizationListPage";
 import OrganizationEditPage from "./OrganizationEditPage";
@@ -85,6 +85,7 @@ class App extends Component {
       selectedMenuKey: 0,
       account: undefined,
       uri: null,
+      menuVisible: false,
     };
 
     Setting.initServerUrl();
@@ -595,6 +596,18 @@ class App extends Component {
     );
   }
 
+  onClose = () => {
+    this.setState({
+      menuVisible: false,
+    });
+  };
+
+  showMenu = () => {
+    this.setState({
+      menuVisible: true,
+    });
+  };
+
   renderContent() {
     if (!Setting.isMobile()) {
       return (
@@ -613,7 +626,7 @@ class App extends Component {
                   // theme="dark"
                   mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
                   selectedKeys={[`${this.state.selectedMenuKey}`]}
-                  style={{lineHeight: "64px", width: "78%", position: "absolute", left: "145px"}}
+                  style={{lineHeight: "64px", position: "absolute", left: "145px", right: "200px"}}
                 >
                   {
                     this.renderMenu()
@@ -646,22 +659,28 @@ class App extends Component {
                 </Link>
               )
             }
+            <Drawer title={i18next.t("general:Close")} placement="left" visible={this.state.menuVisible} onClose={this.onClose}>
               <Menu
                 // theme="dark"
-              mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
+                mode={(Setting.isMobile()) ? "inline" : "horizontal"}
                 selectedKeys={[`${this.state.selectedMenuKey}`]}
                 style={{lineHeight: "64px"}}
+                onClick={this.onClose}
               >
                 {
                   this.renderMenu()
                 }
+              </Menu>
+            </Drawer>
+            <Button icon={<BarsOutlined />} onClick={this.showMenu} type="text">
+              {i18next.t("general:Menu")}
+            </Button>
             <div style = {{float: "right"}}>
               {
                 this.renderAccount()
               }
               <SelectLanguageBox />
             </div>
-            </Menu>
           </Header>
           {
             this.renderRouter()

web/src/basic/SingleCard.js

@@ -44,10 +44,11 @@ class SingleCard extends React.Component {
 
     return (
       <Card.Grid style={gridStyle} onClick={() => Setting.goToLinkSoft(this, silentSigninLink)}>
-        <img src={logo} alt="logo" height={60} style={{marginBottom: "20px"}} />
+        <img src={logo} alt="logo" width={"100%"} style={{marginBottom: "20px"}} />
         <Meta
           title={title}
           description={desc}
+          style={{justifyContent: "center"}}
         />
       </Card.Grid>
     );
@@ -61,7 +62,7 @@ class SingleCard extends React.Component {
         <Card
           hoverable
           cover={
-            <img alt="logo" src={logo} style={{width: "100%", height: "210px", objectFit: "scale-down"}} />
+            <img alt="logo" src={logo} style={{width: "100%", objectFit: "scale-down"}} />
           }
           onClick={() => Setting.goToLinkSoft(this, silentSigninLink)}
           style={isSingle ? {width: "320px"} : {width: "100%"}}

web/src/locales/de/data.json

@@ -133,6 +133,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "Client-IP",
+    "Close": "Close",
     "Created time": "Erstellte Zeit",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Master-Passwort",
     "Master password - Tooltip": "Masterpasswort - Tooltip",
+    "Menu": "Menu",
     "Method": "Methode",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

web/src/locales/en/data.json

@@ -133,6 +133,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "Client IP",
+    "Close": "Close",
     "Created time": "Created time",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "Logo - Tooltip",
     "Master password": "Master password",
     "Master password - Tooltip": "Master password - Tooltip",
+    "Menu": "Menu",
     "Method": "Method",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

web/src/locales/fr/data.json

@@ -133,6 +133,7 @@
     "Certs": "Certes",
     "Click to Upload": "Click to Upload",
     "Client IP": "IP du client",
+    "Close": "Close",
     "Created time": "Date de création",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Mot de passe maître",
     "Master password - Tooltip": "Mot de passe maître - Infobulle",
+    "Menu": "Menu",
     "Method": "Méthode",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

web/src/locales/ja/data.json

@@ -133,6 +133,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "クライアント IP",
+    "Close": "Close",
     "Created time": "作成日時",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "マスターパスワード",
     "Master password - Tooltip": "マスターパスワード - ツールチップ",
+    "Menu": "Menu",
     "Method": "方法",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

web/src/locales/ko/data.json

@@ -133,6 +133,7 @@
     "Certs": "Certs",
     "Click to Upload": "Click to Upload",
     "Client IP": "Client IP",
+    "Close": "Close",
     "Created time": "Created time",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Master password",
     "Master password - Tooltip": "Master password - Tooltip",
+    "Menu": "Menu",
     "Method": "Method",
     "Model": "Model",
     "Model - Tooltip": "Model - Tooltip",

web/src/locales/ru/data.json

@@ -133,6 +133,7 @@
     "Certs": "Сертификаты",
     "Click to Upload": "Нажмите здесь, чтобы загрузить",
     "Client IP": "IP клиента",
+    "Close": "Close",
     "Created time": "Время создания",
     "Default application": "Default application",
     "Default application - Tooltip": "Default application - Tooltip",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "App's image tag",
     "Master password": "Мастер-пароль",
     "Master password - Tooltip": "Мастер-пароль - Tooltip",
+    "Menu": "Menu",
     "Method": "Метод",
     "Model": "Модель",
     "Model - Tooltip": "Модель - Подсказка",

web/src/locales/zh/data.json

@@ -133,6 +133,7 @@
     "Certs": "证书",
     "Click to Upload": "点击上传",
     "Client IP": "客户端IP",
+    "Close": "关闭",
     "Created time": "创建时间",
     "Default application": "默认应用",
     "Default application - Tooltip": "默认应用",
@@ -165,6 +166,7 @@
     "Logo - Tooltip": "应用程序向外展示的图标",
     "Master password": "万能密码",
     "Master password - Tooltip": "可用来登录该组织下的所有用户，方便管理员以该用户身份登录，以解决技术问题",
+    "Menu": "目录",
     "Method": "方法",
     "Model": "模型",
     "Model - Tooltip": "Casbin模型",