Merge branch 'master' into markitup-react

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,8 +20,8 @@ import styles from './App.css';
 class App extends React.Component {
 
   state = {
-    navDrawerIsVisible: false
-  }
+    navDrawerIsVisible: true
+  };
 
   componentDidMount() {
     this.props.dispatch(loadConfig());
@@ -100,7 +100,7 @@ class App extends React.Component {
     this.setState({
       navDrawerIsVisible: !this.state.navDrawerIsVisible
     });
-  }
+  };
 
   render() {
     const { navDrawerIsVisible } = this.state;
@@ -135,18 +135,19 @@ class App extends React.Component {
     return (
       <Layout theme={styles}>
         <NavDrawer
-            active={navDrawerIsVisible}
-            scrollY
-            permanentAt="md"
+          active={navDrawerIsVisible}
+          scrollY
+          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 =>
                   <Link
-                      key={collection.get('name')}
-                      onClick={navigateToCollection.bind(this, collection.get('name'))}
+                    key={collection.get('name')}
+                    onClick={navigateToCollection.bind(this, collection.get('name'))}
                   >
                     {collection.get('label')}
                   </Link>
@@ -157,14 +158,14 @@ class App extends React.Component {
         </NavDrawer>
         <Panel scrollY>
           <AppHeader
-              collections={collections}
-              commands={commands}
-              defaultCommands={defaultCommands}
-              runCommand={runCommand}
-              onCreateEntryClick={createNewEntryInCollection}
-              toggleNavDrawer={this.toggleNavDrawer}
+            collections={collections}
+            commands={commands}
+            defaultCommands={defaultCommands}
+            runCommand={runCommand}
+            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

@@ -9,6 +9,13 @@ import styles from './CollectionPage.css';
 import CollectionPageHOC from './editorialWorkflow/CollectionPageHOC';
 
 class DashboardPage extends React.Component {
+  static propTypes = {
+    collection: ImmutablePropTypes.map.isRequired,
+    collections: ImmutablePropTypes.orderedMap.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    entries: ImmutablePropTypes.list,
+  };
+
   componentDidMount() {
     const { collection, dispatch } = this.props;
     if (collection) {
@@ -30,7 +37,7 @@ class DashboardPage extends React.Component {
     }
 
 
-    return <div className={styles.alignable}>
+    return <div className={styles.root}>
       {entries ?
         <EntryListing collection={collection} entries={entries}/>
         :
@@ -39,12 +46,6 @@ class DashboardPage extends React.Component {
     </div>;
   }
 }
-DashboardPage.propTypes = {
-  collection: ImmutablePropTypes.map.isRequired,
-  collections: ImmutablePropTypes.orderedMap.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  entries: ImmutablePropTypes.list,
-};
 
 /*
  * Instead of checking the publish mode everywhere to dispatch & render the additional editorial workflow stuff,

src/containers/EntryPage.js

@@ -15,11 +15,22 @@ import EntryEditor from '../components/EntryEditor/EntryEditor';
 import EntryPageHOC from './editorialWorkflow/EntryPageHOC';
 
 class EntryPage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.createDraft = this.createDraft.bind(this);
-    this.handlePersistEntry = this.handlePersistEntry.bind(this);
-  }
+  static propTypes = {
+    addMedia: PropTypes.func.isRequired,
+    boundGetMedia: PropTypes.func.isRequired,
+    changeDraft: PropTypes.func.isRequired,
+    collection: ImmutablePropTypes.map.isRequired,
+    createDraftFromEntry: PropTypes.func.isRequired,
+    createEmptyDraft: PropTypes.func.isRequired,
+    discardDraft: PropTypes.func.isRequired,
+    entry: ImmutablePropTypes.map,
+    entryDraft: ImmutablePropTypes.map.isRequired,
+    loadEntry: PropTypes.func.isRequired,
+    persistEntry: PropTypes.func.isRequired,
+    removeMedia: PropTypes.func.isRequired,
+    slug: PropTypes.string,
+    newEntry: PropTypes.bool.isRequired,
+  };
 
   componentDidMount() {
     if (!this.props.newEntry) {
@@ -45,13 +56,13 @@ class EntryPage extends React.Component {
     this.props.discardDraft();
   }
 
-  createDraft(entry) {
+  createDraft = entry => {
     if (entry) this.props.createDraftFromEntry(entry);
-  }
+  };
 
-  handlePersistEntry() {
+  handlePersistEntry = () => {
     this.props.persistEntry(this.props.collection, this.props.entryDraft);
-  }
+  };
 
   render() {
     const {
@@ -75,23 +86,6 @@ class EntryPage extends React.Component {
   }
 }
 
-EntryPage.propTypes = {
-  addMedia: PropTypes.func.isRequired,
-  boundGetMedia: PropTypes.func.isRequired,
-  changeDraft: PropTypes.func.isRequired,
-  collection: ImmutablePropTypes.map.isRequired,
-  createDraftFromEntry: PropTypes.func.isRequired,
-  createEmptyDraft: PropTypes.func.isRequired,
-  discardDraft: PropTypes.func.isRequired,
-  entry: ImmutablePropTypes.map,
-  entryDraft: ImmutablePropTypes.map.isRequired,
-  loadEntry: PropTypes.func.isRequired,
-  persistEntry: PropTypes.func.isRequired,
-  removeMedia: PropTypes.func.isRequired,
-  slug: PropTypes.string,
-  newEntry: PropTypes.bool.isRequired,
-};
-
 function mapStateToProps(state, ownProps) {
   const { collections, entryDraft } = state;
   const collection = collections.get(ownProps.params.name);

src/containers/editorialWorkflow/CollectionPageHOC.js

@@ -10,6 +10,11 @@ import styles from '../CollectionPage.css';
 
 export default function CollectionPageHOC(CollectionPage) {
   class CollectionPageHOC extends CollectionPage {
+    static propTypes = {
+      dispatch: PropTypes.func.isRequired,
+      isEditorialWorkflow: PropTypes.bool.isRequired,
+      unpublishedEntries: ImmutablePropTypes.map,
+    };
 
     componentDidMount() {
       const { dispatch, isEditorialWorkflow } = this.props;
@@ -24,24 +29,20 @@ export default function CollectionPageHOC(CollectionPage) {
       if (!isEditorialWorkflow) return super.render();
 
       return (
-        <div className={styles.alignable}>
-          <UnpublishedListing
+        <div>
+          <div className={styles.root}>
+            <UnpublishedListing
               entries={unpublishedEntries}
               handleChangeStatus={updateUnpublishedEntryStatus}
               handlePublish={publishUnpublishedEntry}
-          />
+            />
+          </div>
           {super.render()}
         </div>
       );
     }
   }
 
-  CollectionPageHOC.propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    isEditorialWorkflow: PropTypes.bool.isRequired,
-    unpublishedEntries: ImmutablePropTypes.map,
-  };
-
   function mapStateToProps(state) {
     const publish_mode = state.config.get('publish_mode');
     const isEditorialWorkflow = (publish_mode === EDITORIAL_WORKFLOW);