Merge branch 'master' into class-properties-initializers

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 },
       ]
     };
 

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;
 }
 
 

src/components/UnpublishedListing.js

@@ -53,10 +53,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>

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;
+  }
+}

src/containers/App.js

@@ -20,7 +20,7 @@ import styles from './App.css';
 class App extends React.Component {
 
   state = {
-    navDrawerIsVisible: false
+    navDrawerIsVisible: true
   };
 
   componentDidMount() {
@@ -137,10 +137,11 @@ class App extends React.Component {
         <NavDrawer
             active={navDrawerIsVisible}
             scrollY
-            permanentAt="md"
+            permanentAt={navDrawerIsVisible ? 'lg' : null}
+            theme={styles}
         >
           <nav className={styles.nav}>
-            <h1>Collections</h1>
+            <h1 className={styles.heading}>Collections</h1>
             <Navigation type='vertical'>
               {
                 collections.valueSeq().map(collection =>
@@ -164,7 +165,7 @@ class App extends React.Component {
               onCreateEntryClick={createNewEntryInCollection}
               toggleNavDrawer={this.toggleNavDrawer}
           />
-          <div className={`${styles.alignable} ${styles.main}`}>
+          <div className={styles.main}>
             {children}
           </div>
         </Panel>

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;
   }
 }

src/containers/CollectionPage.js

@@ -37,7 +37,7 @@ class DashboardPage extends React.Component {
     }
 
 
-    return <div className={styles.alignable}>
+    return <div className={styles.root}>
       {entries ?
         <EntryListing collection={collection} entries={entries}/>
         :

src/containers/editorialWorkflow/CollectionPageHOC.js

@@ -29,12 +29,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>
       );