feat: refactor layout and fix footer CSS (#1370)

web/src/App.js

@@ -76,7 +76,7 @@ import AdapterListPage from "./AdapterListPage";
 import AdapterEditPage from "./AdapterEditPage";
 import {withTranslation} from "react-i18next";
 
-const {Header, Footer} = Layout;
+const {Header, Footer, Content} = Layout;
 
 class App extends Component {
   constructor(props) {
@@ -537,9 +537,8 @@ class App extends Component {
   renderContent() {
     if (!Setting.isMobile()) {
       return (
-        <div style={{display: "flex", flex: "auto", width: "100%", flexDirection: "column"}}>
-          <Layout style={{display: "flex", alignItems: "stretch"}}>
-            <Header style={{padding: "0", marginBottom: "3px"}}>
+        <Layout id="parent-area">
+          <Header style={{marginBottom: "3px", paddingInline: 0}}>
             {
               Setting.isMobile() ? null : (
                 <Link to={"/"}>
@@ -562,19 +561,21 @@ class App extends Component {
               {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
             </div>
           </Header>
-            <Layout style={{backgroundColor: "#f5f5f5", alignItems: "stretch"}}>
+          <Content style={{backgroundColor: "#f5f5f5", alignItems: "stretch", display: "flex", flexDirection: "column"}}>
             <Card className="content-warp-card">
               {
                 this.renderRouter()
               }
             </Card>
+          </Content>
+          {
+            this.renderFooter()
+          }
         </Layout>
-          </Layout>
-        </div>
       );
     } else {
       return (
-        <div>
+        <Layout>
           <Header style={{padding: "0", marginBottom: "3px"}}>
             {
               Setting.isMobile() ? null : (
@@ -604,10 +605,11 @@ class App extends Component {
               {this.state.account && <SelectLanguageBox languages={this.state.account.organization.languages} />}
             </div>
           </Header>
-          {
-            this.renderRouter()
-          }
-        </div>
+          <Content style={{display: "flex", flexDirection: "column"}} >{
+            this.renderRouter()}
+          </Content>
+          {this.renderFooter()}
+        </Layout>
       );
     }
   }
@@ -644,8 +646,9 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <div style={{display: "flex", flexDirection: "column", height: "100%"}}>
-          <div id="login-content-wrap" style={{flexDirection: "column"}}>
+        <>
+          <Layout id="parent-area">
+            <Content style={{display: "flex"}}>
               <Switch>
                 <Route exact path="/signup" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} />)} />
                 <Route exact path="/signup/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<SignupPage account={this.state.account} {...props} onUpdateAccount={(account) => {this.onUpdateAccount(account);}} />)} />
@@ -667,27 +670,23 @@ class App extends Component {
                 <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
                   extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
               </Switch>
-          </div>
+            </Content>
             {
               this.renderFooter()
             }
-        </div>
+          </Layout>
+        </>
       );
     }
 
     return (
-      <div id="parent-area">
+      <>
         <FloatButton.BackTop />
         <CustomGithubCorner />
-        <div id="content-wrap" style={{flexDirection: "column"}}>
         {
           this.renderContent()
         }
-        </div>
-        {
-          this.renderFooter()
-        }
-      </div>
+      </>
     );
   }
 

web/src/App.less

@@ -27,15 +27,15 @@
   color: #61dafb;
 }
 
-#root {
-  height: 100%;
-}
-
 img {
   border-style: none;
   vertical-align: middle;
 }
 
+#root {
+  height: 100%;
+}
+
 #parent-area {
   display: flex;
   flex-direction: column;
@@ -44,23 +44,8 @@ img {
   background-color: #f5f5f5;
 }
 
-#content-wrap {
-  display: flex;
-  flex: 1 1 0;
-  align-items: stretch;
-  width: 100%;
-}
-
-#login-content-wrap {
-  display: flex;
-  flex: 1 1 0;
-  width: 100%;
-}
-
-#footer {
-  bottom: 0;
-  width: 100%;
-  padding: 24px 50px;
+.panel-logo {
+  margin-bottom: 30px;
 }
 
 .language-box {
@@ -105,6 +90,7 @@ img {
 
 .forget-content {
   padding: 10px 100px 20px;
+  margin: 30px auto;
   border: 2px solid #fff;
   border-radius: 7px;
   background-color: rgb(255 255 255);
@@ -135,9 +121,9 @@ img {
 }
 
 .loginBackground {
+  flex: auto;
   display: flex;
   align-items: center;
-  flex: 1 1 0;
   background: #fff no-repeat;
   background-size: 100% 100%;
   background-attachment: fixed;

web/src/Setting.js

@@ -732,12 +732,12 @@ export function renderLogo(application) {
   if (application.homepageUrl !== "") {
     return (
       <a target="_blank" rel="noreferrer" href={application.homepageUrl}>
-        <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: "10px"}} />
+        <img className="panel-logo" width={250} src={application.logo} alt={application.displayName} />
       </a>
     );
   } else {
     return (
-      <img width={250} src={application.logo} alt={application.displayName} style={{marginBottom: "10px"}} />
+      <img className="panel-logo" width={250} src={application.logo} alt={application.displayName} />
     );
   }
 }

web/src/auth/ForgetPage.js

@@ -492,7 +492,7 @@ class ForgetPage extends React.Component {
     return (
       <div className="loginBackground" style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${application.formBackgroundUrl})`}}>
         <CustomGithubCorner />
-        <div className="login-content forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
+        <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
           <Row>
             <Col span={24} style={{justifyContent: "center"}}>
               <Row>

web/src/auth/LoginPage.js

@@ -361,7 +361,7 @@ class LoginPage extends React.Component {
           size="large"
         >
           <Form.Item
-            style={{height: 0, visibility: "hidden"}}
+            hidden={true}
             name="application"
             rules={[
               {
@@ -372,7 +372,7 @@ class LoginPage extends React.Component {
           >
           </Form.Item>
           <Form.Item
-            style={{height: 0, visibility: "hidden"}}
+            hidden={true}
             name="organization"
             rules={[
               {

web/src/auth/SignupPage.js

@@ -42,7 +42,7 @@ const formItemLayout = {
       span: 24,
     },
     sm: {
-      span: 18,
+      span: 16,
     },
   },
 };
@@ -563,12 +563,13 @@ class SignupPage extends React.Component {
           application: application.name,
           organization: application.organization,
         }}
-        style={{width: !Setting.isMobile() ? "400px" : "300px"}}
         size="large"
+        layout={Setting.isMobile() ? "vertical" : "horizontal"}
+        style={{width: Setting.isMobile() ? "300px" : "400px"}}
       >
         <Form.Item
-          style={{height: 0, visibility: "hidden"}}
           name="application"
+          hidden={true}
           rules={[
             {
               required: true,
@@ -578,8 +579,8 @@ class SignupPage extends React.Component {
         >
         </Form.Item>
         <Form.Item
-          style={{height: 0, visibility: "hidden"}}
           name="organization"
+          hidden={true}
           rules={[
             {
               required: true,
@@ -638,7 +639,6 @@ class SignupPage extends React.Component {
               <div dangerouslySetInnerHTML={{__html: application.formSideHtml}} />
             </div>
             <div className="login-form">
-              <div >
               {
                 Setting.renderHelmet(application)
               }
@@ -652,7 +652,6 @@ class SignupPage extends React.Component {
             </div>
           </div>
         </div>
-        </div>
         {
           this.renderModal()
         }