ViewingOptions, Cards, Proptypes and MediaQueries

client/coral-admin/src/components/ModerationKeysModal.css

@@ -21,7 +21,6 @@
 
 .callToAction {
   position: fixed;
-  left: 10px;
   bottom: 10px;
   width: 280px;
   height: 200px;

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

@@ -0,0 +1,13 @@
+@custom-media --desktop (max-width: 1280px);
+
+.container {
+  max-width: 1280px;
+  position: relative;
+  margin: 0 auto;
+
+  @media (--desktop) {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+

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

@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import key from 'keymaster';
-
+import cn from 'classnames';
+import styles from './Moderation.css';
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import StorySearch from '../containers/StorySearch';
 import Slot from 'coral-framework/components/Slot';
+import ViewOptions from './ViewOptions';
 
 class Moderation extends Component {
   constructor(props) {
@@ -226,41 +228,43 @@ class Moderation extends Component {
           sort={this.props.moderation.sortOrder}
           activeTab={activeTab}
         />
-        <ModerationQueue
-          key={`${activeTab}_${this.props.moderation.sortOrder}`}
-          data={this.props.data}
-          root={this.props.root}
-          currentAsset={asset}
-          comments={comments.nodes}
-          activeTab={activeTab}
-          singleView={moderation.singleView}
-          selectedCommentId={this.state.selectedCommentId}
-          bannedWords={settings.wordlist.banned}
-          suspectWords={settings.wordlist.suspect}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          acceptComment={props.acceptComment}
-          rejectComment={props.rejectComment}
-          loadMore={this.loadMore}
-          assetId={assetId}
-          sort={this.props.moderation.sortOrder}
-          commentCount={activeTabCount}
-          currentUserId={this.props.auth.user.id}
-          viewUserDetail={viewUserDetail}
-        />
-        <ModerationKeysModal
-          hideShortcutsNote={props.hideShortcutsNote}
-          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
-          open={moderation.modalOpen}
-          onClose={this.onClose}/>
-
+        <div className={cn(styles.container, 'talk-admin-moderation-container')}>
+          <ViewOptions />
+          <ModerationQueue
+            key={`${activeTab}_${this.props.moderation.sortOrder}`}
+            data={this.props.data}
+            root={this.props.root}
+            currentAsset={asset}
+            comments={comments.nodes}
+            activeTab={activeTab}
+            singleView={moderation.singleView}
+            selectedCommentId={this.state.selectedCommentId}
+            bannedWords={settings.wordlist.banned}
+            suspectWords={settings.wordlist.suspect}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment}
+            loadMore={this.loadMore}
+            assetId={assetId}
+            sort={this.props.moderation.sortOrder}
+            commentCount={activeTabCount}
+            currentUserId={this.props.auth.user.id}
+            viewUserDetail={viewUserDetail}
+          />
+          <ModerationKeysModal
+            hideShortcutsNote={props.hideShortcutsNote}
+            shortcutsNoteVisible={moderation.shortcutsNoteVisible}
+            open={moderation.modalOpen}
+            onClose={this.onClose}
+          />
+        </div>
         <StorySearch
           assetId={assetId}
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}
           storySearchChange={this.props.storySearchChange}
         />
-
         <Slot
           data={data}
           queryData={{root, asset}}

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

@@ -0,0 +1,35 @@
+@custom-media --tablet (max-width: 1024px);
+
+.viewOptions {
+  display: inline-block;
+  width: 220px;
+  position: absolute;
+  padding: 0;
+  @media (--tablet) {
+    width: 650px;
+    margin: 0 auto;
+    position: relative;
+    display: block;
+  }
+}
+
+.headline {
+  margin: 0;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  padding: 0 20px;
+}
+
+.viewOptionsContent {
+  padding: 10px 20px;
+}
+
+.viewOptionsList {
+  padding: 0;
+  margin: 0;
+  color: rgba(0,0,0,.54);
+}
+
+.viewOptionsItem {
+  list-style: none;
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ViewOptions.css';
+import {Card} from 'coral-ui';
+import cn from 'classnames';
+
+class ViewOptions extends React.Component {
+  render() {
+    return (
+      <Card className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}>
+        <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
+          View Options
+        </h2>
+        <div className={styles.viewOptionsContent}> 
+          <ul className={styles.viewOptionsList}>
+            <li className={styles.viewOptionsItem}>
+              Sort Comments
+            </li>
+          </ul>
+        </div>
+      </Card>
+    );
+  }
+}
+
+ViewOptions.propTypes = {};
+
+export default ViewOptions;

client/coral-ui/components/Card.css

@@ -30,5 +30,3 @@
 .shadow--3 {
   box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
 }
-
-

client/coral-ui/components/Card.js

@@ -1,8 +1,17 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Card.css';
 
-export default ({children, className, shadow = 2, ...props}) => (
+const Card = ({children, className, shadow = 2, ...props}) => (
   <div className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`} {...props}>
     {children}
   </div>
 );
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  shadow: PropTypes.number,
+};
+
+export default Card;