Skip to content
This repository was archived by the owner on Nov 11, 2025. It is now read-only.

Commit c18497c

Browse files
LukeSeersLukeSeers
authored
Merge pull request #27 from LatestPrivacy/news-page
News Page
2 parents 5e482cb + 0bc252b commit c18497c

File tree

14 files changed

+3910
-2593
lines changed

14 files changed

+3910
-2593
lines changed

‎package-lock.json‎

Lines changed: 2194 additions & 1468 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"react-moment": "^0.9.7",
1616
"react-router-dom": "^5.0.1",
1717
"react-router-hash-link": "^1.2.2",
18-
"react-scripts": "3.1.1",
18+
"react-scripts": "^3.4.3",
1919
"react-scroll-parallax": "^2.3.4",
2020
"react-slick": "^0.25.2",
2121
"react-spinners": "^0.9.0",

‎public/index.html‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -334,15 +334,5 @@ <h1>
334334
</div>
335335
</noscript>
336336
<div id="root"></div>
337-
<!--
338-
This HTML file is a template.
339-
If you open it directly in the browser, you will see an empty page.
340-
341-
You can add webfonts, meta tags, or analytics to this file.
342-
The build step will place the bundled scripts into the <body> tag.
343-
344-
To begin the development, run `npm start` or `yarn start`.
345-
To create a production bundle, use `npm run build` or `yarn build`.
346-
-->
347337
</body>
348338
</html>

‎src/App.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import Layout from './components/Layout';
3-
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
3+
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
44

55
import Team from './pages/Team';
66
import Home from './pages/Home';
@@ -16,24 +16,24 @@ import NotFoundPage from './components/NotFoundPage';
1616
import './App.css';
1717

1818
function App() {
19-
return (
20-
<Router>
21-
<Layout>
22-
<Switch>
23-
<Route exact path="/" component={Home} />
24-
<Route path="/team" component={Team} />
25-
<Route path="/news" component={News} />
26-
<Route path="/article/:slug" component={NewsDetail} />
27-
<Route path="/videos" component={Videos} />
28-
<Route path="/laws" component={Laws} />
29-
<Route path="/donate" component={Donate} />
30-
<Route path="/career" component={Career} />
31-
<Route path="/terms-and-conditions" component={TermsAndConditions} />
32-
<Route path="*" component={NotFoundPage} />
33-
</Switch>
34-
</Layout>
35-
</Router>
36-
);
19+
return (
20+
<Router forceRefresh>
21+
<Layout>
22+
<Switch>
23+
<Route exact path="/" component={Home} />
24+
<Route path="/team" component={Team} />
25+
<Route path="/news" component={News} />
26+
<Route path="/article/:slug" component={NewsDetail} />
27+
<Route path="/videos" component={Videos} />
28+
<Route path="/laws" component={Laws} />
29+
<Route path="/donate" component={Donate} />
30+
<Route path="/career" component={Career} />
31+
<Route path="/terms-and-conditions" component={TermsAndConditions} />
32+
<Route path="*" component={NotFoundPage} />
33+
</Switch>
34+
</Layout>
35+
</Router>
36+
);
3737
}
3838

3939
export default App;

‎src/components/HomeNews.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState, useEffect, Fragment } from 'react';
22
import axios from 'axios';
33

44
import HeadingAnimation from './HeadingAnimation';
@@ -39,23 +39,25 @@ const HomeNews = () => {
3939
</HeadingAnimation>
4040
<div className={Style.newsWrapper}>
4141
{loading
42-
? <div style={{'gridColumn': 'span 12', 'textAlign': 'center'}}>
42+
? <div style={{'gridColumn': 'span 12', 'textAlign': 'center'}}>
4343
<SyncLoader
4444
size={8}
4545
color={'#656565'}
4646
loading={loading}
4747
/>
4848
</div>
49-
: data.map((item, index) => (
50-
<NewsItem
51-
author={item.publisher}
52-
date={item.published_on}
53-
/*timetoread={item.read_time}*/ /*NewsItem.js: Line 35*/ /*NewsDetail.js: Line 72*/
54-
slug={item.slug}
55-
delay={0.6 + (index * 0.3)}
56-
>
57-
{item.title}
58-
</NewsItem>
49+
: data.map((item, index) => (
50+
<Fragment key={index}>
51+
<NewsItem
52+
author={item.publisher}
53+
date={item.published_on}
54+
/*timetoread={item.read_time}*/ /*NewsItem.js: Line 35*/ /*NewsDetail.js: Line 72*/
55+
slug={item.slug}
56+
delay={0.6 + (index * 0.3)}
57+
>
58+
{item.title}
59+
</NewsItem>
60+
</Fragment>
5961
))
6062
}
6163
</div>

‎src/components/Layout.js‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import React, { Component } from 'react'
2-
//import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
3-
4-
import Header from './Header'
5-
import Footer from './Footer'
6-
7-
//import LayoutStyle from './Layout.module.css'
1+
import React, { Component } from 'react';
2+
import Header from './Header';
3+
import Footer from './Footer';
84

95
class Layout extends Component {
10-
render() {
11-
return(
12-
<div>
13-
<Header />
14-
{ this.props.children }
15-
<Footer />
16-
</div>
17-
)
18-
}
6+
render() {
7+
return (
8+
<>
9+
<Header />
10+
{this.props.children}
11+
<Footer />
12+
</>
13+
);
14+
}
1915
}
2016

2117
export default Layout;

‎src/components/NewsItem.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Style from './NewsItem.module.scss';
88
class NewsItem extends Component {
99
render() {
1010
return (
11-
<BodyTextAnimation duration={0.7} delay={this.props.delay} className={this.props.bigArticle && Style.bigheader}>
11+
<BodyTextAnimation duration={0.7} delay={this.props.delay}>
1212
<div className={Style.newsItem}>
1313
<div className={Style.author}>
1414
<span>Publisher </span><span>{this.props.author}</span>
@@ -22,7 +22,6 @@ class NewsItem extends Component {
2222
{new Date(this.props.date).toDateString()}
2323
</Moment>
2424
</span>
25-
2625
</div>
2726
</div>
2827
</BodyTextAnimation>

‎src/components/NewsItem.module.scss‎

Lines changed: 4 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44
.author,
55
.meta{
6-
font-size: 0.75em;
6+
font-size: 0.95em;
77
color: #535353;
88
> :first-child{
99
color: #656565;
@@ -13,7 +13,7 @@
1313
}
1414
}
1515
.newsTitle{
16-
font-size: 1.3em;
16+
font-size: 1.4em;
1717
margin: 1rem 0;
1818
line-height: calc(32/21);
1919
a{
@@ -27,68 +27,7 @@
2727
color: #8C8C8C;
2828
}
2929
}
30-
}
31-
32-
.bigheader{
33-
grid-column-start: span 1;
34-
grid-row: span 3;
35-
padding-right: 1rem;
36-
a{
37-
color: white;
38-
text-decoration: none;
39-
transition: opacity 300ms;
40-
cursor: pointer !important;
41-
42-
&:hover{
43-
opacity: 0.5;
44-
}
45-
&:visited{
46-
color: #8C8C8C;
47-
}
48-
}
49-
50-
h2{
51-
font-size: 2.0625em;
52-
margin: 0;
53-
}
54-
55-
div{
56-
padding-bottom: 0.4rem;
57-
padding-bottom: 1rem;
58-
p{
59-
font-size: 1rem;
60-
margin-top: 3rem;
61-
position: relative;
62-
}
63-
64-
p:after {
65-
content: "";
66-
display: block;
67-
position: absolute;
68-
background-image: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, #1a1a1a 100%);
69-
top: 0;
70-
bottom: 0;
71-
right: 0;
72-
left: 0;
73-
}
74-
}
75-
76-
.meta{
77-
display: none;
78-
}
79-
80-
81-
@media screen and (min-width: 666px){
82-
grid-column-start: span 2;
83-
grid-row: span 3;
84-
h2{
85-
font-size: 4.0625em;
86-
}
87-
div{
88-
89-
p{
90-
font-size: 1.563rem;
91-
}
92-
}
30+
p{
31+
font-size: 0.80em;
9332
}
9433
}

‎src/index.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,26 @@ import './index.scss';
77
import App from './App';
88
import * as serviceWorker from './serviceWorker';
99

10-
const rootEl = document.getElementById('root')
10+
const rootEl = document.getElementById( 'root' );
1111

1212
ReactDOM.render(
13-
<BrowserRouter>
14-
<ParallaxProvider>
15-
<App />
16-
</ParallaxProvider>
17-
</BrowserRouter>,
18-
rootEl
19-
)
13+
<BrowserRouter>
14+
<ParallaxProvider>
15+
<App />
16+
</ParallaxProvider>
17+
</BrowserRouter>,
18+
rootEl
19+
);
2020

21-
if (module.hot) {
22-
module.hot.accept('./App', () => {
23-
const NextApp = require('./App').default
24-
ReactDOM.render(
25-
<NextApp />,
26-
rootEl
27-
)
28-
})
29-
}
21+
if ( module.hot ) {
22+
module.hot.accept( './App', () => {
23+
const NextApp = require( './App' ).default;
24+
ReactDOM.render(
25+
<NextApp />,
26+
rootEl
27+
);
28+
} );
29+
};
3030

3131
// If you want your app to work offline and load faster, you can change
3232
// unregister() to register() below. Note this comes with some pitfalls.

‎src/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ body {
4040

4141
h1,
4242
.h1{
43-
font-size: 4.0625em;
43+
font-size: 3.0625em;
4444
}
4545

4646
h3,

0 commit comments

Comments
 (0)