From 4f14f2b1526e454ee49a95fcba9de8407f529aa3 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Sun, 13 Jan 2019 16:16:03 -0800
Subject: [PATCH] Clean up responsive collapsing

---
 components/ChecklistItem/index.js |  2 +-
 components/ChecklistItem/style.js | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/ChecklistItem/index.js b/components/ChecklistItem/index.js
index 79c0e89..c9fbeb1 100644
--- a/components/ChecklistItem/index.js
+++ b/components/ChecklistItem/index.js
@@ -58,7 +58,7 @@ class ChecklistItem extends React.Component<Props, State> {
     return (
       <Container>
         <Card isChecked={isChecked}>
-          <CardContent>
+          <CardContent isCollapsed={isCollapsed}>
             <CheckboxContainer onClick={this.handleSetChecked}>
               <Checkbox isChecked={isChecked} />
             </CheckboxContainer>
diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js
index 86aee3e..1c9bde5 100644
--- a/components/ChecklistItem/style.js
+++ b/components/ChecklistItem/style.js
@@ -14,7 +14,7 @@ export const CardContent = styled.div`
   width: 100%;
 
   @media (max-width: 768px) {
-    flex-direction: column;
+    flex-direction: ${props => (props.isCollapsed ? 'row' : 'column')};
   }
 `;
 
@@ -23,7 +23,9 @@ export const Title = styled.h3`
   font-weight: 500;
   color: ${theme.text.default};
   display: flex;
+  line-height: 1.2;
   justify-content: space-between;
+  align-items: center;
 `;
 
 export const Description = styled(Markdown)`
@@ -108,10 +110,12 @@ export const ResourceContent = styled.div`
   margin-top: 2px;
   padding-left: 16px;
   width: 100%;
+  justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
 
   @media (max-width: 768px) {
-    padding-left: 8px;
-    margin-top: 24px;
+    padding-left: ${props => (props.isCollapsed ? '16px' : '8px')};
+    margin-top: ${props => (props.isCollapsed ? '0px' : '24px')};
+    justify-content: ${props => (props.isCollapsed ? 'center' : 'flex-start')};
   }
 `;
 
@@ -317,8 +321,13 @@ export const Uncollapse = styled.span`
   line-height: 1;
   display: flex;
   align-items: center;
+  justify-content: center;
   margin-right: 8px;
 
+  @media (max-width: 768px) {
+    display: none;
+  }
+
   &:hover {
     color: ${theme.text.default};
     background: ${tint(theme.bg.wash, -4)};