feat: add news page

js_machine_front/src/scenes/news/components/newsContainer.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NewsModel, News } from '../models/news';
+import { NewsPresentation } from './newsPresentation';
+import '../styles/newsContainer.css';
+import '../styles/newsContainerMedia.css';
+
+export const EventsContainer: React.FC<NewsModel> = (props: NewsModel) => {
+    return (
+        <div className="news">
+            {
+                props.newsData.map((news: News) => <NewsPresentation key={news.id} id={news.id} description={news.description} date={news.date} title={news.title} />)
+            }
+        </div>
+    );
+};

js_machine_front/src/scenes/news/components/newsPresentation.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { News } from '../models/news';
+
+export const NewsPresentation: React.FC<News> = (props) => {
+    const newsDate: number = new Date(props.date).getDate();
+    const newsMonth: string = new Date(props.date).toLocaleString('ru', { month: 'short' }).toUpperCase();
+
+    return (
+        <div className="news__wrapper">
+            <div className="news__read">
+                <div className="news__read-content">ЧИТАТЬ ></div>
+            </div>
+            <div className="news__content">
+                <div>
+                    <p className="news__day">{newsDate} {newsMonth}</p>
+                </div>
+                <div>
+                    <p className="news__title">{props.title}</p>
+                </div>
+                <div>
+                    <p className="news__description">{props.description}</p>
+                </div>
+            </div>
+        </div>
+    );
+};

js_machine_front/src/scenes/news/models/news.ts

@@ -0,0 +1,10 @@
+export interface News {
+    id: number;
+    date: string;
+    title: string;
+    description: string;
+}
+
+export interface NewsModel {
+    newsData: News[];
+}

js_machine_front/src/scenes/news/news.tsx

@@ -1,5 +1,11 @@
-import React, { memo } from 'react';
+import React from 'react';
 import Background from './images/news.jpg';
+import { FormattedMessage } from 'react-intl';
+import './styles/news.css';
+
+import { EventsContainer } from './components/newsContainer';
+import { NewsModel } from './models/news';
+import { getNewsData } from './services/mocksNewsData';
 
 const sectionStyle = {
   height: '100vh',
@@ -9,10 +15,24 @@ const sectionStyle = {
   backgroundPosition: 'center',
 };
 
-export const News: React.FC = memo(() => {
-  return (
-    <div style={ sectionStyle }>
-      <div className="body"/>
-    </div>
-  );
-});
+export class News extends React.PureComponent<{}, NewsModel> {
+  public state: NewsModel = { newsData: [] };
+
+  public componentDidMount = async () => {
+    const response = await getNewsData();
+    this.setState(() => ({ newsData: response }));
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div style={sectionStyle}>
+        <div className="body">
+          <div className="title">
+            <FormattedMessage id="page.news" />
+          </div>
+          <EventsContainer newsData={this.state.newsData}/>
+        </div>
+      </div>
+    );
+  }
+}

js_machine_front/src/scenes/news/services/mocksNewsData.js

@@ -0,0 +1,89 @@
+const mocksEventsData = [
+    {
+        id: 0,
+        date: '04/20/2019',
+        title: 'MITCon 2019',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum nibh eu semper consequat. Curabitur quam mi, lacinia feugiat commodo id, viverra et erat. Phasellus sed ex eget nisi auctor feugiat.',
+    },
+    {
+        id: 1,
+        date: '05/30/2019',
+        title: 'JS JUNGLE',
+        description: 'Nulla sit amet massa sit amet felis auctor cursus nec quis ex. Morbi ornare, enim posuere viverra ultrices, massa lacus tristique tortor, sed suscipit risus diam non dolor. Donec faucibus leo quis nunc dapibus, in fringilla libero malesuada.',
+    },
+    {
+        id: 2,
+        date: '06/29/2019',
+        title: 'Городской пикник',
+        description: 'Ut sed lacus ut diam euismod eleifend. Sed sed rutrum mi, a vehicula ligula. Curabitur interdum, diam et sodales finibus, ante ante commodo sem, ac venenatis lacus ipsum et nunc.',
+    },
+    {
+        id: 3,
+        date: '05/30/2019',
+        title: 'JS JUNGLE',
+        description: 'Nulla ligula magna, euismod et erat eu, dapibus vehicula diam. Sed consectetur diam odio, vel consectetur mauris blandit vestibulum. Phasellus laoreet convallis lacus vitae blandit. Nulla congue neque sem, pretium facilisis ligula dictum eu.',
+    },
+    {
+        id: 4,
+        date: '04/20/2019',
+        title: 'MITCon2019',
+        description: 'Cras libero ipsum, semper eu lacinia sed, convallis ac enim. Vestibulum mattis tortor id arcu tempus, at interdum arcu interdum. Cras eget leo sed nisi efficitur rhoncus sit amet a dui.',
+    },
+    {
+        id: 5,
+        date: '08/09/2019',
+        title: 'The Rolling Scopes conference',
+        description: 'Nullam pharetra arcu eu felis congue, a posuere odio faucibus. Pellentesque gravida nibh nibh, at congue leo gravida quis. Vivamus fringilla felis eu ullamcorper interdum. Curabitur aliquet ipsum eu sapien ullamcorper consequat.',
+    },
+    {
+        id: 6,
+        date: '08/09/2019',
+        title: 'The Rolling Scopes conference',
+        description: 'Mauris pharetra ante sapien, et ullamcorper mauris imperdiet nec. Sed congue libero at leo dignissim interdum. Vivamus at euismod ligula. Etiam vel lectus ex. Aenean commodo efficitur eros.',
+    },
+    {
+        id: 7,
+        date: '04/20/2019',
+        title: 'MITCon 2019',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum nibh eu semper consequat. Curabitur quam mi, lacinia feugiat commodo id, viverra et erat. Phasellus sed ex eget nisi auctor feugiat.',
+    },
+    {
+        id: 8,
+        date: '05/30/2019',
+        title: 'JS JUNGLE',
+        description: 'Nulla sit amet massa sit amet felis auctor cursus nec quis ex. Morbi ornare, enim posuere viverra ultrices, massa lacus tristique tortor, sed suscipit risus diam non dolor. Donec faucibus leo quis nunc dapibus, in fringilla libero malesuada.',
+    },
+    {
+        id: 9,
+        date: '06/29/2019',
+        title: 'Городской пикник',
+        description: 'Ut sed lacus ut diam euismod eleifend. Sed sed rutrum mi, a vehicula ligula. Curabitur interdum, diam et sodales finibus, ante ante commodo sem, ac venenatis lacus ipsum et nunc.',
+    },
+    {
+        id: 10,
+        date: '05/30/2019',
+        title: 'JS JUNGLE',
+        description: 'Nulla ligula magna, euismod et erat eu, dapibus vehicula diam. Sed consectetur diam odio, vel consectetur mauris blandit vestibulum. Phasellus laoreet convallis lacus vitae blandit. ',
+    },
+    {
+        id: 11,
+        date: '04/20/2019',
+        title: 'MITCon2019',
+        description: 'Cras libero ipsum, semper eu lacinia sed, convallis ac enim. Vestibulum mattis tortor id arcu tempus, at interdum arcu interdum. Cras eget leo sed nisi efficitur rhoncus sit amet a dui.',
+    },
+    {
+        id: 12,
+        date: '08/09/2019',
+        title: 'The Rolling Scopes conference',
+        description: 'Nullam pharetra arcu eu felis congue, a posuere odio faucibus. Pellentesque gravida nibh nibh, at congue leo gravida quis. Vivamus fringilla felis eu ullamcorper interdum.',
+    },
+    {
+        id: 13,
+        date: '08/09/2019',
+        title: 'The Rolling Scopes conference',
+        description: 'Mauris pharetra ante sapien, et ullamcorper mauris imperdiet nec. Sed congue libero at leo dignissim interdum. Vivamus at euismod ligula. Etiam vel lectus ex. Aenean commodo efficitur eros.',
+    },
+];
+
+
+export const getNewsData = () => mocksEventsData;

js_machine_front/src/scenes/news/styles/newsContainer.css

@@ -0,0 +1,80 @@
+.news {
+    display: flex;
+    flex-flow: row wrap;
+    position: absolute;
+    max-width: 70%;
+    height: 58%;
+    right: 70px;
+    top: 340px;
+    overflow-y: scroll;
+    color: white;
+    font-family: 'Exo', sans-serif;
+}
+
+.news::-webkit-scrollbar {
+    width: 6px;
+}
+
+.news::-webkit-scrollbar-thumb {
+    background-color: #F2E14C;
+    border-radius: 3px;
+}
+
+.news__wrapper {
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    width: 33%;
+    min-height: 39%;
+    padding: 0 60px 45px;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.news__day {
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: left;
+}
+
+.news__title {
+    margin: 0;
+    text-align: left;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 25px;
+}
+
+.news__description {
+    text-align: left;
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.news__read {
+    position: absolute;
+    background-color: #F2E14C;
+    overflow: hidden;
+    width: 0;
+    height: 80%;
+    transition: .5s ease;
+}
+
+.news__wrapper:hover .news__read {
+    width: 80%;
+}
+
+.news__read-content {
+    color: black;
+    font-size: 16px;
+    font-weight: bolder;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+}

js_machine_front/src/scenes/news/styles/newsContainerMedia.css

@@ -0,0 +1,41 @@
+@media screen and (max-width: 1200px) {
+    .news{
+        max-width: 80%;
+    }
+
+    .news__wrapper {
+        padding: 0 30px 45px;
+        max-width: 85%;
+    }
+}
+
+@media screen and (max-width: 850px) {
+    .news{
+        max-width: 85%;
+        right: 35px;
+    }
+
+    .news__wrapper {
+        width: 50%;
+        padding: 0 20px 35px;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .news{
+        max-width: 85%;
+        right: 10px;
+        top: 35%;
+    }
+
+    .news__wrapper {
+        width: 100%;
+        padding: 0 0px 25px;
+    }
+}
+
+@media (hover: none) and (pointer: coarse){
+    .news__read {
+        display: none;
+    }
+}