💄Contact

noeypatt · Mar 31, 2020 · 4f24b6e · 4f24b6e · vercel · Mar 31, 2020
1 parent 0239c3b
commit 4f24b6e
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 30 deletions.
diff --git a/pages/index/Contact.js b/pages/index/Contact.js
@@ -3,7 +3,7 @@ import Head from 'next/head';
 import NavBar from '../../components/layout/nav';
 import { useMediaQuery } from 'react-responsive';
 import { Skeleton, Switch, Card, Avatar } from 'antd';
-import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { EditOutlined, EllipsisOutlined, SettingOutlined, HomeOutlined, CopyOutlined } from '@ant-design/icons';
 const { Meta } = Card;
 
 const Contact = () => {
@@ -27,12 +27,6 @@ const Contact = () => {
             detail: "",
             tel: ""
         },
-        {
-            name: "",
-            detail: "",
-            tel: ""
-        },
-
     ])
 
     const [status, setStatus] = useState(false)
@@ -74,7 +68,7 @@ const Contact = () => {
                 <link rel='icon' href='/static/logomain.svg' />
             </Head>
             <NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
-            <div className="warp-about">
+            <div className="warp-contact-page">
                 <div className="page-content">
                     {
                         isSmallScreen ?
@@ -107,29 +101,30 @@ const Contact = () => {
                                 </div>
 
                                 <div className="detail-content">
-                                    {
-                                        data.map((item, index) => (
-                                            <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
-                                                <Meta
-                                                    avatar={
-                                                        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-                                                    }
-                                                    title="Card title"
-                                                    description="This is the description"
-                                                />
-                                            </Card>
-                                        ))
-                                    }
                                     <div className="data-detail-content">
-                                        {/* {
+                                        {
                                             data.map((item, index) => (
-                                                <div className="title-content" key={index}>
-                                                    <h6 className="header-title-content">{item.title}</h6>
-                                                    <h6>{item.text}</h6>
-                                                    <h6>{item.subtext}</h6>
-                                                </div>
+                                                <Card
+                                                    style={{ width: 300, marginTop: 15 }}
+                                                    actions={[
+                                                        <HomeOutlined key="home" />,
+                                                        <CopyOutlined key="Copy" />,
+                                                        <EllipsisOutlined key="ellipsis" />,
+
+                                                    ]}
+                                                >
+                                                    <Skeleton loading={loading} avatar active>
+                                                        <Meta
+                                                            avatar={
+                                                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                                                            }
+                                                            title="Card title"
+                                                            description="This is the description"
+                                                        />
+                                                    </Skeleton>
+                                                </Card>
                                             ))
-                                        } */}
+                                        }
                                     </div>
                                 </div>
                             </div>

diff --git a/styles/base.scss b/styles/base.scss
@@ -7,8 +7,9 @@
 @import "./footer.scss";
 
 //Index
-@import './index/society.scss';
-@import './index/allowance.scss';
+@import "./index/society.scss";
+@import "./index/allowance.scss";
+@import "./index/contact.scss";
 
 //Main
 @import "./main.scss";

diff --git a/styles/index/contact.scss b/styles/index/contact.scss
@@ -0,0 +1,84 @@
+.warp-contact-page {
+    .page-content {
+        padding-top: 3rem;
+
+        .container-fluid {
+            display: flex;
+            flex-direction: column;
+            .head-content {
+                h1.name-header {
+                    font-family: $font-header;
+                }
+
+                .title-about {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    h6 {
+                        margin-top: 0.5rem;
+                        color: $font-text-sub;
+                        font-style: italic;
+                    }
+                }
+            }
+            .detail-content {
+                display: flex;
+                flex-direction: column;
+                margin: 2rem 3rem;
+
+                .data-detail-content {
+                    display: flex;
+                    justify-content: space-evenly;
+
+                    @media (max-width: 575.98px) {
+                        margin-top: 1rem;
+                    }
+
+                    .title-content {
+                        padding: 0 3rem;
+
+                        @media (max-width: 768px) {
+                            padding: 0;
+                        }
+
+                        .header-title-content {
+                            font-weight: bold !important;
+                        }
+
+                        .sub-title-content {
+                            margin-left: 1rem;
+                        }
+
+                        h6 {
+                            text-align: start;
+                            opacity: 0.8;
+                            margin-bottom: 0.5rem !important;
+                            font-weight: lighter;
+                        }
+                    }
+                    .more-content {
+                        padding: 0 3rem;
+                        display: flex;
+
+                        h6 {
+                            margin-top: 1rem;
+                            font-weight: bold;
+                            text-align: center;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .ant-card-actions > li {
+        display: flex;
+        justify-content: center;
+    }
+    .ant-card-actions > li:not(:last-child) {
+        border-right: none;
+    }
+    .ant-skeleton-content .ant-skeleton-paragraph > li + li{
+        margin-top: 0;
+    }
+}