From a8940036084d88eecf2dc727e6977bdb5d4bfe40 Mon Sep 17 00:00:00 2001
From: rowansdabomb <rowanskye@gmail.com>
Date: Thu, 9 Aug 2018 14:56:08 -0700
Subject: [PATCH 1/5] add mobile styling for article-sidebar

---
 .../ArticleEditor/ArticleSidebar.js           | 282 +++++++++++++-----
 .../ArticleEditor/MobileArticleSidebar.js     |  99 ++++++
 .../src/js/components/ArticleEditor/index.js  |   2 +-
 .../src/js/components/Header/MobileHeader.js  |   6 +-
 .../src/styles/components/article_editor.scss |   2 +-
 .../styles/components/article_sidebar.scss    |  40 ++-
 .../manager/src/styles/components/header.scss |   2 +-
 .../src/styles/components/toolbar.scss        |   1 +
 .../src/styles/utilities/_containers.scss     |   4 +
 9 files changed, 356 insertions(+), 82 deletions(-)
 create mode 100644 dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js

diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
index 0051dbd9b..324c14db3 100644
--- a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 
 import { Tabs, TabList, Tab, TabPanel } from '@blueprintjs/core'
 
@@ -8,6 +8,8 @@ import FeaturedImageTab from '../Editor/tabs/FeaturedImageTab'
 import DeliveryTab from '../Editor/tabs/DeliveryTab'
 import TemplateTab from '../Editor/tabs/TemplateTab'
 import SEOTab from '../Editor/tabs/SEOTab'
+import { desktopSize } from '../../util/helpers'
+// import MobileArticleSidebar from './MobileArticleSidebar'
 
 require('../../../styles/components/article_sidebar.scss')
 
@@ -44,82 +46,212 @@ const tabData = [
   }
 ]
 
-function tabHighlight(localErrors, errors) {
-  for (const error of localErrors) {
-    if (errors.includes(error)){
-      return 'c-article-sidebar__tab-error'
+// function tabHighlight(localErrors, errors) {
+//   for (const error of localErrors) {
+//     if (errors.includes(error)){
+//       return 'c-article-sidebar__tab-error'
+//     }
+//   }
+//   return ''
+// }
+
+// function renderTab(data, index, errors) {
+//   return <Tab key={index} className={'c-article-sidebar__tab ' + tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
+// }
+
+// function renderDesktopSidebar(props) {
+//   return (
+//     <div className='c-article-sidebar'>
+//       <Tabs>
+//         <TabList className='c-article-sidebar__tablist'>
+//           {tabData.map((data, index) => (renderTab(data, index, Object.keys(props.errors))))}
+//         </TabList>
+
+//         <TabPanel className='c-article-sidebar__panel'>
+//           <BasicFieldsTab
+//             update={props.update}
+//             section={props.article.section}
+//             authors={props.article.authors || []}
+//             tags={props.article.tags || []}
+//             topic={props.article.topic}
+//             slug={props.article.slug}
+//             snippet={props.article.snippet}
+//             errors={props.errors} />
+//         </TabPanel>
+
+//         <TabPanel className='c-article-sidebar__panel'>
+//           <FeaturedImageTab
+//             update={props.update}
+//             featured_image={props.article.featured_image}
+//             entities={props.entities} />
+//         </TabPanel>
+
+//         {/* uncomment when featured videos are ready */}
+//         {/* <TabPanel className='c-article-sidebar__panel'>
+//           <FeaturedVideoTab
+//             update={props.update}
+//             featured_video={props.article.featured_video}
+//             entities={props.entities} />
+//         </TabPanel> */}
+
+//         <TabPanel className='c-article-sidebar__panel'>
+//           <DeliveryTab
+//             update={props.update}
+//             importance={props.article.importance}
+//             reading_time={props.article.reading_time}
+//             integrations={props.article.integrations}
+//             is_breaking={props.article.is_breaking}
+//             breaking_timeout={props.article.breaking_timeout}
+//             availableIntegrations={props.integrations} />
+//         </TabPanel>
+
+//         <TabPanel className='c-article-sidebar__panel'>
+//           <TemplateTab
+//             update={props.update}
+//             template={props.article.template || 'default'}
+//             data={props.article.template_data || {}}
+//             errors={props.errors} />
+//         </TabPanel>
+
+//         <TabPanel className='c-article-sidebar__panel'>
+//           <SEOTab
+//             update={props.updfunction tabHighlight(localErrors, errors) {
+//   for (const error of localErrors) {
+//     if (errors.includes(error)){
+//       return 'c-article-sidebar__tab-error'
+//     }
+//   }
+//   return ''
+// }
+
+// function renderTab(data, index, errors) {
+//   return <Tab key={index} className={'c-article-sidebar__tab ' + tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
+// }ate}
+//             headline={props.article.headline}
+//             slug={props.article.slug}
+//             seo_keyword={props.article.seo_keyword || ''}
+//             seo_description={props.article.seo_description || ''} />
+//         </TabPanel>
+//       </Tabs>
+//     </div>
+//   )
+// }
+
+class ArticleSidebar extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isOpen: false
     }
   }
-  return ''
-}
 
-function renderTab(data, index, errors) {
-  return <Tab key={index} className={'c-article-sidebar__tab ' + tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
-}
+  tabHighlight(localErrors, errors) {
+    for (const error of localErrors) {
+      if (errors.includes(error)){
+        return 'c-article-sidebar__tab-error'
+      }
+    }
+    return ''
+  }
+
+  renderTab(data, index, errors) {
+    return <Tab key={index} className={'c-article-sidebar__tab ' + this.tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
+  }
 
-export default function ArticleSidebar(props) {
-  return (
-    <div className='c-article-sidebar'>
-      <Tabs>
-        <TabList className='c-article-sidebar__tablist'>
-          {tabData.map((data, index) => (renderTab(data, index, Object.keys(props.errors))))}
-        </TabList>
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <BasicFieldsTab
-            update={props.update}
-            section={props.article.section}
-            authors={props.article.authors || []}
-            tags={props.article.tags || []}
-            topic={props.article.topic}
-            slug={props.article.slug}
-            snippet={props.article.snippet}
-            errors={props.errors} />
-        </TabPanel>
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <FeaturedImageTab
-            update={props.update}
-            featured_image={props.article.featured_image}
-            entities={props.entities} />
-        </TabPanel>
-
-        {/* uncomment when featured videos are ready */}
-        {/* <TabPanel className='c-article-sidebar__panel'>
-          <FeaturedVideoTab
-            update={props.update}
-            featured_video={props.article.featured_video}
-            entities={props.entities} />
-        </TabPanel> */}
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <DeliveryTab
-            update={props.update}
-            importance={props.article.importance}
-            reading_time={props.article.reading_time}
-            integrations={props.article.integrations}
-            is_breaking={props.article.is_breaking}
-            breaking_timeout={props.article.breaking_timeout}
-            availableIntegrations={props.integrations} />
-        </TabPanel>
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <TemplateTab
-            update={props.update}
-            template={props.article.template || 'default'}
-            data={props.article.template_data || {}}
-            errors={props.errors} />
-        </TabPanel>
-
-        <TabPanel className='c-article-sidebar__panel'>
-          <SEOTab
-            update={props.update}
-            headline={props.article.headline}
-            slug={props.article.slug}
-            seo_keyword={props.article.seo_keyword || ''}
-            seo_description={props.article.seo_description || ''} />
-        </TabPanel>
-      </Tabs>
-    </div>
-  )
+  renderSideBar() {
+    return (
+      <div>
+        <Tabs>
+          <TabList className='c-article-sidebar__tablist'>
+            {tabData.map((data, index) => (this.renderTab(data, index, Object.keys(this.props.errors))))}
+          </TabList>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <BasicFieldsTab
+              update={this.props.update}
+              section={this.props.article.section}
+              authors={this.props.article.authors || []}
+              tags={this.props.article.tags || []}
+              topic={this.props.article.topic}
+              slug={this.props.article.slug}
+              snippet={this.props.article.snippet}
+              errors={this.props.errors} />
+          </TabPanel>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <FeaturedImageTab
+              update={this.props.update}
+              featured_image={this.props.article.featured_image}
+              entities={this.props.entities} />
+          </TabPanel>
+  
+          {/* uncomment when featured videos are ready */}
+          {/* <TabPanel className='c-article-sidebar__panel'>
+            <FeaturedVideoTab
+              update={this.props.update}
+              featured_video={this.props.article.featured_video}
+              entities={this.props.entities} />
+          </TabPanel> */}
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <DeliveryTab
+              update={this.props.update}
+              importance={this.props.article.importance}
+              reading_time={this.props.article.reading_time}
+              integrations={this.props.article.integrations}
+              is_breaking={this.props.article.is_breaking}
+              breaking_timeout={this.props.article.breaking_timeout}
+              availableIntegrations={this.props.integrations} />
+          </TabPanel>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <TemplateTab
+              update={this.props.update}
+              template={this.props.article.template || 'default'}
+              data={this.props.article.template_data || {}}
+              errors={this.props.errors} />
+          </TabPanel>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <SEOTab
+              update={this.props.update}
+              headline={this.props.article.headline}
+              slug={this.props.article.slug}
+              seo_keyword={this.props.article.seo_keyword || ''}
+              seo_description={this.props.article.seo_description || ''} />
+          </TabPanel>
+        </Tabs>
+      </div>
+    )
+  }
+  
+  render () {
+    const isDesktop = window.document.body.clientWidth > desktopSize 
+    const open = isDesktop ? '' : (this.state.isOpen ? 'open': 'closed')
+    const sliderStyle = {
+      position: 'relative', 
+      left: '-42px', 
+      padding: '13px', 
+      backgroundColor: '#394b59', 
+      borderRadius: '0 0 0 10px',
+      color: 'white',
+      cursor: 'pointer'}
+    return (
+        <div className={'c-article-sidebar ' + open}>
+          { !isDesktop && <span 
+            onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
+            style={sliderStyle}
+            className='nav-padded pt-icon-standard pt-icon-menu' /> }
+          { this.renderSideBar() }
+        </div>
+    )
+  }
 }
+
+export default ArticleSidebar
+
+// export default function ArticleSidebar(props) {
+//   const windowWidth = window.document.body.clientWidth || window.innerWidth 
+//   return windowWidth > desktopSize ? renderDesktopSidebar(props): <MobileArticleSidebar renderTab={() => renderTab()} tabHighlight={() => tabHighlight()} tabData={tabData} />
+// }
diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js b/dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js
new file mode 100644
index 000000000..c4d0bd5bd
--- /dev/null
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+
+import { Tabs, TabList, TabPanel } from '@blueprintjs/core'
+
+import BasicFieldsTab from './tabs/BasicFieldsTab'
+import FeaturedImageTab from '../Editor/tabs/FeaturedImageTab'
+// import FeaturedVideoTab from '../Editor/tabs/FeaturedVideoTab'
+import DeliveryTab from '../Editor/tabs/DeliveryTab'
+import TemplateTab from '../Editor/tabs/TemplateTab'
+import SEOTab from '../Editor/tabs/SEOTab'
+
+class MobileArticleSidebar extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  renderSideBar(open) {
+    return (
+      <div className={'c-article-sidebar' + open}>
+        <Tabs>
+          <TabList className='c-article-sidebar__tablist'>
+            {this.props.tabData.map((data, index) => (this.props.renderTab(data, index, Object.keys(this.props.errors))))}
+          </TabList>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <BasicFieldsTab
+              update={this.props.update}
+              section={this.props.article.section}
+              authors={this.props.article.authors || []}
+              tags={this.props.article.tags || []}
+              topic={this.props.article.topic}
+              slug={this.props.article.slug}
+              snippet={this.props.article.snippet}
+              errors={this.props.errors} />
+          </TabPanel>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <FeaturedImageTab
+              update={this.props.update}
+              featured_image={this.props.article.featured_image}
+              entities={this.props.entities} />
+          </TabPanel>
+  
+          {/* uncomment when featured videos are ready */}
+          {/* <TabPanel className='c-article-sidebar__panel'>
+            <FeaturedVideoTab
+              update={this.props.update}
+              featured_video={this.props.article.featured_video}
+              entities={this.props.entities} />
+          </TabPanel> */}
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <DeliveryTab
+              update={this.props.update}
+              importance={this.props.article.importance}
+              reading_time={this.props.article.reading_time}
+              integrations={this.props.article.integrations}
+              is_breaking={this.props.article.is_breaking}
+              breaking_timeout={this.props.article.breaking_timeout}
+              availableIntegrations={this.props.integrations} />
+          </TabPanel>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <TemplateTab
+              update={this.props.update}
+              template={this.props.article.template || 'default'}
+              data={this.props.article.template_data || {}}
+              errors={this.props.errors} />
+          </TabPanel>
+  
+          <TabPanel className='c-article-sidebar__panel'>
+            <SEOTab
+              update={this.props.update}
+              headline={this.props.article.headline}
+              slug={this.props.article.slug}
+              seo_keyword={this.props.article.seo_keyword || ''}
+              seo_description={this.props.article.seo_description || ''} />
+          </TabPanel>
+        </Tabs>
+      </div>
+    )
+  }
+  
+  render () {
+    return (
+        <span 
+          onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
+          className='nav-padded pt-icon-standard pt-icon-menu '>
+        { this.state.isOpen ? this.renderSideBar('open'): this.renderSideBar('closed') }
+        </span>
+    )
+  }
+}
+
+export default MobileArticleSidebar
\ No newline at end of file
diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/index.js b/dispatch/static/manager/src/js/components/ArticleEditor/index.js
index 1ab8ee129..398153aa0 100644
--- a/dispatch/static/manager/src/js/components/ArticleEditor/index.js
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/index.js
@@ -155,7 +155,7 @@ class ArticleEditorComponent extends React.Component {
     }
 
     const title = this.props.isNew ? 'New article' : `Edit - ${article.headline}`
-
+    // window.addEventListener('resize', this.forceUpdate())
     return (
       <DocumentTitle title={title}>
         <div className='u-container-main'>
diff --git a/dispatch/static/manager/src/js/components/Header/MobileHeader.js b/dispatch/static/manager/src/js/components/Header/MobileHeader.js
index f82d11438..b95b345dc 100644
--- a/dispatch/static/manager/src/js/components/Header/MobileHeader.js
+++ b/dispatch/static/manager/src/js/components/Header/MobileHeader.js
@@ -9,16 +9,16 @@ class MobileHeader extends Component {
     super(props)
 
     this.state = {
-      slideOpen: false
+      isOpen: false
     }
   }
 
   render () {
-    const open = this.state.slideOpen ? 'open' : 'closed'
+    const open = this.state.isOpen ? 'open' : 'closed'
     return (
       <header className='c-header'>
         <span 
-          onClick={() => this.setState(prevstate => ({slideOpen: !prevstate.slideOpen}))}
+          onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
           className='nav-padded pt-icon-standard pt-icon-menu '>
           <div className={'nav-dropdown-content ' + open} >
             <div style={{display:'flex', flexDirection:'row', justifyContent:'space-around'}}>
diff --git a/dispatch/static/manager/src/styles/components/article_editor.scss b/dispatch/static/manager/src/styles/components/article_editor.scss
index 41baa6706..d2ee2ae25 100644
--- a/dispatch/static/manager/src/styles/components/article_editor.scss
+++ b/dispatch/static/manager/src/styles/components/article_editor.scss
@@ -63,12 +63,12 @@
 
 .c-article-editor {
   // Content panel
-
   flex: 1.4;
 
   background: white;
   height: 100%;
   overflow: auto;
+  z-index: 0;
 
   &.expanded {
     margin-right: 0;
diff --git a/dispatch/static/manager/src/styles/components/article_sidebar.scss b/dispatch/static/manager/src/styles/components/article_sidebar.scss
index 4e2e59fa3..af0b196b2 100644
--- a/dispatch/static/manager/src/styles/components/article_sidebar.scss
+++ b/dispatch/static/manager/src/styles/components/article_sidebar.scss
@@ -1,12 +1,36 @@
 @import '../utilities/fonts';
+@import '../utilities/variables';
 
 // Component: ArticleSidebar
 .c-article-sidebar {
   // Structure
   flex: 1;
+  max-width: calc(100% - 42px);
+  height: 100%;
+  @media($bp-larger-than-tablet) {
+    height: auto;
+    min-width: 500px;
+    max-width: 1000px;
+  }
 
   // Border
-  border-left: 1px solid rgb(228, 228, 228);
+  border-left: 1px solid #cfcfcf;
+
+  &.closed, &.open {
+    position: absolute;
+    background: white;
+    right: 0;
+    // Border
+    border-left: 1px solid #3e4c59;
+  }
+  &.closed {
+    transform: translateX(100%);
+    flex: none;
+  }
+  &.open {
+    transform: translateX(0);
+    flex: auto;
+  }
 
   &.expanded {
     right: -600px;
@@ -28,17 +52,25 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    position:relative;
+    top: -42px;
 
     .pt-tab:not(:last-of-type) {
       // Structure
       margin-right: 10px;
     }
+    @media ($bp-larger-than-tablet) {
+      position: initial;
+      top: 0;
+    }
   }
 }
 
 .c-article-sidebar__tablist.pt-tab-list {
   // Border
   border-bottom: 1px solid rgb(228, 228, 228);
+  // Flex
+  flex-wrap: wrap;
 }
 
 .c-article-sidebar__tab-error.pt-tab {
@@ -65,6 +97,12 @@
     // Text
     color: inherit;
   }
+
+  .pt-icon-standard-sidebar {
+    position: relative;
+    right: 24px;
+    top: 12px;
+  }
 }
 
 .c-article-sidebar__panel.pt-tab-panel {
diff --git a/dispatch/static/manager/src/styles/components/header.scss b/dispatch/static/manager/src/styles/components/header.scss
index 245bb989b..7955e4a53 100644
--- a/dispatch/static/manager/src/styles/components/header.scss
+++ b/dispatch/static/manager/src/styles/components/header.scss
@@ -50,7 +50,7 @@ $border-bottom-height: 2px;
   // Extra
   box-shadow: none;
   box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
-  z-index: $z-index-2;
+  z-index: 20;
   .pt-button:not([class*="pt-intent-"]), .pt-button[class*="pt-icon-"]::before {
     // Text
     color: $color-text-dispatch-gray-light;
diff --git a/dispatch/static/manager/src/styles/components/toolbar.scss b/dispatch/static/manager/src/styles/components/toolbar.scss
index 0d8cdb02e..271e442df 100644
--- a/dispatch/static/manager/src/styles/components/toolbar.scss
+++ b/dispatch/static/manager/src/styles/components/toolbar.scss
@@ -9,6 +9,7 @@
   min-height: 50px;
   padding-left: 2rem;
   padding-right: 2rem;
+  z-index: 100;
 
   // Border
   border-bottom: thin solid $color-border-gray;
diff --git a/dispatch/static/manager/src/styles/utilities/_containers.scss b/dispatch/static/manager/src/styles/utilities/_containers.scss
index 7e84b93ae..b9818b56f 100644
--- a/dispatch/static/manager/src/styles/utilities/_containers.scss
+++ b/dispatch/static/manager/src/styles/utilities/_containers.scss
@@ -12,6 +12,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  z-index: 0;
 }
 
 .u-container-main--row {
@@ -19,10 +20,13 @@
 }
 
 .u-container-editor {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 0;
 }
 
 .u-container-body {

From 44d8d6e3476d0f9613ce8d655b4326873fa911aa Mon Sep 17 00:00:00 2001
From: rowansdabomb <rowanskye@gmail.com>
Date: Fri, 10 Aug 2018 11:48:09 -0700
Subject: [PATCH 2/5] refactor of header fix sidebar render issues

---
 .../ArticleEditor/ArticleSidebar.js           | 97 +------------------
 .../src/js/components/ArticleEditor/index.js  |  1 -
 .../src/js/components/Header/Header.js        | 96 ++++++++++++------
 .../src/js/components/Header/MobileHeader.js  | 44 ---------
 .../src/js/containers/MainContainer.js        | 17 ++--
 dispatch/static/manager/src/js/store.js       | 18 ++--
 .../styles/components/article_sidebar.scss    |  3 +-
 7 files changed, 91 insertions(+), 185 deletions(-)
 delete mode 100644 dispatch/static/manager/src/js/components/Header/MobileHeader.js

diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
index 324c14db3..428b9015a 100644
--- a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
@@ -9,7 +9,6 @@ import DeliveryTab from '../Editor/tabs/DeliveryTab'
 import TemplateTab from '../Editor/tabs/TemplateTab'
 import SEOTab from '../Editor/tabs/SEOTab'
 import { desktopSize } from '../../util/helpers'
-// import MobileArticleSidebar from './MobileArticleSidebar'
 
 require('../../../styles/components/article_sidebar.scss')
 
@@ -46,97 +45,6 @@ const tabData = [
   }
 ]
 
-// function tabHighlight(localErrors, errors) {
-//   for (const error of localErrors) {
-//     if (errors.includes(error)){
-//       return 'c-article-sidebar__tab-error'
-//     }
-//   }
-//   return ''
-// }
-
-// function renderTab(data, index, errors) {
-//   return <Tab key={index} className={'c-article-sidebar__tab ' + tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
-// }
-
-// function renderDesktopSidebar(props) {
-//   return (
-//     <div className='c-article-sidebar'>
-//       <Tabs>
-//         <TabList className='c-article-sidebar__tablist'>
-//           {tabData.map((data, index) => (renderTab(data, index, Object.keys(props.errors))))}
-//         </TabList>
-
-//         <TabPanel className='c-article-sidebar__panel'>
-//           <BasicFieldsTab
-//             update={props.update}
-//             section={props.article.section}
-//             authors={props.article.authors || []}
-//             tags={props.article.tags || []}
-//             topic={props.article.topic}
-//             slug={props.article.slug}
-//             snippet={props.article.snippet}
-//             errors={props.errors} />
-//         </TabPanel>
-
-//         <TabPanel className='c-article-sidebar__panel'>
-//           <FeaturedImageTab
-//             update={props.update}
-//             featured_image={props.article.featured_image}
-//             entities={props.entities} />
-//         </TabPanel>
-
-//         {/* uncomment when featured videos are ready */}
-//         {/* <TabPanel className='c-article-sidebar__panel'>
-//           <FeaturedVideoTab
-//             update={props.update}
-//             featured_video={props.article.featured_video}
-//             entities={props.entities} />
-//         </TabPanel> */}
-
-//         <TabPanel className='c-article-sidebar__panel'>
-//           <DeliveryTab
-//             update={props.update}
-//             importance={props.article.importance}
-//             reading_time={props.article.reading_time}
-//             integrations={props.article.integrations}
-//             is_breaking={props.article.is_breaking}
-//             breaking_timeout={props.article.breaking_timeout}
-//             availableIntegrations={props.integrations} />
-//         </TabPanel>
-
-//         <TabPanel className='c-article-sidebar__panel'>
-//           <TemplateTab
-//             update={props.update}
-//             template={props.article.template || 'default'}
-//             data={props.article.template_data || {}}
-//             errors={props.errors} />
-//         </TabPanel>
-
-//         <TabPanel className='c-article-sidebar__panel'>
-//           <SEOTab
-//             update={props.updfunction tabHighlight(localErrors, errors) {
-//   for (const error of localErrors) {
-//     if (errors.includes(error)){
-//       return 'c-article-sidebar__tab-error'
-//     }
-//   }
-//   return ''
-// }
-
-// function renderTab(data, index, errors) {
-//   return <Tab key={index} className={'c-article-sidebar__tab ' + tabHighlight(data.errors, errors)}><span className={'pt-icon-standard ' + data.icon} />{data.title}</Tab>
-// }ate}
-//             headline={props.article.headline}
-//             slug={props.article.slug}
-//             seo_keyword={props.article.seo_keyword || ''}
-//             seo_description={props.article.seo_description || ''} />
-//         </TabPanel>
-//       </Tabs>
-//     </div>
-//   )
-// }
-
 class ArticleSidebar extends Component {
   constructor(props) {
     super(props)
@@ -230,7 +138,8 @@ class ArticleSidebar extends Component {
     const isDesktop = window.document.body.clientWidth > desktopSize 
     const open = isDesktop ? '' : (this.state.isOpen ? 'open': 'closed')
     const sliderStyle = {
-      position: 'relative', 
+      position: 'absolute', 
+      top: 0,
       left: '-42px', 
       padding: '13px', 
       backgroundColor: '#394b59', 
@@ -239,11 +148,11 @@ class ArticleSidebar extends Component {
       cursor: 'pointer'}
     return (
         <div className={'c-article-sidebar ' + open}>
+          { this.renderSideBar() }
           { !isDesktop && <span 
             onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
             style={sliderStyle}
             className='nav-padded pt-icon-standard pt-icon-menu' /> }
-          { this.renderSideBar() }
         </div>
     )
   }
diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/index.js b/dispatch/static/manager/src/js/components/ArticleEditor/index.js
index 398153aa0..314362196 100644
--- a/dispatch/static/manager/src/js/components/ArticleEditor/index.js
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/index.js
@@ -155,7 +155,6 @@ class ArticleEditorComponent extends React.Component {
     }
 
     const title = this.props.isNew ? 'New article' : `Edit - ${article.headline}`
-    // window.addEventListener('resize', this.forceUpdate())
     return (
       <DocumentTitle title={title}>
         <div className='u-container-main'>
diff --git a/dispatch/static/manager/src/js/components/Header/Header.js b/dispatch/static/manager/src/js/components/Header/Header.js
index f89e22dfa..ec30ffb28 100644
--- a/dispatch/static/manager/src/js/components/Header/Header.js
+++ b/dispatch/static/manager/src/js/components/Header/Header.js
@@ -2,40 +2,82 @@ import React from 'react'
 import { Link } from 'react-router'
 import LoadingBar from 'react-redux-loading-bar'
 import HeaderButtons from './HeaderButtons'
-import MobileHeader from './MobileHeader'
+import MobileHeaderButtons from './MobileHeaderButtons'
 import { desktopSize } from '../../util/helpers'
 
 require('../../../styles/components/header.scss')
 require('../../../styles/components/loading_bar.scss')
 
-const renderLink = (url, classes, value) => {
-  return (
-    <div className='nav-padded'>
-      <Link to={url} className={'pt-button pt-minimal ' + classes}>{value}</Link>
-    </div>
-  )
-}
+class Header extends React.Component {
+  constructor(props) {
+    super(props)
 
-const DesktopHeader = () => {
-  return (
-    <header className='c-header'>
-      <div className={'row no-gutters'}>
-        <div className='col-10 flex-start'>
-          {renderLink('/', 'nav-logo pt-icon-selection', 'dispatch')}
-          <span className="pt-navbar-divider" />
-          <HeaderButtons />
-        </div>
-        <div className={'col-2 flex-end'}>
-          {renderLink('/profile/', 'pt-icon-user', '')}
-          {renderLink('/logout/', 'pt-icon-log-out', '')}
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  renderLink(url, classes, value) {
+    return (
+      <div className='nav-padded'>
+        <Link to={url} className={'pt-button pt-minimal ' + classes}>{value}</Link>
+      </div>
+    )
+  }
+
+  renderDesktopHeader() {
+    return (
+      <header className='c-header'>
+        <div className={'row no-gutters'}>
+          <div className='col-10 flex-start'>
+            {this.renderLink('/', 'nav-logo pt-icon-selection', 'dispatch')}
+            <span className="pt-navbar-divider" />
+            <HeaderButtons />
+          </div>
+          <div className={'col-2 flex-end'}>
+            {this.renderLink('/profile/', 'pt-icon-user', '')}
+            {this.renderLink('/logout/', 'pt-icon-log-out', '')}
+          </div>
         </div>
+        <LoadingBar className='c-loading-bar' />
+      </header>
+    )
+  }
+
+  renderMobileHeader() {
+    const open = this.state.isOpen ? 'open' : 'closed'
+    return (
+      <header className='c-header'>
+        <span 
+          onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
+          className='nav-padded pt-icon-standard pt-icon-menu '>
+          <div className={'nav-dropdown-content ' + open} >
+            <div style={{display:'flex', flexDirection:'row', justifyContent:'space-around'}}>
+              <div className='nav-padded'>
+                <Link to='/profile/' className="pt-button pt-minimal pt-icon-large pt-icon-user" />
+                <h3>Profile</h3>
+              </div>
+              <div className='nav-padded'>
+                <Link to='/logout/' className="pt-button pt-minimal pt-icon-large pt-icon-log-out" />
+                <h3>Logout</h3>
+              </div>
+            </div>
+            <MobileHeaderButtons />
+          </div>
+        </span>
+        <Link to='/' className='pt-button pt-minimal pt-icon-selection nav-logo'>dispatch</Link>
+        <span className='nav-padded pt-icon-standard pt-icon-blank ' />
+      </header>
+    )
+  }
+  
+  render() {
+    return (
+      <div>
+        { this.props.viewWidth > desktopSize ? this.renderDesktopHeader() : this.renderMobileHeader() }
       </div>
-      <LoadingBar className='c-loading-bar' />
-    </header>
-  )
+    )
+  }
 }
 
-export default function Header() {
-  const windowWidth = window.document.body.clientWidth || window.innerWidth 
-  return windowWidth > desktopSize ? DesktopHeader() : <MobileHeader />
-}
+export default Header
diff --git a/dispatch/static/manager/src/js/components/Header/MobileHeader.js b/dispatch/static/manager/src/js/components/Header/MobileHeader.js
deleted file mode 100644
index b95b345dc..000000000
--- a/dispatch/static/manager/src/js/components/Header/MobileHeader.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router'
-import MobileHeaderButtons from './MobileHeaderButtons'
-
-require('../../../styles/components/header.scss')
-
-class MobileHeader extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isOpen: false
-    }
-  }
-
-  render () {
-    const open = this.state.isOpen ? 'open' : 'closed'
-    return (
-      <header className='c-header'>
-        <span 
-          onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
-          className='nav-padded pt-icon-standard pt-icon-menu '>
-          <div className={'nav-dropdown-content ' + open} >
-            <div style={{display:'flex', flexDirection:'row', justifyContent:'space-around'}}>
-              <div className='nav-padded'>
-                <Link to='/profile/' className="pt-button pt-minimal pt-icon-large pt-icon-user" />
-                <h3>Profile</h3>
-              </div>
-              <div className='nav-padded'>
-                <Link to='/logout/' className="pt-button pt-minimal pt-icon-large pt-icon-log-out" />
-                <h3>Logout</h3>
-              </div>
-            </div>
-            <MobileHeaderButtons />
-          </div>
-        </span>
-        <Link to='/' className='pt-button pt-minimal pt-icon-selection nav-logo'>dispatch</Link>
-        <span className='nav-padded pt-icon-standard pt-icon-blank ' />
-      </header>
-    )
-  }
-}
-
-export default MobileHeader
\ No newline at end of file
diff --git a/dispatch/static/manager/src/js/containers/MainContainer.js b/dispatch/static/manager/src/js/containers/MainContainer.js
index 133e20b4e..22838d71b 100644
--- a/dispatch/static/manager/src/js/containers/MainContainer.js
+++ b/dispatch/static/manager/src/js/containers/MainContainer.js
@@ -14,13 +14,9 @@ require('../../styles/components/toaster.scss')
 class Main extends React.Component {
   constructor(props) {
     super(props)
-    this.state = { width: 0 }
+    this.state = { viewWidth: 0 }
     this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
   }
-  
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateWindowDimensions)
-  }
 
   componentDidMount() {
     this.props.setupToaster(this.refs.toaster)
@@ -28,8 +24,13 @@ class Main extends React.Component {
     window.addEventListener('resize', this.updateWindowDimensions)
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions)
+  }
+
   updateWindowDimensions() {
-    this.setState({ width: window.innerWidth })
+    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+    this.setState({ viewWidth: width })
   }
 
   renderModal() {
@@ -47,7 +48,7 @@ class Main extends React.Component {
           className='c-toaster'
           position={Position.TOP}
           ref='toaster' />
-        <Header pendingCount={this.props.pending} />
+        <Header viewWidth={this.state.viewWidth} />
         {this.props.children}
         {this.props.modal.component ? this.renderModal() : null}
       </div>
@@ -66,7 +67,7 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
   return {
     closeModal: () => {
-      dispatch(modalActions.closeModal())
+      dispatch(modalActions.clospropseModal())
     },
     setupToaster: (toaster) => {
       dispatch(toasterActions.setupToaster(toaster))
diff --git a/dispatch/static/manager/src/js/store.js b/dispatch/static/manager/src/js/store.js
index d00e80428..6cf285b37 100644
--- a/dispatch/static/manager/src/js/store.js
+++ b/dispatch/static/manager/src/js/store.js
@@ -25,15 +25,15 @@ let middleware = [
 
 let composeEnhancers = compose
 
-if (process.env.NODE_ENV == 'development') {
-  composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-  const loggerOptions = {
-    collapsed: true,
-    level: 'info'
-  }
-  const logger = require('redux-logger').createLogger(loggerOptions)
-  middleware = [...middleware, logger]
-}
+// if (process.env.NODE_ENV == 'development') {
+//   composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+//   const loggerOptions = {
+//     collapsed: true,
+//     level: 'info'
+//   }
+//   const logger = require('redux-logger').createLogger(loggerOptions)
+//   middleware = [...middleware, logger]
+// }
 
 export const store = createStore(
   combineReducers({
diff --git a/dispatch/static/manager/src/styles/components/article_sidebar.scss b/dispatch/static/manager/src/styles/components/article_sidebar.scss
index af0b196b2..1a9abe6e5 100644
--- a/dispatch/static/manager/src/styles/components/article_sidebar.scss
+++ b/dispatch/static/manager/src/styles/components/article_sidebar.scss
@@ -38,7 +38,7 @@
 
   // Extras
   box-shadow: rgba(0, 0, 0, 0.13) 0px 0px 5px;
-  transition: right 0.3s ease-in-out;
+  transition: right 0.3s ease-in-out, transform .25s;
 
   div.fieldset {
     div.col:first-child {
@@ -53,7 +53,6 @@
     flex-direction: column;
     height: 100%;
     position:relative;
-    top: -42px;
 
     .pt-tab:not(:last-of-type) {
       // Structure

From d7db202a65bf8c345fa9e13562ed7456afb826b0 Mon Sep 17 00:00:00 2001
From: rowansdabomb <rowanskye@gmail.com>
Date: Fri, 10 Aug 2018 12:26:42 -0700
Subject: [PATCH 3/5] fix linked list error refactor filter dropdown

---
 .../ArticleEditor/ArticleSidebar.js           |  9 +-
 .../ArticleEditor/MobileArticleSidebar.js     | 99 -------------------
 .../js/components/ItemList/ItemListHeader.js  | 11 +--
 .../inputs/filters/FilterDropdown.js          | 15 +++
 .../components/modals/ImageManager/index.js   | 21 ++--
 .../src/styles/components/image_manager.scss  |  3 +
 .../manager/src/styles/components/inputs.scss |  4 +-
 .../src/styles/components/item_list.scss      |  9 +-
 8 files changed, 44 insertions(+), 127 deletions(-)
 delete mode 100644 dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js
 create mode 100644 dispatch/static/manager/src/js/components/inputs/filters/FilterDropdown.js

diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
index 428b9015a..a87f33b0f 100644
--- a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
@@ -69,7 +69,7 @@ class ArticleSidebar extends Component {
 
   renderSideBar() {
     return (
-      <div>
+      <div style={{height: '100%'}}>
         <Tabs>
           <TabList className='c-article-sidebar__tablist'>
             {tabData.map((data, index) => (this.renderTab(data, index, Object.keys(this.props.errors))))}
@@ -158,9 +158,4 @@ class ArticleSidebar extends Component {
   }
 }
 
-export default ArticleSidebar
-
-// export default function ArticleSidebar(props) {
-//   const windowWidth = window.document.body.clientWidth || window.innerWidth 
-//   return windowWidth > desktopSize ? renderDesktopSidebar(props): <MobileArticleSidebar renderTab={() => renderTab()} tabHighlight={() => tabHighlight()} tabData={tabData} />
-// }
+export default ArticleSidebar
\ No newline at end of file
diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js b/dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js
deleted file mode 100644
index c4d0bd5bd..000000000
--- a/dispatch/static/manager/src/js/components/ArticleEditor/MobileArticleSidebar.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component } from 'react'
-
-import { Tabs, TabList, TabPanel } from '@blueprintjs/core'
-
-import BasicFieldsTab from './tabs/BasicFieldsTab'
-import FeaturedImageTab from '../Editor/tabs/FeaturedImageTab'
-// import FeaturedVideoTab from '../Editor/tabs/FeaturedVideoTab'
-import DeliveryTab from '../Editor/tabs/DeliveryTab'
-import TemplateTab from '../Editor/tabs/TemplateTab'
-import SEOTab from '../Editor/tabs/SEOTab'
-
-class MobileArticleSidebar extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isOpen: false
-    }
-  }
-
-  renderSideBar(open) {
-    return (
-      <div className={'c-article-sidebar' + open}>
-        <Tabs>
-          <TabList className='c-article-sidebar__tablist'>
-            {this.props.tabData.map((data, index) => (this.props.renderTab(data, index, Object.keys(this.props.errors))))}
-          </TabList>
-  
-          <TabPanel className='c-article-sidebar__panel'>
-            <BasicFieldsTab
-              update={this.props.update}
-              section={this.props.article.section}
-              authors={this.props.article.authors || []}
-              tags={this.props.article.tags || []}
-              topic={this.props.article.topic}
-              slug={this.props.article.slug}
-              snippet={this.props.article.snippet}
-              errors={this.props.errors} />
-          </TabPanel>
-  
-          <TabPanel className='c-article-sidebar__panel'>
-            <FeaturedImageTab
-              update={this.props.update}
-              featured_image={this.props.article.featured_image}
-              entities={this.props.entities} />
-          </TabPanel>
-  
-          {/* uncomment when featured videos are ready */}
-          {/* <TabPanel className='c-article-sidebar__panel'>
-            <FeaturedVideoTab
-              update={this.props.update}
-              featured_video={this.props.article.featured_video}
-              entities={this.props.entities} />
-          </TabPanel> */}
-  
-          <TabPanel className='c-article-sidebar__panel'>
-            <DeliveryTab
-              update={this.props.update}
-              importance={this.props.article.importance}
-              reading_time={this.props.article.reading_time}
-              integrations={this.props.article.integrations}
-              is_breaking={this.props.article.is_breaking}
-              breaking_timeout={this.props.article.breaking_timeout}
-              availableIntegrations={this.props.integrations} />
-          </TabPanel>
-  
-          <TabPanel className='c-article-sidebar__panel'>
-            <TemplateTab
-              update={this.props.update}
-              template={this.props.article.template || 'default'}
-              data={this.props.article.template_data || {}}
-              errors={this.props.errors} />
-          </TabPanel>
-  
-          <TabPanel className='c-article-sidebar__panel'>
-            <SEOTab
-              update={this.props.update}
-              headline={this.props.article.headline}
-              slug={this.props.article.slug}
-              seo_keyword={this.props.article.seo_keyword || ''}
-              seo_description={this.props.article.seo_description || ''} />
-          </TabPanel>
-        </Tabs>
-      </div>
-    )
-  }
-  
-  render () {
-    return (
-        <span 
-          onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
-          className='nav-padded pt-icon-standard pt-icon-menu '>
-        { this.state.isOpen ? this.renderSideBar('open'): this.renderSideBar('closed') }
-        </span>
-    )
-  }
-}
-
-export default MobileArticleSidebar
\ No newline at end of file
diff --git a/dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js b/dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js
index b6985c16f..c16766b16 100644
--- a/dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js
+++ b/dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js
@@ -5,6 +5,7 @@ import ConfirmButton from '../inputs/ConfirmButton'
 import { Toolbar, ToolbarLeft, ToolbarRight } from '../Toolbar'
 import ItemListPagination from './ItemListPagination'
 import ItemListSearchBar from './ItemListSearchBar'
+import FilterDropdown from '../inputs/filters/FilterDropdown'
 
 export default function ItemListHeader(props) {
 
@@ -33,15 +34,7 @@ export default function ItemListHeader(props) {
         className='c-item-list__header__delete'
         onConfirm={() => props.actions.deleteItems(props.items.selected)}
         disabled={!props.items.selected.length}>Delete</ConfirmButton>
-      <div className='c-item-list__header__filters'>
-        <div className='c-item-list__header__filters__button pt-button' style={{display: 'flex', alignItems: 'center'}}>
-          <h3>Filters</h3>
-          <span className='pt-icon-caret-down pt-icon-standard' />
-        </div>
-        <div className='c-item-list__header__filters__dropdown'>
-          {props.filters}
-        </div>
-      </div>
+      <FilterDropdown filters={props.filters} />
       {props.toolbarContent}
     </div>
   )
diff --git a/dispatch/static/manager/src/js/components/inputs/filters/FilterDropdown.js b/dispatch/static/manager/src/js/components/inputs/filters/FilterDropdown.js
new file mode 100644
index 000000000..b6aad3021
--- /dev/null
+++ b/dispatch/static/manager/src/js/components/inputs/filters/FilterDropdown.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export default function FilterDropdown(props) {
+  return (
+    <div className='c-item-list__header__filters'>
+      <div className='c-item-list__header__filters__button pt-button' style={{display: 'flex', alignItems: 'center'}}>
+        <h3>Filters</h3>
+        <span className='pt-icon-caret-down pt-icon-standard' />
+      </div>
+      <div className='c-item-list__header__filters__dropdown'>
+        {props.filters}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/dispatch/static/manager/src/js/components/modals/ImageManager/index.js b/dispatch/static/manager/src/js/components/modals/ImageManager/index.js
index 66a9b39c6..2c085af89 100644
--- a/dispatch/static/manager/src/js/components/modals/ImageManager/index.js
+++ b/dispatch/static/manager/src/js/components/modals/ImageManager/index.js
@@ -11,6 +11,7 @@ import imagesActions from '../../../actions/ImagesActions'
 import { TextInput } from '../../inputs'
 import ImageThumb from './ImageThumb'
 import ImagePanel from './ImagePanel'
+import FilterDropdown from '../../inputs/filters/FilterDropdown'
 
 require('../../../../styles/components/image_manager.scss')
 
@@ -142,6 +143,17 @@ class ImageManagerComponent extends React.Component {
         save={() => this.handleSave()}
         delete={() => this.handleDelete()} />
     )
+
+    const filters = [
+      <AuthorFilterInput
+        key={'AuthorFilter'}
+        selected={this.state.author || ''}
+        update={(author) => this.onSearch(author, this.state.tags, this.state.q)} />,
+      <TagsFilterInput
+        key={'tagsFilter'}
+        selected={this.state.tags || ''}
+        update={(tags) => this.onSearch(this.state.author, tags, this.state.q)} />
+    ]
     return (
       <div className='c-image-manager'>
         <div className='c-image-manager__header'>
@@ -149,14 +161,7 @@ class ImageManagerComponent extends React.Component {
             <AnchorButton
               intent={Intent.SUCCESS}
               onClick={() => this.dropzone.open()}>Upload</AnchorButton>
-            <AuthorFilterInput
-              key={'AuthorFilter'}
-              selected={this.state.author || ''}
-              update={(author) => this.onSearch(author, this.state.tags, this.state.q)} />
-            <TagsFilterInput
-              key={'tagsFilter'}
-              selected={this.state.tags || ''}
-              update={(tags) => this.onSearch(this.state.author, tags, this.state.q)} />
+            <FilterDropdown filters={filters} />
           </div>
           <div className='c-image-manager__header__right'>
             <TextInput
diff --git a/dispatch/static/manager/src/styles/components/image_manager.scss b/dispatch/static/manager/src/styles/components/image_manager.scss
index a032424d6..3a4dfbeb7 100644
--- a/dispatch/static/manager/src/styles/components/image_manager.scss
+++ b/dispatch/static/manager/src/styles/components/image_manager.scss
@@ -24,6 +24,7 @@ $image-manager-footer-box-shadow: rgba(0,0,0,0.05) 0px -1px 1px;
 
   // Extras
   box-shadow: $image-manager-header-box-shadow;
+  z-index: 10;
 }
 
 .c-image-manager__footer {
@@ -52,6 +53,7 @@ $image-manager-footer-box-shadow: rgba(0,0,0,0.05) 0px -1px 1px;
 .c-image-manager__header__left {
   // Structure
   flex: 1;
+  flex-wrap: wrap;
   display: flex;
   align-items: center;
 }
@@ -62,6 +64,7 @@ $image-manager-footer-box-shadow: rgba(0,0,0,0.05) 0px -1px 1px;
   flex: 1;
   min-width: 0;
   min-height: 0;
+  z-index: 0;
 }
 
 .c-image-manager__images {
diff --git a/dispatch/static/manager/src/styles/components/inputs.scss b/dispatch/static/manager/src/styles/components/inputs.scss
index a0e0190ba..82d4fc8ea 100644
--- a/dispatch/static/manager/src/styles/components/inputs.scss
+++ b/dispatch/static/manager/src/styles/components/inputs.scss
@@ -26,11 +26,11 @@
     display: block;
   }
   .pt-control-group > :first-child {
-    width: 90px;
+    width: 35%;
     text-align: left;
   }
   .pt-control-group > :last-child {
-    width: 150px;
+    width: 65%;
     text-align: right;
   }
 }
diff --git a/dispatch/static/manager/src/styles/components/item_list.scss b/dispatch/static/manager/src/styles/components/item_list.scss
index f8f4e66fc..22000115c 100644
--- a/dispatch/static/manager/src/styles/components/item_list.scss
+++ b/dispatch/static/manager/src/styles/components/item_list.scss
@@ -10,6 +10,7 @@
   flex: 1;
   flex-direction: column;
   height: 100%;
+  z-index: 0;
 }
 
 // Component: ItemListTable
@@ -111,20 +112,24 @@
   display: flex !important;
   flex-wrap: wrap;
   position: relative;
-  width: 250px;
+  width: 280px;
 
   .c-item-list__header__filters__button {
     display: flex !important;
     align-items: center;
     justify-content: space-between;
     width: 100%;
+
+    &.pt-button {
+      margin: 0;
+    }
   }
 
   .c-item-list__header__filters__dropdown {
     position: absolute;
     margin-top: 30px;
     display: flex;
-    width: auto;
+    width: 100%;
     height: 0;
     flex-direction: column;
     overflow: hidden;

From 1364292ed3b7d839c4628379ffa48145995686a7 Mon Sep 17 00:00:00 2001
From: rowansdabomb <rowanskye@gmail.com>
Date: Fri, 10 Aug 2018 12:32:17 -0700
Subject: [PATCH 4/5] code cleanup

---
 .../js/components/modals/ImageManager/index.js |  1 +
 dispatch/static/manager/src/js/store.js        | 18 +++++++++---------
 .../src/styles/components/article_sidebar.scss |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/dispatch/static/manager/src/js/components/modals/ImageManager/index.js b/dispatch/static/manager/src/js/components/modals/ImageManager/index.js
index 2c085af89..8d985ee8a 100644
--- a/dispatch/static/manager/src/js/components/modals/ImageManager/index.js
+++ b/dispatch/static/manager/src/js/components/modals/ImageManager/index.js
@@ -154,6 +154,7 @@ class ImageManagerComponent extends React.Component {
         selected={this.state.tags || ''}
         update={(tags) => this.onSearch(this.state.author, tags, this.state.q)} />
     ]
+    
     return (
       <div className='c-image-manager'>
         <div className='c-image-manager__header'>
diff --git a/dispatch/static/manager/src/js/store.js b/dispatch/static/manager/src/js/store.js
index 6cf285b37..d00e80428 100644
--- a/dispatch/static/manager/src/js/store.js
+++ b/dispatch/static/manager/src/js/store.js
@@ -25,15 +25,15 @@ let middleware = [
 
 let composeEnhancers = compose
 
-// if (process.env.NODE_ENV == 'development') {
-//   composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-//   const loggerOptions = {
-//     collapsed: true,
-//     level: 'info'
-//   }
-//   const logger = require('redux-logger').createLogger(loggerOptions)
-//   middleware = [...middleware, logger]
-// }
+if (process.env.NODE_ENV == 'development') {
+  composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+  const loggerOptions = {
+    collapsed: true,
+    level: 'info'
+  }
+  const logger = require('redux-logger').createLogger(loggerOptions)
+  middleware = [...middleware, logger]
+}
 
 export const store = createStore(
   combineReducers({
diff --git a/dispatch/static/manager/src/styles/components/article_sidebar.scss b/dispatch/static/manager/src/styles/components/article_sidebar.scss
index 1a9abe6e5..90dd495a6 100644
--- a/dispatch/static/manager/src/styles/components/article_sidebar.scss
+++ b/dispatch/static/manager/src/styles/components/article_sidebar.scss
@@ -14,7 +14,7 @@
   }
 
   // Border
-  border-left: 1px solid #cfcfcf;
+  border-left: 1px solid rgb(228, 228, 228);
 
   &.closed, &.open {
     position: absolute;

From f6be71ea4b54a1a749054da4585053120516d897 Mon Sep 17 00:00:00 2001
From: rowansdabomb <rowanskye@gmail.com>
Date: Fri, 10 Aug 2018 14:37:36 -0700
Subject: [PATCH 5/5] move inline styles to stylesheet and code cleanup

---
 .../js/components/ArticleEditor/ArticleSidebar.js   | 10 +++++-----
 .../manager/src/js/components/PollEditor/Poll.js    |  4 ++--
 .../src/styles/components/article_sidebar.scss      | 13 +++++++++----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
index a87f33b0f..36343bace 100644
--- a/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
+++ b/dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 
 import { Tabs, TabList, Tab, TabPanel } from '@blueprintjs/core'
 
@@ -45,7 +45,7 @@ const tabData = [
   }
 ]
 
-class ArticleSidebar extends Component {
+class ArticleSidebar extends React.Component {
   constructor(props) {
     super(props)
 
@@ -56,7 +56,7 @@ class ArticleSidebar extends Component {
 
   tabHighlight(localErrors, errors) {
     for (const error of localErrors) {
-      if (errors.includes(error)){
+      if (errors.includes(error)) {
         return 'c-article-sidebar__tab-error'
       }
     }
@@ -145,14 +145,14 @@ class ArticleSidebar extends Component {
       backgroundColor: '#394b59', 
       borderRadius: '0 0 0 10px',
       color: 'white',
-      cursor: 'pointer'}
+      cursor: 'pointer' }
     return (
         <div className={'c-article-sidebar ' + open}>
           { this.renderSideBar() }
           { !isDesktop && <span 
             onClick={() => this.setState(prevstate => ({isOpen: !prevstate.isOpen}))}
             style={sliderStyle}
-            className='nav-padded pt-icon-standard pt-icon-menu' /> }
+            className='nav-padded pt-icon-standard pt-icon-sidebar pt-icon-menu' /> }
         </div>
     )
   }
diff --git a/dispatch/static/manager/src/js/components/PollEditor/Poll.js b/dispatch/static/manager/src/js/components/PollEditor/Poll.js
index 150768d2e..f312fe7f3 100644
--- a/dispatch/static/manager/src/js/components/PollEditor/Poll.js
+++ b/dispatch/static/manager/src/js/components/PollEditor/Poll.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Intent } from '@blueprintjs/core'
 
 require('../../../styles/components/poll.scss')
 
 const COLOR_OPACITY = .8
 
-class Poll extends Component {
+class Poll extends React.Component {
   constructor(props){
     super(props)
     this.state = {
diff --git a/dispatch/static/manager/src/styles/components/article_sidebar.scss b/dispatch/static/manager/src/styles/components/article_sidebar.scss
index 90dd495a6..e94de70ae 100644
--- a/dispatch/static/manager/src/styles/components/article_sidebar.scss
+++ b/dispatch/static/manager/src/styles/components/article_sidebar.scss
@@ -97,10 +97,15 @@
     color: inherit;
   }
 
-  .pt-icon-standard-sidebar {
-    position: relative;
-    right: 24px;
-    top: 12px;
+  .pt-icon-sidebar {
+    position: absolute; 
+    top: 0;
+    left: -42px;
+    padding: 13px; 
+    background-color: #394b59; 
+    border-radius: 0 0 0 10px;
+    color: white;
+    cursor: pointer
   }
 }