Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-1-capstone-design1
/
Triz_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
sdy
2020-07-19 23:22:51 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
5821c1b3e6372e6ed5697989da6bc44b6d895cb2
5821c1b3
1 parent
1121c700
add Link, content styles
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
36 additions
and
6 deletions
front/src/Routes/Forum/ForumPresenter.js
front/src/Routes/Forum/ForumPresenter.js
View file @
5821c1b
import
React
from
"react"
;
import
{
Link
}
from
"react-router-dom"
;
import
styled
from
"styled-components"
;
import
Header
from
"../../Components/Header"
;
import
Footer
from
"../../Components/Footer"
;
...
...
@@ -29,7 +30,7 @@ const ContentMain = styled.main`
`
;
const
MainTabBox
=
styled
.
div
`
margin:
1
0px 0px;
margin:
2
0px 0px;
width: 100%;
font-size: 1.5rem;
`
;
...
...
@@ -39,6 +40,7 @@ const MainSection = styled.section``;
const
PostList
=
styled
.
ul
`
display: flex;
flex-direction: column;
margin: 20px 0px;
`
;
const
PostItem
=
styled
.
li
`
...
...
@@ -47,6 +49,10 @@ const PostItem = styled.li`
&.post-header {
background-color: #eaeaea;
}
&.post-footer {
background-color: #eaeaea;
height: 30px;
}
`
;
const
TopicList
=
styled
.
ul
`
...
...
@@ -71,11 +77,30 @@ const TopicItem = styled.li`
}
`
;
const
PaginationBox
=
styled
.
div
``
;
const
PaginationBox
=
styled
.
div
`
width: 100%;
margin-bottom: 20px;
`
;
const
PaginationList
=
styled
.
ul
``
;
const
PaginationList
=
styled
.
ul
`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`
;
const
PaginationItem
=
styled
.
li
``
;
const
PaginationItem
=
styled
.
li
`
font-size: 1.5rem;
a {
margin: 0px 10px;
}
`
;
const
PaginationSpan
=
styled
.
span
`
background: #eaeaea;
border-radius: 5px;
margin: 0px 10px;
`
;
export
default
()
=>
{
return
(
...
...
@@ -86,7 +111,7 @@ export default () => {
<
HeaderSpan
>
Forums
<
/HeaderSpan
>
<
/ContentHeader
>
<
ContentMain
>
<
MainTabBox
>
Tab
<
/MainTabBox
>
<
MainTabBox
>
Viewing
20
topics
<
/MainTabBox
>
<
MainSection
>
<
PostList
>
<
PostItem
className
=
"post-header"
>
...
...
@@ -105,11 +130,16 @@ export default () => {
<
TopicItem
className
=
"topic-date"
>
2020
-
Date
<
/TopicItem
>
<
/TopicList
>
<
/PostItem
>
<
PostItem
className
=
"post-footer"
/>
<
/PostList
>
<
/MainSection
>
<
PaginationBox
>
<
PaginationList
>
<
PaginationItem
>
paging
number
<
/PaginationItem
>
<
PaginationItem
>
<
PaginationSpan
>
1
<
/PaginationSpan
>
<
Link
to
=
"/"
>
2
<
/Link
>
<
Link
to
=
"/"
>
3
<
/Link
>
<
/PaginationItem
>
<
/PaginationList
>
<
/PaginationBox
>
<
/ContentMain
>
...
...
Please
register
or
login
to post a comment