Merge pull request #852 from ubyssey/851-filter-dropdown

flex wrap secondary header on small screens
ubyssey · Aug 8, 2018 · 8e988af · 8e988af
2 parents c2283cb + 9875ec8
commit 8e988af
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 18 deletions.
diff --git a/dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js b/dispatch/static/manager/src/js/components/ItemList/ItemListHeader.js
@@ -34,7 +34,13 @@ export default function ItemListHeader(props) {
         onConfirm={() => props.actions.deleteItems(props.items.selected)}
         disabled={!props.items.selected.length}>Delete</ConfirmButton>
       <div className='c-item-list__header__filters'>
-        {props.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>
       {props.toolbarContent}
     </div>

diff --git a/dispatch/static/manager/src/js/components/inputs/filters/AuthorFilterInput.js b/dispatch/static/manager/src/js/components/inputs/filters/AuthorFilterInput.js
@@ -17,14 +17,14 @@ class AuthorFilterInputComponent extends React.Component {
     this.props.listPersons(this.props.token, queryObj)
   }
   //converts tags from string to number
-  convertTags(tags) {
+  convertSelected(tags) {
     return typeof tags === 'undefined' ? tags : (typeof tags === 'object' ? tags.map(Number) : Number(tags))
   }
 
   render() {
     return (
       <FilterSelectInput
-        selected={this.convertTags(this.props.selected)}
+        selected={this.convertSelected(this.props.selected)}
         many={false}
         results={this.props.persons}
         entities={this.props.entities.persons}

diff --git a/dispatch/static/manager/src/js/components/inputs/filters/SectionFilterInput.js b/dispatch/static/manager/src/js/components/inputs/filters/SectionFilterInput.js
@@ -16,11 +16,15 @@ class SectionFilterInputComponent extends React.Component {
 
     this.props.listSections(this.props.token, queryObj)
   }
+  //converts tags from string to number
+  convertSelected(tags) {
+    return typeof tags === 'undefined' ? tags : (typeof tags === 'object' ? tags.map(Number) : Number(tags))
+  }
 
   render() {
     return (
       <FilterSelectInput
-        selected={this.props.selected}
+        selected={this.convertSelected(this.props.selected)}
         results={this.props.sections}
         entities={this.props.entities.sections}
         update={(selected) => this.props.update(selected)}

diff --git a/dispatch/static/manager/src/js/components/inputs/filters/TagsFilterInput.js b/dispatch/static/manager/src/js/components/inputs/filters/TagsFilterInput.js
@@ -8,7 +8,7 @@ import tagsActions from '../../../actions/TagsActions'
 class TagsFilterInputComponent extends React.Component {
 
   // converts query of string type to number type
-  convertTags(tags) {
+  convertSelected(tags) {
     return typeof tags === 'undefined' ? tags : (typeof tags === 'object' ? tags.map(Number) : Number(tags))
   }
 
@@ -26,7 +26,7 @@ class TagsFilterInputComponent extends React.Component {
     return (
       <FilterSelectInput
         many={true}
-        selected={this.convertTags(this.props.selected)}
+        selected={this.convertSelected(this.props.selected)}
         results={this.props.tags}
         entities={this.props.entities.tags}
         update={(selected) => this.props.update(selected)}

diff --git a/dispatch/static/manager/src/styles/components/article_editor.scss b/dispatch/static/manager/src/styles/components/article_editor.scss
@@ -39,10 +39,6 @@
 .c-article-editor__toolbar__article-buttons {
   // Structure
   flex: 1;
-
-  .pt-button {
-    margin-right: 0.75rem;
-  }
 }
 
 .c-article-editor__toolbar__breaking {

diff --git a/dispatch/static/manager/src/styles/components/header.scss b/dispatch/static/manager/src/styles/components/header.scss
@@ -155,14 +155,18 @@ $border-bottom-height: 2px;
       justify-content: center;
       // Dimension
       height: 100%;
-      width: 140px;
+      width: 110px;
       // Position
       position: relative;
       // Border
       border-bottom: $border-bottom-height solid transparent;
+
+      transition: .2s width;
+
       &:hover {
         // Border
         border-bottom: $border-bottom-height solid $color-text-dispatch-gray-light;
+        width: 140px;
       }
 
       .nav-dropdown-content {

diff --git a/dispatch/static/manager/src/styles/components/inputs.scss b/dispatch/static/manager/src/styles/components/inputs.scss
@@ -15,7 +15,6 @@
 .c-input--item-select {
   // Text
   font-weight: $font-weight-semi-bold;
-  margin-left: 12px;
 
   .pt-popover {
     // Structure
@@ -26,6 +25,14 @@
     // Structure
     display: block;
   }
+  .pt-control-group > :first-child {
+    width: 90px;
+    text-align: left;
+  }
+  .pt-control-group > :last-child {
+    width: 150px;
+    text-align: right;
+  }
 }
 
 .c-input--item-select__item {

diff --git a/dispatch/static/manager/src/styles/components/item_list.scss b/dispatch/static/manager/src/styles/components/item_list.scss
@@ -73,6 +73,7 @@
 // Component: ItemListHeader
 .c-item-list__header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
 
@@ -107,8 +108,35 @@
 
 .c-item-list__header__filters {
   // Structure
-  display: flex;
+  display: flex !important;
   flex-wrap: wrap;
+  position: relative;
+  width: 250px;
+
+  .c-item-list__header__filters__button {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .c-item-list__header__filters__dropdown {
+    position: absolute;
+    margin-top: 30px;
+    display: flex;
+    width: auto;
+    height: 0;
+    flex-direction: column;
+    overflow: hidden;
+    &:hover {
+      height: auto;
+    }
+  }
+  &:hover{
+    .c-item-list__header__filters__dropdown {
+      height: auto;
+    }
+  }
 }
 
 .c-item-list__header__filters__filter {

diff --git a/dispatch/static/manager/src/styles/components/toolbar.scss b/dispatch/static/manager/src/styles/components/toolbar.scss
@@ -4,7 +4,8 @@
 .c-toolbar {
   // Structure
   display: flex;
-  overflow: hidden;
+  flex-wrap: wrap;
+  overflow: visible;
   min-height: 50px;
   padding-left: 2rem;
   padding-right: 2rem;
@@ -40,11 +41,10 @@
   flex: 1;
 
   .pt-button:last-child {
-      // Structure
-      margin-right: 0.75rem;
-    }
+    // Structure
+    margin-right: 0.75rem;
   }
-
+}
 
 .c-toolbar__title {
   // Structure