Merge branch 'master' of https://github.com/pure-js/local-microbloggi…

…ng-client

src/components/App.jsx

@@ -1,20 +1,23 @@
 import React, { Component } from 'react';
 import bootstrap from 'bootstrap/scss/bootstrap.scss';
 
+import Header from './Header';
 import Story from './Story';
 import CreateStory from './CreateStory';
 import posts from '../mock-posts';
-import styles from '../styles/main.scss';
+import styles from './App.scss';
 
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
       stories: posts,
+      form: false,
     };
 
     this.addStory = this.addStory.bind(this);
     this.deleteStory = this.deleteStory.bind(this);
+    this.showForm = this.showForm.bind(this);
   }
 
   addStory(story) {
@@ -31,22 +34,35 @@ class App extends Component {
     });
   }
 
+  showForm() {
+    this.setState({
+      form: true,
+    });
+  }
+
   render() {
+    let createForm = null;
+    if (this.state.form) {
+      createForm = <CreateStory addStory={this.addStory} />;
+    }
     return (
-      <div className="container">
-        <CreateStory addStory={this.addStory} />
-        <div className="card-columns js-news-list">
-          {this.state.stories.map(story => (
-            <Story
-              key={story.heading}
-              heading={story.heading}
-              body={story.body}
-              image={story.image}
-              timestamp={story.timestamp}
-              deleteStory={this.deleteStory}
-            />
-          ))}
-        </div>
+      <div>
+        <Header showForm={this.showForm} />
+        <main className="container">
+          {createForm}
+          <div className="card-columns">
+            {this.state.stories.map(story => (
+              <Story
+                key={story.heading}
+                heading={story.heading}
+                body={story.body}
+                image={story.image}
+                timestamp={story.timestamp}
+                deleteStory={this.deleteStory}
+              />
+            ))}
+          </div>
+        </main>
       </div>
     );
   }

src/components/App.scss

@@ -0,0 +1,21 @@
+.news-list {
+  display: grid;
+  //overflow: hidden;
+  //width: 100%;
+  //padding: 0 20px;
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  grid-template-columns: 33% 33% 33%;
+
+  @media screen and (min-width:768px) {
+    //column-count: 2;
+  }
+
+  @media screen and (min-width:992px) {
+    //column-count: 3;
+  }
+
+  @media screen and (min-width:1200px) {
+    //column-count: 4;
+  }
+}

src/components/CreateStory.jsx

@@ -73,7 +73,7 @@ class CreateStory extends Component {
               <input
                 placeholder="Your heading"
                 type="text"
-                className="form-control js-new-post__heading"
+                className="form-control"
                 value={this.state.heading}
                 onChange={this.handleHeadingChange}
               />
@@ -82,7 +82,7 @@ class CreateStory extends Component {
               <textarea
                 placeholder="Write something"
                 rows="3"
-                className="form-control js-new-post__main-text"
+                className="form-control"
                 value={this.state.body}
                 onChange={this.handleBodyChange}
               />

src/components/Header.jsx

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import bootstrap from 'bootstrap/scss/bootstrap.scss';
+import PropTypes from 'prop-types';
+import StoriesFeed from './Story';
+
+class Header extends Component {
+  render() {
+    return (
+      <nav className="navbar navbar-dark bg-dark">
+        <div className="container">
+          <a className="navbar-brand" href="#home">Local microblogging client</a>
+          <div>
+            <form className="form-inline my-2 my-lg-0">
+              <button
+                className="btn btn-outline-primary my-2 my-sm-0"
+                type="button"
+                onClick={this.props.showForm}
+              >New post
+              </button>
+            </form>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+}
+
+Header.propTypes = {
+  showForm: PropTypes.func.isRequired,
+};
+
+export default Header;

src/components/Story.jsx

@@ -16,7 +16,7 @@ class StoriesFeed extends Component {
     const date = datetime.toLocaleString('en-us', { day: 'numeric', month: 'long' });
 
     return (
-      <section className="card js-news-list__item">
+      <section className="card">
         <img className="card-img-top" src={this.props.image} alt="Card cap" />
         <div className="card-body">
           <h3 className="card-title">

src/index-template.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="utf-8">
   <title>Local microblogging client</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
 </head>