From b10323529252e2bc3cd9bda0678bb7d9ee77a4d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Mon, 17 Dec 2018 17:45:42 +0100
Subject: [PATCH] Started sidebar on news page, added modal Add news form

---
 src/components/Footer.js     |  2 +-
 src/components/pages/News.js | 65 ++++++++++++++++++++++++++++++++----
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 7613f4c..6438449 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 
 const Footer = () => (
-  <Segment inverted vertical textAlign='center'>
+  <Segment inverted attached={'bottom'} vertical style={{clear: 'both'}} textAlign='center'>
     <Container>
       <p textalign='center'>Created by DevTeam &copy; 2017-2018.</p>
     </Container>
diff --git a/src/components/pages/News.js b/src/components/pages/News.js
index 7bae89c..d160f29 100644
--- a/src/components/pages/News.js
+++ b/src/components/pages/News.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Container, Header, Segment, Divider } from 'semantic-ui-react';
+import { Container, Header, Segment, Divider,
+        List, Modal, Button, Image, Form, Input, TextArea, Checkbox, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 
 import { getNews } from '../../actions';
@@ -10,11 +11,36 @@ class News extends Component {
     this.props.getNews();
   }
 
+
+  render_add_news(){
+    return (
+    <Modal trigger={<Button >Add news</Button>}>
+    <Modal.Header>Select a Photo</Modal.Header>
+    <Modal.Content image>
+    <Form>
+      <Form.Field control={Input} label='Title' placeholder='Title' />
+      <Form.Field control={TextArea} label='Text' placeholder='Tell us what you wanr...' />
+      <Form.Field control={Checkbox} label='I agree to the Terms and Conditions' />
+    </Form>
+    </Modal.Content>
+    <Modal.Actions>
+       <Button basic color='red' >
+         <Icon name='remove' /> Cancel
+       </Button>
+       <Button color='green'>
+         <Icon name='checkmark' /> Add
+       </Button>
+     </Modal.Actions>
+  </Modal>
+
+);
+  }
+
   render_news() {
     const news = this.props.news;
 
     return news.map( (item, index) => (
-      <div key={index}>
+      <div key={index} id={index}>
         { index > 0 ? <Divider /> : ''}
         <Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header>
         <p style={{ fontSize: '1.33em' }}>{item.text}</p>
@@ -23,30 +49,55 @@ class News extends Component {
 
   }
 
+  render_sidebar() {
+    const news = this.props.news;
+
+    return news.map( (item, index) => (
+        <List.Item as='a' href={`#${index}`}>
+          <List.Icon name='align justify' verticalAlign={"middle"}/>
+          <List.Content>
+            <List.Header>
+              {item.title}
+            </List.Header>
+          </List.Content>
+        </List.Item>
+    ));
+
+  }
+
   render() {
+
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+      {/*  <Segment inverted textAlign='center' vertical>
           <Container>
             <Header
               as='h1'
               content='HĂ­rek'
               inverted
               style={{
-                fontSize: '3em',
+                fontSize: '2em',
                 fontWeight: 'normal',
                 marginBottom: 0,
-                marginTop: '0.5em',
+                marginTop: '0.2em',
+                padding: 0
               }}
             />
           </Container>
         </Segment>
+        */}
 
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Container text>
+        <Segment floated={'left'} style={{ padding: '3em 3em' }} vertical>
+          {this.render_add_news()}
+          <Container text textAlign = {'center'}>
             {this.render_news()}
           </Container>
         </Segment>
+        <Segment floated={'right'} style={{ padding: '1em 1em' }} vertical>
+          <List size={'big'} link divided>
+              {this.render_sidebar()}
+          </List>
+        </Segment>
       </div>
     );
   }
-- 
GitLab