Select working

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -224,12 +224,13 @@ class Moderation extends Component {
           asset={asset}
           getModPath={getModPath}
           items={menuItems}
-          selectSort={this.props.setSortOrder}
-          sort={this.props.moderation.sortOrder}
           activeTab={activeTab}
         />
         <div className={cn(styles.container, 'talk-admin-moderation-container')}>
-          <ViewOptions />
+          <ViewOptions
+            selectSort={this.props.setSortOrder}
+            sort={this.props.moderation.sortOrder}
+          />
           <ModerationQueue
             key={`${activeTab}_${this.props.moderation.sortOrder}`}
             data={this.props.data}

client/coral-admin/src/routes/Moderation/components/ModerationMenu.css

@@ -7,12 +7,7 @@
   justify-content: space-between;
 }
 
-.tabBarPadding {
-  width: 150px;
-}
-
 .tab {
-  flex: 1;
   color: #BDBDBD;
   text-transform: capitalize;
   font-weight: 100;
@@ -22,9 +17,9 @@
   transition: color 200ms;
   padding: 0px 10px;
   margin-right: 20px;
+
   &:hover {
     color: white;
-    /*border-bottom: solid 2px #F36451;*/
     box-sizing: border-box;
   }
 }
@@ -48,55 +43,12 @@
   background: transparent !important;
 }
 
-.selectField {
-  position: relative;
-  width: 140px;
-  height: 36px;
-  top: 5px;
-  margin-right: 10px;
-  background: #FFF;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  bor
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-    border-bottom: 0px;
-  }
-
-  label {
-    top: -4px;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .tabIcon {
   position: relative;
   top: 3px;
   font-size: 16px;
 }
 
-
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
-}
+.tabBarContainer {
+  margin: 0 auto;
+}

client/coral-admin/src/routes/Moderation/components/ModerationMenu.js

@@ -2,26 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CountBadge from '../../../components/CountBadge';
 import styles from './ModerationMenu.css';
-import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 import cn from 'classnames';
 
-import t from 'coral-framework/services/i18n';
-
 const ModerationMenu = ({
   asset = {},
   items,
-  selectSort,
-  sort,
   getModPath,
   activeTab
 }) => {
   return (
     <div className="mdl-tabs">
-      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <div className={styles.tabBarPadding} />
-        <div>
+      <div className={cn('mdl-tabs__tab-bar', styles.tabBar, 'talk-admin-moderation-menu-tabbar')}>
+        <div className={cn(styles.tabBarContainer, 'talk-admin-moderation-menu-tabbar-container')}>
           {items.map((queue) =>
             <Link
               key={queue.key}
@@ -32,14 +26,6 @@ const ModerationMenu = ({
             </Link>
           )}
         </div>
-        <SelectField
-          className={styles.selectField}
-          label="Sort"
-          value={sort}
-          onChange={(sort) => selectSort(sort)}>
-          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
-        </SelectField>
       </div>
     </div>
   );
@@ -50,8 +36,6 @@ ModerationMenu.propTypes = {
   asset: PropTypes.shape({
     id: PropTypes.string
   }),
-  selectSort: PropTypes.func.isRequired,
-  sort: PropTypes.string.isRequired,
   getModPath: PropTypes.func.isRequired,
   activeTab: PropTypes.string.isRequired,
 };

client/coral-admin/src/routes/Moderation/components/ViewOptions.css

@@ -5,6 +5,9 @@
   width: 220px;
   position: absolute;
   padding: 0;
+  overflow: visible;
+  height: 144px;
+  min-height: auto;
   @media (--tablet) {
     width: 650px;
     margin: 0 auto;
@@ -33,3 +36,41 @@
 .viewOptionsItem {
   list-style: none;
 }
+
+.selectField {
+  position: relative;
+  width: 140px;
+  height: 36px;
+  top: 5px;
+  margin-right: 10px;
+  background: #7B7B7B;
+  color: white;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    font-size: 1rem;
+    border-bottom: 0px;
+    font-family: inherit;
+  }
+
+  label {
+    top: -4px;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}

client/coral-admin/src/routes/Moderation/components/ViewOptions.js

@@ -3,9 +3,17 @@ import PropTypes from 'prop-types';
 import styles from './ViewOptions.css';
 import {Card} from 'coral-ui';
 import cn from 'classnames';
+import {SelectField, Option} from 'react-mdl-selectfield';
+import t from 'coral-framework/services/i18n';
 
 class ViewOptions extends React.Component {
   render() {
+
+    const {
+      selectSort,
+      sort
+    } = this.props;
+
     return (
       <Card className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}>
         <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
@@ -15,6 +23,14 @@ class ViewOptions extends React.Component {
           <ul className={styles.viewOptionsList}>
             <li className={styles.viewOptionsItem}>
               Sort Comments
+              <SelectField
+                className={styles.selectField}
+                label="Sort"
+                value={sort}
+                onChange={(sort) => selectSort(sort)}>
+                <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
+                <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
+              </SelectField>
             </li>
           </ul>
         </div>
@@ -23,6 +39,9 @@ class ViewOptions extends React.Component {
   }
 }
 
-ViewOptions.propTypes = {};
+ViewOptions.propTypes = {
+  selectSort: PropTypes.func.isRequired,
+  sort: PropTypes.string.isRequired
+};
 
 export default ViewOptions;