Merge pull request #5 from ryoldash/u-samet

User Layout Refactoring

Author: ryoldash

reactjs/package-lock.json

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background: #142c52;
 }
 
 .App-logo {

reactjs/src/App.css

@@ -0,0 +1,8 @@
+.footer {
+    position: sticky;
+    left: 0;
+    margin-top: 16px;
+    bottom: 64px;
+    width: 100%;
+    text-align: center;
+ }

reactjs/src/components/Footer/index.less

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import { Col } from 'antd';
+import './index.less';
 
 const Footer = () => {
   return (
-    <React.Fragment>
-      Asp.Net Boilerplate - React ©2018 <a href="https://github.com/ryoldash/module-zero-core-template">Github Page</a>
-    </React.Fragment>
+      <Col className={"footer"}>
+      Asp.Net Boilerplate - React © 2018 <a href="https://github.com/ryoldash/module-zero-core-template">Github Page</a>
+      </Col>
   );
 };
 export default Footer;

reactjs/src/components/Footer/index.tsx

@@ -0,0 +1,71 @@
+@import '~antd/lib/style/themes/default.less';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: auto;
+  background: @layout-body-background;
+}
+
+.lang {
+  text-align: right;
+  width: 100%;
+  height: 40px;
+  line-height: 44px;
+  :global(.ant-dropdown-trigger) {
+    margin-right: 24px;
+  }
+}
+
+.content {
+  padding: 32px 0;
+  flex: 1;
+}
+
+@media (min-width: @screen-md-min) {
+  .container {
+    background-image: url('../../images/userLayout-Backround.svg');
+    background-repeat: no-repeat;
+    background-position: center 110px;
+    background-size: 100%;
+  }
+
+  .content {
+    padding: 72px 0 24px 0;
+  }
+}
+
+.top {
+  text-align: center;
+}
+
+.header {
+  height: 44px;
+  line-height: 44px;
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  height: 44px;
+  vertical-align: top;
+  margin-right: 16px;
+}
+
+.title {
+  font-size: 33px;
+  color: @heading-color;
+  font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: 600;
+  position: relative;
+  top: 2px;
+}
+
+.desc {
+  font-size: @font-size-base;
+  color: @text-color-secondary;
+  margin-top: 12px;
+  margin-bottom: 40px;
+}

reactjs/src/components/Layout/UserLayout.less

@@ -3,6 +3,10 @@ import DocumentTitle from 'react-document-title';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import utils from 'src/utils/utils';
 import { userRouter } from '../Router/router.config';
+import { Col } from 'antd';
+// import "./UserLayout.css";
+import "./UserLayout.less";
+import Footer from '../Footer';
 
 class UserLayout extends React.Component<any> {
   render() {
@@ -11,15 +15,18 @@ class UserLayout extends React.Component<any> {
     } = this.props;
     return (
       <DocumentTitle title={utils.getPageTitle(pathname)}>
-        <Switch>
-          {userRouter
-            .filter((item: any) => !item.isLayout)
-            .map((item: any, index: number) => (
-              <Route key={index} path={item.path} component={item.component} exact={item.exact} />
-            ))}
+          <Col className="container">
+            <Switch>
+              {userRouter
+                .filter((item: any) => !item.isLayout)
+                .map((item: any, index: number) => (
+                  <Route key={index} path={item.path} component={item.component} exact={item.exact} />
+                ))}
 
-          <Redirect from="/user" to="/user/login" />
-        </Switch>
+              <Redirect from="/user" to="/user/login" />
+            </Switch>
+            <Footer/>
+          </Col>
       </DocumentTitle>
     );
   }

reactjs/src/components/Layout/UserLayout.tsx

@@ -0,0 +1,32 @@
+@import '~antd/lib/style/themes/default.less';
+
+.main {
+  width: 368px;
+  margin: 0 auto;
+  @media screen and (max-width: @screen-sm) {
+    width: 95%;
+  }
+
+  .icon {
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.2);
+    margin-left: 16px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .other {
+    text-align: left;
+    margin-top: 24px;
+    line-height: 22px;
+
+    .register {
+      float: right;
+    }
+  }
+}