Easier to read code

jessekorzan · Apr 8, 2018 · 040624e · 040624e
1 parent 5e327c0
commit 040624e
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 176 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
diff --git a/build/index.html b/build/index.html
diff --git a/build/service-worker.js b/build/service-worker.js
diff --git a/build/static/css/main.913955f7.css b/build/static/css/main.913955f7.css
diff --git a/build/static/js/main.659335cb.js b/build/static/js/main.659335cb.js
diff --git a/build/static/js/main.659335cb.js.map b/build/static/js/main.659335cb.js.map
diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,25 @@ import './styles.css';
 //
 // kick ass out there, ppl 1:1
 
+const Card = (props) => 
+    <div className={(props.card === props.active) ? "card active" : "card"} onClick={()=>props.handleClickCard(props.card)}>
+        <div className="media"></div>
+        <div>
+            <h1>{ props.card.id }</h1>
+            <h2>{ props.card.title }</h2>
+            <p><strong>{ props.card.title }</strong>{ props.card.body }</p>
+        </div>
+    </div>
+
+const Layout = (props) => 
+    // Masonry layout of cards 
+    // column-count : X 
+    <div className={`layout + ${props.style}`} style={{"columnCount" : props.columns}}>
+        {props.cards.map( (card, index) => 
+            <Card key={index} card={card} active={props.active} handleClickCard={props.handleClickCard}/>
+        )}
+    </div>
+
 class App extends Component {
     constructor() {
         super();
@@ -90,26 +109,11 @@ class App extends Component {
                 <div className="layout--wrapper">
                     <div className="info">
                         <div>
-                            <h2>Card Order: <span>{ CARDS && CARDS.map( card => `${card.id} `) }</span></h2>
-                            <p>Layout using CSS <span>column-count</span> only &mdash; <a href="https://github.com/jessekorzan/masonry-css-js">GitHub</a></p>
+                            <h2>Card Array: { CARDS && CARDS.map( card => <span>{card.id}</span>) }</h2>
+                            <p>Layout using CSS <i>column-count</i> only &mdash; <a href="https://github.com/jessekorzan/masonry-css-js">GitHub</a></p>
                         </div>
                     </div>
-                    {
-                        // render "cards" to view
-                        CARDS &&
-                        <div className={`layout + ${this.state.layout}`} style={{"columnCount" : this.state.columns}}>
-                        {CARDS.map( (card, index) =>                         
-                            <div key={index} className={(card === this.state.cardActive) ? "card active" : "card"} onClick={()=>this.handleClickCard(card)}>
-                                <div className="media"></div>
-                                <div>
-                                    <h1>{ card.id }</h1>
-                                    <h2>{ card.title }</h2>
-                                    <p>{ card.body }{ card.title }</p>
-                                </div>
-                            </div>
-                        )}
-                        </div>
-                    }
+                    { CARDS && <Layout style={this.state.layout} columns={this.state.columns} cards={CARDS} active={this.state.cardActive} handleClickCard={this.handleClickCard} /> }
                 </div>
             </div>
         );

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
diff --git a/src/styles.css b/src/styles.css
@@ -62,11 +62,10 @@ nav {
     .layout.flex .card {
       width: 20%; }
   .layout.masonry {
-    column-count: 3;
+    column-count: 5;
     column-gap: 6.66667px; }
     .layout.masonry .card {
-      break-inside: avoid;
-      float: left; }
+      break-inside: avoid; }
     .layout.masonry .card:nth-child(6n+1) {
       clear: left; }
   .layout.single-column {
@@ -86,8 +85,16 @@ nav {
   .info * {
     margin: 8px 0 0; }
   .info span {
-    color: #c80722;
-    font-family: monospace; }
+    background: #fff;
+    border: #f5f3f3 solid 1px;
+    margin-right: 2px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    display: inline-block; }
 
 .card {
   position: relative;