card redesign 908

nickllerandi · Jun 3, 2019 · 6081a8b · 6081a8b
1 parent 7dc4e6d
commit 6081a8b
Showing 1 changed file with 37 additions and 57 deletions.
diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js
@@ -14,28 +14,37 @@ class AllQuestions extends Component {
             <div className="AllQuestions">
                 {questions.map(question => {
                     return (
-                        <Card key={question._id}>
-                            <div className='likes'>
-                                <div className='likes_value'>{question.likes.length}</div>
-                                <div>likes</div>
-                            </div>
+                        <Card
+                            className='card' 
+                            key={question._id}
+                        >
+                            <h3 className='card__heading'>
+                                <Link to={`/questions/${question._id}`}>
+                                    {question.title}
+                                </Link>
+                            </h3> 
 
-                            <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}`}>
+                            <div className='card__user'>
+                                {question.user ? (
+                                    <Link to={`/users/${question.user._id}/${question.user.name}`}>
+                                        <button className='btn-inline'>
                                             {question.user.name}
-                                        </Link>
-                                    ) :
-                                        'User deleted profile :('
-                                    }
+                                        </button>
+                                    </Link>
+                                ) :
+                                    'User deleted profile :('
+                                }
+                            </div>
+
+                            <div className='card__rating'>
+                                <div className='card_rating-likes'>
+                                    {question.likes.length}
+                                </div>
+                                <div className='card_rating-answers'>
+                                    {question.answers.length}
                                 </div>
                             </div>
+
                         </Card>
                     )
                 })}
@@ -46,53 +55,24 @@ class AllQuestions extends Component {
 
 const Card = styled.div`    
     display: flex;
-    padding: 12px 8px;
-    border-bottom: 1px solid ${lighterblack};
-    color: ${black};
-
-    .likes {
-        padding-right: 30px;
+    
+    .card {
+        &__heading {
+            margin-right: auto;
+        }
 
-        &_value {
-            text-align: center;
+        &__user {
+            
         }
-    }
 
-    .summary {
-        flex: 1 auto;
-        width: auto;
-        float: none;
-        margin: 0;
-        overflow: hidden;
+        &__rating {
 
-        h3 {
-            font-weight: 400;
-            margin: 0 0 .35em 0;
-            line-height: 1.3;
+            &-likes {
 
-            a {
-                text-decoration: none;
-                color: ${black};
             }
 
-            a:hover {
-                color: ${primary}
-            }
-        }
+            &-answers {
 
-        .started {
-            width: auto;
-            line-height: inherit;
-            padding-top: 4px;
-            float: right;
-            
-            a {
-                text-decoration: none;
-                color: ${primary};
-                
-                &:hover {
-                    color: ${darken(0.2, primary)};
-                }
             }
         }
     }