2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
5821c1b3 1 parent 1121c700

add Link, content styles

Inline Side-by-side
Showing 1 changed file with 36 additions and 6 deletions
1 import React from "react"; 1 import React from "react";
2 +import { Link } from "react-router-dom";
2 import styled from "styled-components"; 3 import styled from "styled-components";
3 import Header from "../../Components/Header"; 4 import Header from "../../Components/Header";
4 import Footer from "../../Components/Footer"; 5 import Footer from "../../Components/Footer";
...@@ -29,7 +30,7 @@ const ContentMain = styled.main` ...@@ -29,7 +30,7 @@ const ContentMain = styled.main`
29 `; 30 `;
30 31
31 const MainTabBox = styled.div` 32 const MainTabBox = styled.div`
32 - margin: 10px 0px; 33 + margin: 20px 0px;
33 width: 100%; 34 width: 100%;
34 font-size: 1.5rem; 35 font-size: 1.5rem;
35 `; 36 `;
...@@ -39,6 +40,7 @@ const MainSection = styled.section``; ...@@ -39,6 +40,7 @@ const MainSection = styled.section``;
39 const PostList = styled.ul` 40 const PostList = styled.ul`
40 display: flex; 41 display: flex;
41 flex-direction: column; 42 flex-direction: column;
43 + margin: 20px 0px;
42 `; 44 `;
43 45
44 const PostItem = styled.li` 46 const PostItem = styled.li`
...@@ -47,6 +49,10 @@ const PostItem = styled.li` ...@@ -47,6 +49,10 @@ const PostItem = styled.li`
47 &.post-header { 49 &.post-header {
48 background-color: #eaeaea; 50 background-color: #eaeaea;
49 } 51 }
52 + &.post-footer {
53 + background-color: #eaeaea;
54 + height: 30px;
55 + }
50 `; 56 `;
51 57
52 const TopicList = styled.ul` 58 const TopicList = styled.ul`
...@@ -71,11 +77,30 @@ const TopicItem = styled.li` ...@@ -71,11 +77,30 @@ const TopicItem = styled.li`
71 } 77 }
72 `; 78 `;
73 79
74 -const PaginationBox = styled.div``; 80 +const PaginationBox = styled.div`
81 + width: 100%;
82 + margin-bottom: 20px;
83 +`;
75 84
76 -const PaginationList = styled.ul``; 85 +const PaginationList = styled.ul`
86 + display: flex;
87 + flex-direction: row;
88 + justify-content: center;
89 + align-items: center;
90 +`;
77 91
78 -const PaginationItem = styled.li``; 92 +const PaginationItem = styled.li`
93 + font-size: 1.5rem;
94 + a {
95 + margin: 0px 10px;
96 + }
97 +`;
98 +
99 +const PaginationSpan = styled.span`
100 + background: #eaeaea;
101 + border-radius: 5px;
102 + margin: 0px 10px;
103 +`;
79 104
80 export default () => { 105 export default () => {
81 return ( 106 return (
...@@ -86,7 +111,7 @@ export default () => { ...@@ -86,7 +111,7 @@ export default () => {
86 <HeaderSpan>Forums</HeaderSpan> 111 <HeaderSpan>Forums</HeaderSpan>
87 </ContentHeader> 112 </ContentHeader>
88 <ContentMain> 113 <ContentMain>
89 - <MainTabBox>Tab</MainTabBox> 114 + <MainTabBox>Viewing 20 topics</MainTabBox>
90 <MainSection> 115 <MainSection>
91 <PostList> 116 <PostList>
92 <PostItem className="post-header"> 117 <PostItem className="post-header">
...@@ -105,11 +130,16 @@ export default () => { ...@@ -105,11 +130,16 @@ export default () => {
105 <TopicItem className="topic-date">2020-Date</TopicItem> 130 <TopicItem className="topic-date">2020-Date</TopicItem>
106 </TopicList> 131 </TopicList>
107 </PostItem> 132 </PostItem>
133 + <PostItem className="post-footer" />
108 </PostList> 134 </PostList>
109 </MainSection> 135 </MainSection>
110 <PaginationBox> 136 <PaginationBox>
111 <PaginationList> 137 <PaginationList>
112 - <PaginationItem>paging number</PaginationItem> 138 + <PaginationItem>
139 + <PaginationSpan>1</PaginationSpan>
140 + <Link to="/">2</Link>
141 + <Link to="/">3</Link>
142 + </PaginationItem>
113 </PaginationList> 143 </PaginationList>
114 </PaginationBox> 144 </PaginationBox>
115 </ContentMain> 145 </ContentMain>
......