Join page

Author: balthild

public/index.html

@@ -10,7 +10,7 @@
         -->
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
         <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500" rel="stylesheet">
         <!--
             Notice the use of %PUBLIC_URL% in the tags above.
             It will be replaced with the URL of the `public` folder during the build.

src/components/Home.tsx

@@ -41,7 +41,7 @@ export default class Home extends React.Component {
                             <p>我们提供了单项，组合动画，以及整套解决方案</p>
                         </div>
                         <div className="banner-button">
-                            <Button ghost>加入我们</Button>
+                            <Link to="/join"><Button ghost>加入我们</Button></Link>
                             <Button ghost>查看教程</Button>
                         </div>
                     </div>

src/components/Join.scss

@@ -0,0 +1,29 @@
+.join-banner p {
+    margin-bottom: 4px;
+
+    &:last-child {
+        margin-bottom: 12px;
+    }
+}
+
+.join-form {
+    .ant-form-item {
+        font-size: 14px;
+    }
+
+    .ant-form-item-label label {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: normal;
+    }
+
+    .form-action {
+        display: flex;
+        justify-content: flex-end;
+
+        .ant-btn {
+            margin-left: 12px;
+        }
+    }
+
+}

src/components/Join.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import './Join.scss';
+import { Button, Card, Col, Form, Icon, Input, Layout, Row } from 'antd';
+import { Link } from 'react-router-dom';
+import Sidebar from './Sidebar';
+
+interface State {
+    //
+}
+
+export default class Article extends React.Component {
+    state: State = {
+        //
+    };
+
+    onSubmit() {
+        //
+    }
+
+    render() {
+        return (
+            <div className="flex-spacer">
+                <Layout.Content className="banner article-banner join-banner">
+                    <div className="container">
+                        <div className="banner-head">特工登记</div>
+                        <p>人类的自由，蓝色的地球。泛广州抵抗军欢迎你的参战！</p>
+                        <p>It time to move!</p>
+                    </div>
+                </Layout.Content>
+
+                <Layout.Content className="container main">
+                    <Row>
+                        <Col span={16} className="news">
+                            <Card bordered={false}>
+                                <Form onSubmit={this.onSubmit} className="join-form">
+                                    <p>请如实认真地填写该表格，这将有助于我们更好地组织和调配战争资源，为我们共同的目标赢得更大的优势！</p>
+                                    <p>你填写的信息只会提供给审核人员查看，并保证不会在未得到你允许的情况下外传。</p>
+
+                                    <Form.Item label="特工代号">
+                                        <Input prefix={<Icon type="user" />} placeholder="Agent Name" />
+                                    </Form.Item>
+
+                                    <Form.Item label="Telegram 用户名">
+                                        <p><i>(什么是 <a href="https://telegram.org" target="_blank">Telegram</a>?)</i></p>
+                                        <p>请注意，Telegram 的 Name 与 Username 不是同一个概念，请填写 Username</p>
+                                        <Input prefix={<Icon type="user" />} placeholder="Telegram Username (不带 @)" />
+                                    </Form.Item>
+
+                                    // Map Here
+
+                                    <Form.Item label="其他说明">
+                                        <p>可以在此简述一下你是怎么入坑的、你的入坑时间、是否认识其他特工等</p>
+                                        <Input.TextArea autosize={{ minRows: 4, maxRows: 10 }} />
+                                    </Form.Item>
+
+                                    <div className="form-action">
+                                        <Link to="/"><Button size="large">取消</Button></Link>
+                                        <Button size="large" type="primary">提交</Button>
+                                    </div>
+                                </Form>
+                            </Card>
+                        </Col>
+
+                        <Sidebar />
+                    </Row>
+                </Layout.Content>
+            </div>
+        );
+    }
+}

src/components/Layout.scss

@@ -54,17 +54,12 @@
         padding-left: 24px;
         margin-left: 24px;
         line-height: 30px;
+        box-shadow: none;
+        font-size: 13px;
 
         @media (max-width: 1023px) {
             display: none;
         }
-
-        .ant-input {
-            border: none;
-            box-shadow: none;
-            padding-left: 0;
-            font-size: 13px;
-        }
     }
 }
 

src/components/Layout.tsx

@@ -46,7 +46,7 @@ export default class Home extends React.Component {
                         <div className="name">CantonRES</div>
                     </Link>
 
-                    <Input.Search className="search" placeholder="搜索……" />
+                    <Input className="search" placeholder="搜索……" />
 
                     <div className="flex-spacer" />
 

src/index.css

@@ -9,6 +9,7 @@ body {
 }
 
 p {
+    line-height: normal;
     margin: 0 0 0.8em;
 }
 

src/index.tsx

@@ -7,6 +7,7 @@ import './index.css';
 import Layout from './components/Layout';
 import Home from './components/Home';
 import Article from './components/Article';
+import Join from './components/Join';
 
 ReactDOM.render(
     <Router>
@@ -15,6 +16,7 @@ ReactDOM.render(
                 <Route exact path="/" component={Home} />
                 <Route path="/page/:page" component={Home} />
                 <Route path="/article/:id" component={Article} />
+                <Route path="/join" component={Join} />
                 <Route path="/form/:name" component={Home} />
                 <Route path="/user/:id" component={Home} />
                 <Route component={Home}/>