diff --git a/client/coral-admin/src/components/Drawer.css b/client/coral-admin/src/components/Drawer.css new file mode 100644 index 000000000..861d4074b --- /dev/null +++ b/client/coral-admin/src/components/Drawer.css @@ -0,0 +1,13 @@ +@custom-media --table-viewport (max-width: 1024px); + +:global { + .mdl-layout__drawer-button { + visibility: hidden; + } + + @media (--table-viewport) { + .mdl-layout__drawer-button { + visibility: visible; + } + } +} \ No newline at end of file diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/Drawer.js similarity index 90% rename from client/coral-admin/src/components/ui/Drawer.js rename to client/coral-admin/src/components/Drawer.js index 2b728a33a..0385b1773 100644 --- a/client/coral-admin/src/components/ui/Drawer.js +++ b/client/coral-admin/src/components/Drawer.js @@ -6,8 +6,8 @@ import styles from './Drawer.css'; import t from 'coral-framework/services/i18n'; import {can} from 'coral-framework/services/perms'; -const CoralDrawer = ({handleLogout, auth}) => ( - +const CoralDrawer = ({handleLogout, auth = {}}) => ( + { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
@@ -57,7 +57,8 @@ const CoralDrawer = ({handleLogout, auth}) => ( CoralDrawer.propTypes = { handleLogout: PropTypes.func.isRequired, - restricted: PropTypes.bool // hide app elements from a logged out user + restricted: PropTypes.bool, // hide app elements from a logged out user + auth: PropTypes.object }; export default CoralDrawer; diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css index 73697d930..6c7dc61e9 100644 --- a/client/coral-admin/src/components/ModerationKeysModal.css +++ b/client/coral-admin/src/components/ModerationKeysModal.css @@ -21,7 +21,6 @@ .callToAction { position: fixed; - left: 10px; bottom: 10px; width: 280px; height: 200px; @@ -29,6 +28,7 @@ padding: 15px; box-sizing: border-box; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15); + z-index: 10; .ctaHeader { font-size: 16px; diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css index 6458dc161..d88774c19 100644 --- a/client/coral-admin/src/components/ui/Header.css +++ b/client/coral-admin/src/components/ui/Header.css @@ -15,10 +15,16 @@ } } +.headerWrapper { + background-color: #696969; +} + .header { box-shadow: none; min-height: 58px; display: block; + max-width: 1280px; + margin: 0 auto; background-color: #696969; 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); } diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 30c5fa7e6..62f6a7fd1 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -15,93 +15,95 @@ const CoralHeader = ({ root }) => { return ( -
- -
- { - auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ? - - - {t('configure.dashboard')} - - { - can(auth.user, 'MODERATE_COMMENTS') && ( - - {t('configure.moderate')} - {(root.premodCount !== 0 || root.reportedCount !== 0) && } - - ) - } - - {t('configure.stories')} - +
+
+ +
+ { + auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ? + + + {t('configure.dashboard')} + + { + can(auth.user, 'MODERATE_COMMENTS') && ( + + {t('configure.moderate')} + {(root.premodCount !== 0 || root.reportedCount !== 0) && } + + ) + } + + {t('configure.stories')} + - - {t('configure.community')} - {root.flaggedUsernamesCount !== 0 && } - + + {t('configure.community')} + {root.flaggedUsernamesCount !== 0 && } + - { - can(auth.user, 'UPDATE_CONFIG') && ( - - {t('configure.configure')} - - ) - } - - : - null - } -
- + { + can(auth.user, 'UPDATE_CONFIG') && ( + + {t('configure.configure')} + + ) + } + + : + null + } +
+ +
-
-
+
+
); }; diff --git a/client/coral-admin/src/components/ui/Layout.css b/client/coral-admin/src/components/ui/Layout.css index 924c6ced7..ac13e96f7 100644 --- a/client/coral-admin/src/components/ui/Layout.css +++ b/client/coral-admin/src/components/ui/Layout.css @@ -1,4 +1,4 @@ .layout { - margin: 0 auto; - background-color: #FAFAFA; + margin: 0 auto; + background-color: #FAFAFA; } diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js index 9ee9fda9f..859191927 100644 --- a/client/coral-admin/src/components/ui/Layout.js +++ b/client/coral-admin/src/components/ui/Layout.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Layout as LayoutMDL} from 'react-mdl'; import Header from '../../containers/Header'; -import Drawer from './Drawer'; +import Drawer from '../Drawer'; import styles from './Layout.css'; const Layout = ({ @@ -21,6 +21,7 @@ const Layout = ({
{children} diff --git a/client/coral-admin/src/components/ui/Logo.css b/client/coral-admin/src/components/ui/Logo.css index 62a223683..767d91560 100644 --- a/client/coral-admin/src/components/ui/Logo.css +++ b/client/coral-admin/src/components/ui/Logo.css @@ -20,7 +20,6 @@ background: #696969; height: 100%; width: 128px; - z-index: 10; border-right: 1px #757575 solid; } diff --git a/client/coral-admin/src/routes/Configure/components/Configure.css b/client/coral-admin/src/routes/Configure/components/Configure.css index eae75caba..5faf41ba2 100644 --- a/client/coral-admin/src/routes/Configure/components/Configure.css +++ b/client/coral-admin/src/routes/Configure/components/Configure.css @@ -6,6 +6,8 @@ max-width: 1280px; margin: 0 auto; display: flex; + max-width: 1280px; + margin: 0 auto; h3 { color: black; diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.css b/client/coral-admin/src/routes/Moderation/components/Moderation.css new file mode 100644 index 000000000..94b1754cc --- /dev/null +++ b/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; + } +} + diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js index 104da959b..9b9673ddb 100644 --- a/client/coral-admin/src/routes/Moderation/components/Moderation.js +++ b/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) { @@ -244,45 +246,48 @@ class Moderation extends Component { asset={asset} getModPath={getModPath} items={menuItems} - selectSort={this.props.setSortOrder} - sort={this.props.moderation.sortOrder} activeTab={activeTab} /> - - - +
+ + + +
- 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; +} \ No newline at end of file diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js b/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js index 81293d06b..b43d97822 100644 --- a/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js +++ b/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 (
-
-
-
+
+
{items.map((queue) => )}
- selectSort(sort)}> - - -
); @@ -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, }; diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css new file mode 100644 index 000000000..3a6000f9b --- /dev/null +++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css @@ -0,0 +1,97 @@ +@custom-media --tablet (max-width: 1180px); + +.viewOptions { + display: inline-block; + width: 220px; + position: absolute; + padding: 0; + overflow: visible; + height: 144px; + min-height: auto; + z-index: 10; + + @media (--tablet) { + width: 650px; + margin: 0 auto; + position: relative; + display: flex; + flex-direction: row; + margin-top: 10px; + height: 60px; + } +} + +.headline { + margin: 0; + font-size: 1.1rem; + border-bottom: 1px solid rgba(0,0,0,.1); + padding: 0 20px; + + @media (--tablet) { + flex: 1; + display: inline-block; + border-bottom: none; + line-height: 60px; + } +} + +.viewOptionsContent { + padding: 10px 20px; + + @media (--tablet) { + display: inline-block; + } +} + +.viewOptionsList { + padding: 0; + margin: 0; + color: rgba(0,0,0,.54); +} + +.viewOptionsItem { + list-style: none; +} + +.selectField { + position: relative; + width: 140px; + height: 36px; + top: 5px; + margin-right: 10px; + background: #7B7B7B; + color: white; + padding: 6px 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); + + @media (--tablet) { + display: inline-block; + margin-left: 10px; + } + + > 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; + } +} diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js new file mode 100644 index 000000000..4b6d1dea6 --- /dev/null +++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js @@ -0,0 +1,47 @@ +import React from 'react'; +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 ( + +

+ View Options +

+
+
    +
  • + Sort Comments + selectSort(sort)}> + + + +
    • +
+
+ + ); + } +} + +ViewOptions.propTypes = { + selectSort: PropTypes.func.isRequired, + sort: PropTypes.string.isRequired +}; + +export default ViewOptions; diff --git a/client/coral-admin/src/components/ui/Drawer.css b/client/coral-admin/src/routes/Moderation/containers/ViewOptions.js similarity index 100% rename from client/coral-admin/src/components/ui/Drawer.css rename to client/coral-admin/src/routes/Moderation/containers/ViewOptions.js diff --git a/client/coral-ui/components/Card.css b/client/coral-ui/components/Card.css index ef1f2626d..b6e772697 100644 --- a/client/coral-ui/components/Card.css +++ b/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); } - - diff --git a/client/coral-ui/components/Card.js b/client/coral-ui/components/Card.js index 0bdb490e7..aaf31d080 100644 --- a/client/coral-ui/components/Card.js +++ b/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}) => (
{children}
); + +Card.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + shadow: PropTypes.number, +}; + +export default Card;