Merge pull request #27 from LatestPrivacy/news-page

News Page
LatestPrivacy · Oct 5, 2020 · c18497c · c18497c
2 parents 5e482cb + 0bc252b
commit c18497c
Show file tree

Hide file tree

Showing 14 changed files with 3,910 additions and 2,593 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "react-moment": "^0.9.7",
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^1.2.2",
-    "react-scripts": "3.1.1",
+    "react-scripts": "^3.4.3",
     "react-scroll-parallax": "^2.3.4",
     "react-slick": "^0.25.2",
     "react-spinners": "^0.9.0",

diff --git a/public/index.html b/public/index.html
@@ -334,15 +334,5 @@ <h1>
       </div>
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Layout from './components/Layout';
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import Team from './pages/Team';
 import Home from './pages/Home';
@@ -16,24 +16,24 @@ import NotFoundPage from './components/NotFoundPage';
 import './App.css';
 
 function App() {
-  return (
-    <Router>
-        <Layout>
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route path="/team" component={Team} />
-            <Route path="/news" component={News} />
-            <Route path="/article/:slug" component={NewsDetail} />
-            <Route path="/videos" component={Videos} />
-            <Route path="/laws" component={Laws} />
-            <Route path="/donate" component={Donate} />
-            <Route path="/career" component={Career} />
-            <Route path="/terms-and-conditions" component={TermsAndConditions} />
-            <Route path="*" component={NotFoundPage} />
-          </Switch>
-        </Layout>
-    </Router>
-  );
+	return (
+		<Router forceRefresh>
+			<Layout>
+				<Switch>
+					<Route exact path="/" component={Home} />
+					<Route path="/team" component={Team} />
+					<Route path="/news" component={News} />
+					<Route path="/article/:slug" component={NewsDetail} />
+					<Route path="/videos" component={Videos} />
+					<Route path="/laws" component={Laws} />
+					<Route path="/donate" component={Donate} />
+					<Route path="/career" component={Career} />
+					<Route path="/terms-and-conditions" component={TermsAndConditions} />
+					<Route path="*" component={NotFoundPage} />
+				</Switch>
+			</Layout>
+		</Router>
+	);
 }
 
 export default App;
diff --git a/src/components/HomeNews.js b/src/components/HomeNews.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import axios from 'axios';
 
 import HeadingAnimation from './HeadingAnimation';
@@ -39,23 +39,25 @@ const HomeNews = () => {
 				</HeadingAnimation>
 				<div className={Style.newsWrapper}>
 					{loading
-						? <div style={{'gridColumn': 'span 12', 'textAlign': 'center'}}>
+					?	<div style={{'gridColumn': 'span 12', 'textAlign': 'center'}}>
 							<SyncLoader
 								size={8}
 								color={'#656565'}
 								loading={loading}
 							/>
 						</div>
-						: data.map((item, index) => (
-							<NewsItem
-								author={item.publisher} 
-								date={item.published_on} 
-								/*timetoread={item.read_time}*/  /*NewsItem.js: Line 35*/ /*NewsDetail.js: Line 72*/
-								slug={item.slug}
-								delay={0.6 + (index * 0.3)}
-							>
-								{item.title}
-							</NewsItem>
+					:	data.map((item, index) => (
+							<Fragment key={index}>
+								<NewsItem
+									author={item.publisher} 
+									date={item.published_on} 
+									/*timetoread={item.read_time}*/  /*NewsItem.js: Line 35*/ /*NewsDetail.js: Line 72*/
+									slug={item.slug}
+									delay={0.6 + (index * 0.3)}
+								>
+									{item.title}
+								</NewsItem>
+							</Fragment>
 						))
 					}
 				</div>

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,21 +1,17 @@
-import React, { Component } from 'react'
-//import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-
-import Header from './Header'
-import Footer from './Footer'
-
-//import LayoutStyle from './Layout.module.css'
+import React, { Component } from 'react';
+import Header from './Header';
+import Footer from './Footer';
 
 class Layout extends Component {
-  render() {
-    return(
-      <div>
-        <Header />
-        { this.props.children }
-        <Footer />
-      </div>
-    )
-  }
+	render() {
+		return (
+			<>
+				<Header />
+				{this.props.children}
+				<Footer />
+			</>
+		);
+	}
 }
 
 export default Layout;
diff --git a/src/components/NewsItem.js b/src/components/NewsItem.js
@@ -8,7 +8,7 @@ import Style from './NewsItem.module.scss';
 class NewsItem extends Component {
 	render() {
 		return (
-			<BodyTextAnimation duration={0.7} delay={this.props.delay} className={this.props.bigArticle && Style.bigheader}>
+			<BodyTextAnimation duration={0.7} delay={this.props.delay}>
 				<div className={Style.newsItem}>
 					<div className={Style.author}>
 						<span>Publisher </span><span>{this.props.author}</span>
@@ -22,7 +22,6 @@ class NewsItem extends Component {
 								{new Date(this.props.date).toDateString()}
 							</Moment>
 						</span>
-
 					</div>
 				</div>
 			</BodyTextAnimation>

diff --git a/src/components/NewsItem.module.scss b/src/components/NewsItem.module.scss
@@ -3,7 +3,7 @@
 }
 .author,
 .meta{
-    font-size: 0.75em;
+    font-size: 0.95em;
     color: #535353;
     > :first-child{
         color: #656565;
@@ -13,7 +13,7 @@
     }
 }
 .newsTitle{
-    font-size: 1.3em;
+    font-size: 1.4em;
     margin: 1rem 0;
     line-height: calc(32/21);
     a{
@@ -27,68 +27,7 @@
             color: #8C8C8C;
         }
     }
-}
-
-.bigheader{
-    grid-column-start: span 1;
-    grid-row: span 3;
-    padding-right: 1rem;
-    a{
-        color: white;
-        text-decoration: none;
-        transition: opacity 300ms;
-        cursor: pointer !important;
-
-        &:hover{
-            opacity: 0.5;
-        }
-        &:visited{
-            color: #8C8C8C;
-        }
-    }
-
-    h2{
-        font-size: 2.0625em;
-        margin: 0;
-    }
-
-    div{
-        padding-bottom: 0.4rem;
-        padding-bottom: 1rem;
-        p{
-            font-size: 1rem;
-            margin-top: 3rem;
-            position: relative;
-        }
-
-        p:after {
-            content: "";
-            display: block;
-            position: absolute;
-            background-image: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, #1a1a1a 100%);
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 0;
-        }
-    }
-
-    .meta{
-        display: none;
-    }
-
-
-    @media screen and (min-width: 666px){
-        grid-column-start: span 2;
-        grid-row: span 3;
-        h2{
-            font-size: 4.0625em;
-        }
-        div{
-
-            p{
-                font-size: 1.563rem;
-            }
-        }
+    p{
+        font-size: 0.80em;
     }
 }
diff --git a/src/index.js b/src/index.js
@@ -7,26 +7,26 @@ import './index.scss';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-const rootEl = document.getElementById('root')
+const rootEl = document.getElementById( 'root' );
 
 ReactDOM.render(
-    <BrowserRouter>
-        <ParallaxProvider>
-            <App />
-        </ParallaxProvider>
-    </BrowserRouter>,
-    rootEl
-)
+	<BrowserRouter>
+		<ParallaxProvider>
+			<App />
+		</ParallaxProvider>
+	</BrowserRouter>,
+	rootEl
+);
 
-if (module.hot) {
-    module.hot.accept('./App', () => {
-        const NextApp = require('./App').default
-        ReactDOM.render(
-            <NextApp />,
-            rootEl
-        )
-    })
-}
+if ( module.hot ) {
+	module.hot.accept( './App', () => {
+		const NextApp = require( './App' ).default;
+		ReactDOM.render(
+			<NextApp />,
+			rootEl
+		);
+	} );
+};
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

diff --git a/src/index.scss b/src/index.scss
@@ -40,7 +40,7 @@ body {
 
 h1,
 .h1{
-  font-size: 4.0625em;
+  font-size: 3.0625em;
 }
 
 h3,