Merge pull request #83 from Naova/press-section-remake

Refonte de la section Presse

src/App.js

@@ -13,7 +13,6 @@ import Team from "./containers/Team/Team";
 import Sponsors from "./containers/Sponsors/Sponsors";
 import Press from "./containers/Press/Press";
 import Scientific from "./containers/Scientific/Scientific";
-import Historique from "./containers/Historique/Historique";
 
 import messages from "./messages";
 // import "./style/bootstrap.min.css";

src/components/Press/ListOfPress.jsx

@@ -1,21 +1,21 @@
 import React, { Component } from "react";
-import Press from "./Press";
 
 import "./press.css";
+import PressYearSection from "./PressYearSection";
 
 const press_data = require("../../json/press.json");
 
 class ListOfPress extends Component {
     render() {
+        const availableYears = press_data.map(p => new Date(p.date).getFullYear());
+        const uniqueYears = [...new Set(availableYears)].sort().reverse();
         return (
             <div>
                 <center>
                     <div className="container naova_press_section">
-                        <div>
-                            {press_data.map((p, i) => {
-                                return <Press key={i} title={p.title} lang={p.lang} type={p.type} idDate={p.idDate} defaultMessageDate={p.defaultMessageDate} resume={p.resume} link={p.link} source={p.source}/>
-                            })}
-                        </div>
+                        {uniqueYears.map((year, i) => {
+                            return <PressYearSection key={i} year={year} />;
+                        })}
                     </div>
                 </center>
             </div>

src/components/Press/PressCard.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl';
+
+const getImageLink = (article) => {
+  const isYoutube = article.link.toLowerCase().includes('youtube')
+
+  if(isYoutube) {
+
+    const index = article.link.lastIndexOf("=");
+    const videoId = article.link.substring(index+1, article.link.length)
+
+    return `https://i3.ytimg.com/vi/${videoId}/maxresdefault.jpg`
+  }
+
+  if(article.image) {
+    return require(`../../img/press/${article.image.toLowerCase()}`)
+  }
+
+  return require("../../img/logo/naoface.svg").default;
+
+}
+
+
+const PressCard = ({article}) => {
+  const date = new Date(article.date)
+
+  const image = getImageLink(article)
+
+  return (
+    <div className="press-card" onClick={() => window.open(article.link, "_blank")}>
+        <p className="press-card-title">{article.title}</p>
+        <p className="press-card-date">{date.toLocaleDateString()}</p>
+        <p className="press-card-summary">{article.resume}</p>
+        <p className="press-card-source">
+          <FormattedMessage id="press.source" defaultMessage="Source: " />
+          {article.source}
+        </p>
+        <img src={image} className="press-card-img" />
+    </div>
+
+  )
+}
+
+export default PressCard

src/components/Press/PressYearSection.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import SectionHeaderNao from '../SectionHeaderNao/SectionHeaderNao'
+import { FormattedHTMLMessage } from 'react-intl'
+import PressCard from './PressCard';
+import "./press.css"
+
+const press_data = require("../../json/press.json");
+
+const PressYearSection = ({year}) => {
+
+    const yearData = press_data
+    .filter(p => new Date(p.date).getFullYear() === year)
+    .sort((a, b) => new Date(b.date) - new Date(a.date));
+
+    if(yearData.length === 0) return null;
+  return (
+    <div>
+        <SectionHeaderNao isBigNaoFace={false}>
+           <FormattedHTMLMessage id="press.year" defaultMessage={`Year`} />
+          {' '}{year}
+        </SectionHeaderNao>
+        <div className="press-section-container">
+            {yearData.map((article, i) => {
+                return <PressCard key={i} article={article} />;
+            })}
+        </div>
+    </div>
+  )
+}
+
+export default PressYearSection

src/components/Press/press.css

@@ -24,4 +24,114 @@
     color: #fff;
     background-color: #bf003b;
     border-color: black;
-} 
+} 
+
+.press-card {
+    background: rgb(100,100,100);
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+    padding: 1rem;
+    margin: 1rem;
+    margin-bottom: 0rem;
+    flex: 1;
+    height: 24rem;
+    border: 2px solid black;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+}
+
+.press-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: white;
+    text-align: start;
+    margin-bottom: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.press-card-date {
+    font-size: 1rem;
+    font-weight: 400;
+    color: white;
+    text-align: center;
+    margin-bottom: 1rem;
+    z-index: 1;
+    font-style: italic;
+}
+
+.press-card-summary {
+    font-size: 1rem;
+    font-weight: 400;
+    color: white;
+    text-align: justify;
+    text-overflow: ellipsis;
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: 0;
+    z-index: 1;
+}
+
+.press-card-summary::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #222222;
+    border-radius: 4rem;
+}
+
+.press-card-summary::-webkit-scrollbar
+{
+	width: 6px;
+	background-color: #222222;
+    border-radius: 4rem;
+}
+
+.press-card-summary::-webkit-scrollbar-thumb
+{
+	background-color: #f5f5f5;
+    border-radius: 4rem;
+}
+
+.press-section-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 16px;
+    grid-row-gap: 0px;
+    z-index: 1;
+}
+
+@media (max-width: 992px) {
+
+    .press-section-container {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-column-gap: 16px;
+        grid-row-gap: 0px;
+        z-index: 1;
+    }
+
+}
+
+.press-card-source {
+    margin-top: 1rem;
+    margin-bottom: 0;
+    font-size: 14px;
+    z-index: 1;
+    color: white;
+}
+
+.press-card-img {
+    height: 100%;
+    min-width: 100%;
+    margin: auto;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    filter: blur(5px) brightness(0.5);
+    position: absolute;
+}