Skip to content

Commit 2b208a4

Browse files
padmajabholpadmajabhol
committed
add css for individual policies
1 parent 75251f9 commit 2b208a4

File tree

7 files changed

+227
-25
lines changed

7 files changed

+227
-25
lines changed

‎data/db.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"policies": {
1616
"policy": "Policy 1",
1717
"dataavail": true,
18-
"datashared": true,
18+
"datashared": false,
1919
"peerreview": true,
2020
"enforced": "Yes - before application",
2121
"enforcedevidence": "Random String"
@@ -34,9 +34,10 @@
3434
"issn": "issn-615-682543",
3535
"updated": "16th Aug 2022",
3636
"link": "https://doi.org/10.1002/agg2.20287",
37+
3738
"policies": {
3839
"policy": "Policy 1",
39-
"dataavail": true,
40+
"dataavail": false,
4041
"datashared": true,
4142
"peerreview": true,
4243
"enforced": "Yes - before application",
@@ -60,7 +61,7 @@
6061
"policy": "Policy 1",
6162
"dataavail": true,
6263
"datashared": true,
63-
"peerreview": true,
64+
"peerreview": false,
6465
"enforced": "Yes - before application",
6566
"enforcedevidence": "Random String"
6667

‎src/components/JournalDetails/Details.js‎

Lines changed: 93 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,113 @@
1+
/* eslint-disable react/jsx-key */
2+
/* eslint-disable max-len */
13
/* eslint-disable no-unused-vars */
24
/* eslint-disable prefer-template */
35
import React from 'react'
46
import { useParams } from 'react-router';
7+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
8+
import {faBookmark, faSquareCheck, faRectangleXmark, faLink} from '@fortawesome/free-solid-svg-icons';
59
import useFetch from '../Journals/useFetch';
6-
import { Container } from './styles';
10+
import { Container, Head, PolicyContainer, Title, Subhead, Subhead2, Box, List, Que, Misc, UpdateContainer, Icon } from './styles';
11+
import { Authors, Head3 } from '../Journals/styles';
712

813

914
function Details() {
1015
const { id } = useParams();
1116
const { journalFetch: indv } = useFetch('http://localhost:8000/journals/' + id);
1217

18+
const poli = [
19+
{
20+
ques: 'POLICY TYPE:',
21+
ans: indv && indv.policies.policy,
22+
},
23+
{
24+
ques: 'DATA AVAILABILITY STATEMENT PUBLISHED:',
25+
ans: indv && indv.policies.dataavail ? <FontAwesomeIcon icon={faSquareCheck} color="green"/> : <FontAwesomeIcon icon={faRectangleXmark} color="red"/>,
26+
},
27+
{
28+
ques: "DATA SHARED:",
29+
ans: indv && indv.policies.datashared ? <FontAwesomeIcon icon={faSquareCheck} color="green" /> : <FontAwesomeIcon icon={faRectangleXmark} color="red"/>
30+
},
31+
{
32+
ques: "DATA PEER REVIEWED:",
33+
ans: indv && indv.policies.peerreview ? <FontAwesomeIcon icon={faSquareCheck} color="green" /> : <FontAwesomeIcon icon={faRectangleXmark} color="red"/>
34+
},
35+
{
36+
ques: "ENFORCED:",
37+
ans: indv && indv.policies.enforced,
38+
},
39+
{
40+
ques: "ENFORCED EVIDENCE:",
41+
ans: indv && indv.policies.enforcedevidence,
42+
},
43+
];
44+
45+
const misc = [
46+
{
47+
ques: "CREATED AT:",
48+
ans: indv && indv.published,
49+
},
50+
{
51+
ques: "UPDATED AT:",
52+
ans: indv && indv.updated,
53+
},
54+
{
55+
ques: "CREATED BY:",
56+
ans: indv && indv.authors.map((author) => (
57+
<div key={indv.id}>
58+
{author}
59+
</div>
60+
))
61+
},
62+
]
63+
1364
return (
1465
<Container>
15-
<h1>
16-
Journal Detail - { id }
66+
<Head>
67+
Journal policies
68+
</Head>
1769
{ indv && (
18-
<>
19-
<h2>{indv.title}</h2>
70+
<PolicyContainer>
71+
<Title>{indv.title}</Title>
2072
<div>
21-
<h2>Policy</h2>
22-
<p>POLICY TYPE: {indv.policies.policy}</p>
23-
<p>DATA AVAILABILITY STATEMENT PUBLISHED: {indv.policies.dataavail}</p>
24-
<p>DATA SHARED: {indv.policies.datashared}</p>
25-
<p>DATA PEER REVIEWED: {indv.policies.peerreview}</p>
26-
<p>ENFORCED: {indv.policies.enforced}</p>
27-
<p>ENFORCED EVIDENCE: {indv.policies.enforcedevidence}</p>
73+
<Subhead>
74+
<Icon>
75+
<FontAwesomeIcon icon={faBookmark} color="#EC8D20"/>
76+
</Icon>
77+
<Subhead2>Policies</Subhead2>
78+
</Subhead>
79+
<Box>
80+
{poli.map((detail) => (
81+
<List primary>
82+
<Que primary>
83+
{detail.ques}
84+
</Que>
85+
<span style={{color: "black"}}>
86+
{detail.ans}
87+
</span>
88+
</List>
89+
))}
90+
</Box>
91+
<Misc>
92+
<span style={{color: "#EC8D20"}}>{indv.topic}</span> | <FontAwesomeIcon icon={faLink} color="#29A3CE"/> <span style={{color: "#A39797"}}>{indv.link}</span>
93+
<UpdateContainer>
94+
{misc.map((mis) => (
95+
<List>
96+
<Que>
97+
{mis.ques}
98+
</Que>
99+
<div>
100+
{mis.ans}
101+
</div>
102+
103+
</List>
104+
))}
105+
</UpdateContainer>
106+
</Misc>
28107
</div>
29-
</>
108+
</PolicyContainer>
30109
)}
31-
</h1>
110+
32111
</Container>
33112

34113
)

‎src/components/JournalDetails/styles.js‎

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,126 @@
11
import styled from 'styled-components';
22

33
export const Container = styled.div`
4+
// display: grid;
45
min-height: 100vh;
5-
padding-top: 10%;
6+
padding-bottom: 5%;
7+
background-color: #EFEFF0;
8+
overflow-x: hidden;
9+
`;
610

11+
export const Head = styled.h1`
12+
margin-top: 100px;
13+
font-size: 2rem;
14+
color: #EC8D20;
15+
text-align: center;
16+
`;
17+
18+
export const PolicyContainer = styled.div`
19+
width: 65%;
20+
margin: 0px auto 0px auto;
21+
background-color: #FFFF;
22+
padding: 3rem 6rem;
23+
align-self: center;
24+
justify-self: center;
25+
@media (max-width: 1300px) {
26+
width: 78%;
27+
padding: 2rem 4rem;
28+
}
29+
@media (max-width: 800px) {
30+
width: 85%;
31+
padding: 1.4rem 2rem;
32+
}
33+
@media (max-width: 600px) {
34+
width: 88%;
35+
padding: 1.5rem 1.5rem;
36+
}
37+
38+
`;
39+
40+
export const Title = styled.h1`
41+
width: 90%;
42+
font-size: 1.4rem;
43+
color: #6B6868;
44+
line-height: 1.4;
45+
@media (max-width: 1000px) {
46+
font-size: 1.6rem;
47+
line-height: 1.2;
48+
}
49+
@media (max-width: 700px) {
50+
font-size: 1.2rem;
51+
line-height: 1.2;
52+
}
53+
`;
54+
55+
export const Subhead = styled.div`
56+
display: flex;
57+
gap: 5px;
58+
`;
59+
60+
export const Subhead2 = styled.p`
61+
font-size: 1.4rem;
62+
@media (max-width: 1000px) {
63+
font-size: 1.6rem;
64+
}
65+
@media (max-width: 700px) {
66+
font-size: 1.2rem;
67+
}
68+
`;
69+
70+
export const Icon = styled.div`
71+
position: relative;
72+
top: 7px;
73+
@media (max-width: 700px) {
74+
top: 4px;
75+
}
76+
`;
77+
78+
export const Box = styled.div`
79+
display: grid;
80+
color: #A39797;
81+
`;
82+
83+
export const List = styled.p`
84+
display: ${props => props.primary ? "grid" : "flex"};
85+
grid-template-columns:${props => props.primary ? "50% 50%" : "none"} ;
86+
border-bottom: ${props => props.primary ? "0.5px solid #DFD3D3" : "none"} ;
87+
font-size: ${props => props.primary ? "0.9375rem" : "0.98rem"};
88+
gap: ${props => props.primary ? "0px" : "0.5rem"};
89+
margin-bottom: ${props => props.primary ? "1rem" : "0px"};
90+
@media (max-width: 1530px) {
91+
gap: ${props => props.primary ? "0rem" : "1rem"};
92+
}
93+
@media (max-width: 1000px){
94+
grid-template-columns:${props => props.primary ? "70% 30%" : "none"} ;
95+
}
96+
@media (max-width: 400px) {
97+
font-size: 0.9375rem;
98+
}
99+
`;
100+
101+
export const Que = styled.p`
102+
width: ${props => props.primary ? "45%" : "none"};
103+
color: #A39797;
104+
margin-bottom: ${props => props.primary ? "1rem" : "0px"};
105+
@media (max-width: 1620px) {
106+
width: ${props => props.primary ? "60%" : "none"};
107+
};
108+
@media (max-width: 1530px) {
109+
width: ${props => props.primary ? "80%" : "none"};
110+
}
111+
@media (max-width: 1000px) {
112+
width: ${props => props.primary ? "90%" : "none"};
113+
}
114+
`;
115+
116+
export const UpdateContainer = styled.div`
117+
display: grid;
118+
width: 100%;
119+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
120+
gap: 5px;
121+
margin-top: 6px;
122+
`;
123+
124+
export const Misc = styled.div`
125+
7126
`;

‎src/components/Journals/JournalList.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const JournalList = ({journalFetch}) => {
1313
{journalFetch.map((blog) => (
1414
<Preview key={blog.id}>
1515
<Head2 primary>{ blog.journaltype }</Head2>
16-
<Link to={`/journals/${blog.id}`}>
16+
<Link to={`/policy/${blog.id}`}>
1717
<Head2>{ blog.title }</Head2>
1818
<Authors>
1919
{blog.authors.map((author) => (
@@ -26,8 +26,6 @@ const JournalList = ({journalFetch}) => {
2626
</Description>
2727
<Head3><span style={{color: "#EC8D20"}}>First Published: </span>{blog.published}</Head3>
2828
</Link>
29-
30-
3129
</Preview>
3230
))}
3331
</Box>

‎src/config/content/navbar.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ export default {
3939
name: null,
4040
link: '/login',
4141
},
42+
{
43+
id: 'policy',
44+
name: null,
45+
link: '/policy/:id',
46+
}
4247

4348
],
4449
};

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
* {
22
box-sizing: border-box;
33
margin: 0;
4-
padding: 0;
4+
padding-top: 1px;
55
font-family: 'Poppins', sans-serif;
66
}
77

‎src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ import './index.css';
55
import 'bootstrap/dist/css/bootstrap.min.css';
66
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
77
import { Journal, Contact, Manifesto, Home } from './pages';
8-
import { Footer, Auth, Header, Login, JournalDetails } from './components';
8+
import { Footer, Auth, Header, Login, JournalDetails, } from './components';
99
import Navbar from './components/marginals/Navbar/Navbar';
1010

1111
function App() {
1212
return (
1313
<Router>
14-
<Navbar />
14+
<Navbar/>
1515
<Switch>
1616
<Route path='/' exact component={Home} />
1717
<Route path='/manifesto' exact component={Manifesto} />
1818
<Route path='/journal' exact component={Journal} />
19-
<Route path='/journals/:id'>
19+
<Route path='/policy/:id'>
2020
<JournalDetails/>
2121
</Route>
2222
<Route path='/contact' exact component={Contact} />

0 commit comments

Comments
 (0)