Merge pull request #78 from nllerandi/Setup-grid-system#76

Setup grid system#76
nickllerandi · May 1, 2019 · 1cf5e0f · 1cf5e0f
2 parents d4ddd5e + 3f0dccc
commit 1cf5e0f
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 23 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -45,13 +45,23 @@ class App extends Component {
                     <div className="App">
                         <Navbar/>
                         <main>
-                            <Route exact path="/" component={Homepage}/>
-                            <Route exact path="/register" component={Register}/>
-                            <Route exact path="/login" component={Login}/>
-                            <Route exact path="/ask" component={Ask}/>
-                            <Route exact path="/questions/:id" component={Question}/>
-                            <Route exact path="/users/:id/:name" component={Profile}/>
-                            <Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
+                            <div className='mainbar'>
+                                <Route exact path="/" component={Homepage}/>
+                                <Route exact path="/register" component={Register}/>
+                                <Route exact path="/login" component={Login}/>
+                                <Route exact path="/ask" component={Ask}/>
+                                <Route exact path="/questions/:id" component={Question}/>
+                                <Route exact path="/users/:id/:name" component={Profile}/>
+                                <Route exact path="/users/:id/:name/edit" component={ProfileEdit}/>
+                            </div>
+                            <div className='sidebar'>
+                                <div className='ad ad--1'>
+                                    I'm an ad
+                                </div>
+                                <div className='ad ad--2'>
+                                    I'm also an ad
+                                </div>
+                            </div>
                         </main>
                         <Footer/>
                         <GlobalStyle/>

diff --git a/client/src/Global.js b/client/src/Global.js
@@ -1,29 +1,54 @@
 import {createGlobalStyle} from 'styled-components'
 import {normalize} from 'polished'
+import {elevation} from './utils'
 
 const GlobalStyle = createGlobalStyle`
     ${normalize()}
-    html {
-        box-sizing: border-box;
+
+    * {
+        margin: 0;
+        padding: 0;
     }
 
     *, *:before, *:after {
         box-sizing: inherit;
     }
 
+    html {
+        box-sizing: border-box;
+    }
+
     body {
-        margin: 0;
         padding: 90px 0 0;
         font-family: Arial, Helvetica, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
 
-    main {
+    .App {
         max-width: 1264px;
         width: 90%;
         height: 100%;
         margin: 0 auto;
+
+        .mainbar {
+            width: 75%;
+            float: left;
+        }
+
+        .sidebar {
+            width: 25%;
+            float: right;
+        }
+    }
+
+    .ad {
+        padding: 1rem;
+        margin: 1rem;
+        height: 11rem;
+        width: 15rem;
+        border: 1px solid #d6d9dc; 
+        ${elevation[1]};
     }
 `;
 

diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
@@ -20,8 +20,8 @@ class Homepage extends Component {
         const {questions} = this.props.questionReducer;
 
         return (
-            <div className="Landing">
-                <Heading>Recent Questions TEST</Heading>
+            <div className="RecentQuestions">
+                <Heading>Recent Questions</Heading>
                 <Link to="/ask">
                     <Button>Ask a Question</Button>
                 </Link>

diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js
@@ -1,8 +1,12 @@
 import React, {Component} from "react";
 import {Link} from "react-router-dom";
+import styled from 'styled-components'
 
-// Styled Components
-import {Card} from '../../elements'
+// Styled Components / Utils
+import {lighterblack, black, blue} from '../../utils'
+import {darken} from 'polished'
+
+// import {Card} from '../../elements'
 
 class AllQuestions extends Component {
     render() {
@@ -13,13 +17,27 @@ class AllQuestions extends Component {
                 {questions.map(question => {
                     return (
                         <Card key={question._id}>
-                            <Link to={`/questions/${question._id}`}>
-                                {question.title}
-                            </Link> -
-                            {question.user ? 
-                                <Link to={`/users/${question.user._id}/${question.user.name}`}> {question.user.name}</Link> :
-                                'User deleted profile :('
-                            }
+                            <div className='likes'>
+                                <div className='likes_value'>{question.likes.length}</div>
+                                <div>likes</div>
+                            </div>
+
+                            <div className='summary'>
+                                <h3>
+                                    <Link to={`/questions/${question._id}`}>
+                                        {question.title}
+                                    </Link>
+                                </h3>
+                                <div className='started'>
+                                    {question.user ? (
+                                        <Link to={`/users/${question.user._id}/${question.user.name}`}>
+                                            {question.user.name}
+                                        </Link>
+                                    ) :
+                                        'User deleted profile :('
+                                    }
+                                </div>
+                            </div>
                         </Card>
                     )
                 })}
@@ -28,4 +46,58 @@ class AllQuestions extends Component {
     }
 }
 
+const Card = styled.div`    
+    display: flex;
+    padding: 12px 8px;
+    border-bottom: 1px solid ${lighterblack};
+    color: ${black};
+
+    .likes {
+        padding-right: 30px;
+
+        &_value {
+            text-align: center;
+        }
+    }
+
+    .summary {
+        flex: 1 auto;
+        width: auto;
+        float: none;
+        margin: 0;
+        overflow: hidden;
+
+        h3 {
+            font-weight: 400;
+            margin: 0 0 .35em 0;
+            line-height: 1.3;
+
+            a {
+                text-decoration: none;
+                color: ${black};
+            }
+
+            a:hover {
+                color: ${blue}
+            }
+        }
+
+        .started {
+            width: auto;
+            line-height: inherit;
+            padding-top: 4px;
+            float: right;
+            
+            a {
+                text-decoration: none;
+                color: ${blue};
+                
+                &:hover {
+                    color: ${darken(0.2, blue)};
+                }
+            }
+        }
+    }
+`;
+
 export default AllQuestions;
diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -23,6 +23,10 @@ export const Button = styled.button`
 
 const SignUpButton = styled(Button)`
     background: ${green};
+    
+    &:hover {
+        background: ${darken(0.2, green)};
+    }
 `;
 
 Button.SignUp = SignUpButton;
diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js
@@ -1,4 +1,4 @@
-export const green = '#92EEC4'
+export const green = '#5EC5B6'
 export const blue = '#85DAEF'
 export const lightblue = '#8EEEEF'
 export const black = '#242729'