From ffb1d7a491d8deff2bd091e60ee411153e3c712d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A1ssio=20Zen?= <cassiozen@gmail.com>
Date: Fri, 30 Sep 2016 19:51:12 -0300
Subject: [PATCH] UI small adjustments & refinments

---
 src/components/EntryListing.js                |  5 ++-
 src/components/UnpublishedListing.css         | 31 ++++++++++---------
 src/components/UnpublishedListing.js          |  6 ++--
 src/containers/App.css                        | 10 ++++++
 src/containers/App.js                         | 18 ++++++++---
 src/containers/CollectionPage.css             | 26 ++++++++--------
 src/containers/CollectionPage.js              |  2 +-
 .../editorialWorkflow/CollectionPageHOC.js    | 14 +++++----
 8 files changed, 67 insertions(+), 45 deletions(-)

diff --git a/src/components/EntryListing.js b/src/components/EntryListing.js
index 7ca45393..91239dc3 100644
--- a/src/components/EntryListing.js
+++ b/src/components/EntryListing.js
@@ -17,9 +17,8 @@ export default class EntryListing extends React.Component {
         { mq: '495px', columns: 2, gutter: 15 },
         { mq: '750px', columns: 3, gutter: 15 },
         { mq: '1005px', columns: 4, gutter: 15 },
-        { mq: '1260px', columns: 5, gutter: 15 },
-        { mq: '1515px', columns: 6, gutter: 15 },
-        { mq: '1770px', columns: 7, gutter: 15 },
+        { mq: '1515px', columns: 5, gutter: 15 },
+        { mq: '1770px', columns: 6, gutter: 15 },
       ]
     };
 
diff --git a/src/components/UnpublishedListing.css b/src/components/UnpublishedListing.css
index ebd7bcd6..8f70b85f 100644
--- a/src/components/UnpublishedListing.css
+++ b/src/components/UnpublishedListing.css
@@ -24,25 +24,26 @@
 
 .card {
   width: 100% !important;
-  margin: 7px 0;
+  margin: 7px 0 0 10px;
+  padding: 7px 0;
+}
 
-  & h2 {
-    font-size: 17px;
-    & small {
-      font-weight: normal;
-    }
+.cardHeading {
+  font-size: 17px;
+  & small {
+    font-weight: normal;
   }
+}
 
-  & p {
-    color: #555;
-    font-size: 12px;
-    margin-top: 5px;
-  }
+.cardText {
+  color: #555;
+  font-size: 12px;
+  margin-top: 5px;
+}
 
-  & button {
-    margin: 10px 10px 0 0;
-    float: right;
-  }
+.button {
+  margin: 10px 10px 0 0;
+  float: right;
 }
 
 
diff --git a/src/components/UnpublishedListing.js b/src/components/UnpublishedListing.js
index 91144c2f..e1c6070c 100644
--- a/src/components/UnpublishedListing.js
+++ b/src/components/UnpublishedListing.js
@@ -60,10 +60,10 @@ class UnpublishedListing extends React.Component {
             <DragSource key={slug} slug={slug} collection={collection} ownStatus={ownStatus}>
               <div className={styles.drag}>
                 <Card className={styles.card}>
-                  <h2><Link to={link}>{entry.getIn(['data', 'title'])}</Link> <small>by {author}</small></h2>
-                  <p>Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}</p>
+                  <span className={styles.cardHeading}><Link to={link}>{entry.getIn(['data', 'title'])}</Link> <small>by {author}</small></span>
+                  <p className={styles.cardText}>Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}</p>
                   {(ownStatus === status.last()) &&
-                    <button onClick={this.requestPublish.bind(this, collection, slug, status)}>Publish now</button>
+                    <button className={styles.button} onClick={this.requestPublish.bind(this, collection, slug, status)}>Publish now</button>
                   }
                 </Card>
               </div>
diff --git a/src/containers/App.css b/src/containers/App.css
index 8e02b0cd..7c0c10f0 100644
--- a/src/containers/App.css
+++ b/src/containers/App.css
@@ -4,7 +4,17 @@
 .nav {
   display: block;
   padding: 1rem;
+  & .heading {
+    border: none;
+  }
 }
 .main {
   padding-top: 54px;
 }
+
+.navDrawer {
+  max-width: 240px !important;
+  & .drawerContent {
+    max-width: 240px !important;
+  }
+}
diff --git a/src/containers/App.js b/src/containers/App.js
index b3a4079c..3a3aadf6 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -20,11 +20,20 @@ import styles from './App.css';
 class App extends React.Component {
 
   state = {
-    navDrawerIsVisible: false
+    navDrawerIsVisible: true
   }
 
   componentDidMount() {
     this.props.dispatch(loadConfig());
+    window.addEventListener('resize', this.closeDrawer);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.closeDrawer);
+  }
+
+  closeDrawer = () => {
+    this.setState({ navDrawerIsVisible: false });
   }
 
   configError(config) {
@@ -137,10 +146,11 @@ class App extends React.Component {
         <NavDrawer
             active={navDrawerIsVisible}
             scrollY
-            permanentAt="md"
+            permanentAt={navDrawerIsVisible && 'lg'}
+            theme={styles}
         >
           <nav className={styles.nav}>
-            <h1>Collections</h1>
+            <h1 className={styles.heading}>Collections</h1>
             <Navigation type='vertical'>
               {
                 collections.valueSeq().map(collection =>
@@ -164,7 +174,7 @@ class App extends React.Component {
               onCreateEntryClick={createNewEntryInCollection}
               toggleNavDrawer={this.toggleNavDrawer}
           />
-          <div className={`${styles.alignable} ${styles.main}`}>
+          <div className={styles.main}>
             {children}
           </div>
         </Panel>
diff --git a/src/containers/CollectionPage.css b/src/containers/CollectionPage.css
index a10ef3ce..b326573b 100644
--- a/src/containers/CollectionPage.css
+++ b/src/containers/CollectionPage.css
@@ -1,39 +1,39 @@
-.alignable {
-  margin: 0px auto;
+.root {
+  margin: auto;
 }
 
 @media (max-width: 749px) and (min-width: 495px) {
-  .alignable {
+  .root {
     width: 495px;
+    margin: auto;
   }
 }
 
 @media (max-width: 1004px) and (min-width: 750px) {
-  .alignable {
+  .root {
     width: 750px;
+    margin: auto;
   }
 }
 
-@media (max-width: 1259px) and (min-width: 1005px) {
-  .alignable {
+@media (max-width: 1514px) and (min-width: 1005px) {
+  .root {
     width: 1005px;
+    margin: auto;
   }
 }
 
-@media (max-width: 1514px) and (min-width: 1260px) {
-  .alignable {
-    width: 1260px;
-  }
-}
 
 @media (max-width: 1769px) and (min-width: 1515px) {
-  .alignable {
+  .root {
     width: 1515px;
+    margin: auto;
   }
 }
 
 @media (min-width: 1770px) {
-  .alignable {
+  .root {
     width: 1770px;
+    margin: auto;
   }
 }
diff --git a/src/containers/CollectionPage.js b/src/containers/CollectionPage.js
index 26dcbf79..fb2e199c 100644
--- a/src/containers/CollectionPage.js
+++ b/src/containers/CollectionPage.js
@@ -30,7 +30,7 @@ class DashboardPage extends React.Component {
     }
 
 
-    return <div className={styles.alignable}>
+    return <div className={styles.root}>
       {entries ?
         <EntryListing collection={collection} entries={entries}/>
         :
diff --git a/src/containers/editorialWorkflow/CollectionPageHOC.js b/src/containers/editorialWorkflow/CollectionPageHOC.js
index 6aeacb71..409755da 100644
--- a/src/containers/editorialWorkflow/CollectionPageHOC.js
+++ b/src/containers/editorialWorkflow/CollectionPageHOC.js
@@ -24,12 +24,14 @@ export default function CollectionPageHOC(CollectionPage) {
       if (!isEditorialWorkflow) return super.render();
 
       return (
-        <div className={styles.alignable}>
-          <UnpublishedListing
-              entries={unpublishedEntries}
-              handleChangeStatus={updateUnpublishedEntryStatus}
-              handlePublish={publishUnpublishedEntry}
-          />
+        <div>
+          <div className={styles.root}>
+            <UnpublishedListing
+                entries={unpublishedEntries}
+                handleChangeStatus={updateUnpublishedEntryStatus}
+                handlePublish={publishUnpublishedEntry}
+            />
+          </div>
           {super.render()}
         </div>
       );