From 91a25fc3c12e3f95708d34d588d62c675a30193a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 5 Oct 2017 08:00:08 -0300 Subject: [PATCH 1/9] max-width --- .../coral-admin/src/components/ui/Header.css | 8 +- .../coral-admin/src/components/ui/Header.js | 170 +++++++++--------- .../coral-admin/src/components/ui/Layout.css | 4 +- 3 files changed, 93 insertions(+), 89 deletions(-) diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css index f85a7cdf9..e6791b63b 100644 --- a/client/coral-admin/src/components/ui/Header.css +++ b/client/coral-admin/src/components/ui/Header.css @@ -15,19 +15,23 @@ } } +.headerWrapper { + background-color: #696969; +} + .header { background-color: transparent; box-shadow: none; min-height: 58px; display: block; + max-width: 1280px; + margin: 0 auto; } .header > div { background-color: #696969; position: relative; padding: 0; - min-width: 1280px; - margin: 0 auto; 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); height: 58px; } 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 a3cc7b7b6..3554c20e6 100644 --- a/client/coral-admin/src/components/ui/Layout.css +++ b/client/coral-admin/src/components/ui/Layout.css @@ -1,5 +1,3 @@ .layout { - max-width: 1280px; - margin: 0 auto; - background-color: #FAFAFA; + background-color: #FAFAFA; } From 886df1cdcac34a57d3136cbca8c0108d68943bfc Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 5 Oct 2017 08:21:17 -0300 Subject: [PATCH 2/9] Now every section is full width :D --- client/coral-admin/src/components/ui/Drawer.css | 13 +++++++++++++ client/coral-admin/src/components/ui/Drawer.js | 7 ++++--- client/coral-admin/src/components/ui/Layout.js | 1 + .../src/routes/Configure/components/Configure.css | 2 ++ .../src/routes/Dashboard/components/Dashboard.css | 2 ++ .../src/routes/Stories/components/Stories.css | 2 ++ 6 files changed, 24 insertions(+), 3 deletions(-) diff --git a/client/coral-admin/src/components/ui/Drawer.css b/client/coral-admin/src/components/ui/Drawer.css index e69de29bb..861d4074b 100644 --- a/client/coral-admin/src/components/ui/Drawer.css +++ b/client/coral-admin/src/components/ui/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/ui/Drawer.js index 2b728a33a..0385b1773 100644 --- a/client/coral-admin/src/components/ui/Drawer.js +++ b/client/coral-admin/src/components/ui/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/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js index 9ee9fda9f..00a09efb6 100644 --- a/client/coral-admin/src/components/ui/Layout.js +++ b/client/coral-admin/src/components/ui/Layout.js @@ -21,6 +21,7 @@ const Layout = ({
{children} diff --git a/client/coral-admin/src/routes/Configure/components/Configure.css b/client/coral-admin/src/routes/Configure/components/Configure.css index 0b7319132..7c9a26770 100644 --- a/client/coral-admin/src/routes/Configure/components/Configure.css +++ b/client/coral-admin/src/routes/Configure/components/Configure.css @@ -4,6 +4,8 @@ .container { display: flex; + max-width: 1280px; + margin: 0 auto; h3 { color: black; diff --git a/client/coral-admin/src/routes/Dashboard/components/Dashboard.css b/client/coral-admin/src/routes/Dashboard/components/Dashboard.css index 586ff6c08..aee7e702b 100644 --- a/client/coral-admin/src/routes/Dashboard/components/Dashboard.css +++ b/client/coral-admin/src/routes/Dashboard/components/Dashboard.css @@ -4,6 +4,8 @@ .Dashboard { display: flex; + max-width: 1280px; + margin: 0 auto; } .heading { diff --git a/client/coral-admin/src/routes/Stories/components/Stories.css b/client/coral-admin/src/routes/Stories/components/Stories.css index d8a75a4ce..be6b6f921 100644 --- a/client/coral-admin/src/routes/Stories/components/Stories.css +++ b/client/coral-admin/src/routes/Stories/components/Stories.css @@ -1,6 +1,8 @@ .container { padding: 10px; display: flex; + max-width: 1280px; + margin: 0 auto; } .leftColumn { From e4b225b4c2d2d6b3f57ede0525761fe83568443e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Oct 2017 10:10:08 -0300 Subject: [PATCH 3/9] ViewingOptions, Cards, Proptypes and MediaQueries --- .../src/components/ModerationKeysModal.css | 1 - .../Moderation/components/Moderation.css | 13 ++++ .../Moderation/components/Moderation.js | 64 ++++++++++--------- .../Moderation/components/ViewOptions.css | 35 ++++++++++ .../Moderation/components/ViewOptions.js | 28 ++++++++ .../Moderation/containers/ViewOptions.js | 0 client/coral-ui/components/Card.css | 2 - client/coral-ui/components/Card.js | 11 +++- 8 files changed, 120 insertions(+), 34 deletions(-) create mode 100644 client/coral-admin/src/routes/Moderation/components/Moderation.css create mode 100644 client/coral-admin/src/routes/Moderation/components/ViewOptions.css create mode 100644 client/coral-admin/src/routes/Moderation/components/ViewOptions.js create mode 100644 client/coral-admin/src/routes/Moderation/containers/ViewOptions.js diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css index 73697d930..f4007237b 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; 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 668d013b0..169c1b3b0 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) { @@ -226,41 +228,43 @@ class Moderation extends Component { sort={this.props.moderation.sortOrder} activeTab={activeTab} /> - - - +
+ + + +
- +

+ View Options +

+
+
    +
  • + Sort Comments +
    • +
+
+ + ); + } +} + +ViewOptions.propTypes = {}; + +export default ViewOptions; diff --git a/client/coral-admin/src/routes/Moderation/containers/ViewOptions.js b/client/coral-admin/src/routes/Moderation/containers/ViewOptions.js new file mode 100644 index 000000000..e69de29bb 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; From 848c04539c36f700b6eb08826e2d73efc225e179 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Oct 2017 10:35:04 -0300 Subject: [PATCH 4/9] Select working --- .../Moderation/components/Moderation.js | 7 ++- .../Moderation/components/ModerationMenu.css | 56 ++----------------- .../Moderation/components/ModerationMenu.js | 20 +------ .../Moderation/components/ViewOptions.css | 41 ++++++++++++++ .../Moderation/components/ViewOptions.js | 21 ++++++- 5 files changed, 71 insertions(+), 74 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js index 169c1b3b0..0945b2227 100644 --- a/client/coral-admin/src/routes/Moderation/components/Moderation.js +++ b/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 { - 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 index 79fdc9b44..49acf4caa 100644 --- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css +++ b/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; + } +} diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js index 3343d1401..4b6d1dea6 100644 --- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js +++ b/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 (

@@ -15,6 +23,14 @@ class ViewOptions extends React.Component {
  • Sort Comments + selectSort(sort)}> + + +

@@ -23,6 +39,9 @@ class ViewOptions extends React.Component { } } -ViewOptions.propTypes = {}; +ViewOptions.propTypes = { + selectSort: PropTypes.func.isRequired, + sort: PropTypes.string.isRequired +}; export default ViewOptions; From e1f5fe1f77f97a68603a5777d21d97365cd915a2 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Oct 2017 10:50:48 -0300 Subject: [PATCH 5/9] Responsive Ready --- .../Moderation/components/ViewOptions.css | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css index 49acf4caa..ff9e30ba5 100644 --- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css +++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css @@ -8,11 +8,16 @@ overflow: visible; height: 144px; min-height: auto; + @media (--tablet) { width: 650px; margin: 0 auto; position: relative; - display: block; + + display: flex; + flex-direction: row; + + height: 60px; } } @@ -21,10 +26,21 @@ 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 { @@ -45,11 +61,16 @@ margin-right: 10px; background: #7B7B7B; color: white; - padding: 10px 15px; + 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; } From fe689c588807dfcf123c4cb563c88fba294a9732 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Oct 2017 10:52:16 -0300 Subject: [PATCH 6/9] Margin Top --- .../src/routes/Moderation/components/ViewOptions.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css index ff9e30ba5..714cb6a62 100644 --- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css +++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css @@ -13,10 +13,9 @@ width: 650px; margin: 0 auto; position: relative; - display: flex; flex-direction: row; - + margin-top: 10px; height: 60px; } } From 0f6bbb21a3b28bd883a607c4023916ba9e7ea8c2 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Oct 2017 11:05:38 -0300 Subject: [PATCH 7/9] Fix drawer too --- client/coral-admin/src/components/ui/Logo.css | 1 - 1 file changed, 1 deletion(-) 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; } From dbe6e675c91737f21c9dae89780716d78c2c8601 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Fri, 6 Oct 2017 13:02:18 -0300 Subject: [PATCH 8/9] Modal Keys should show on tablet --- client/coral-admin/src/components/ModerationKeysModal.css | 1 + 1 file changed, 1 insertion(+) diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css index f4007237b..6c7dc61e9 100644 --- a/client/coral-admin/src/components/ModerationKeysModal.css +++ b/client/coral-admin/src/components/ModerationKeysModal.css @@ -28,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; From 154949ff47743857f871b11c481d180f61bb46ef Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 13:12:55 -0300 Subject: [PATCH 9/9] Update --- client/coral-admin/src/components/{ui => }/Drawer.css | 0 client/coral-admin/src/components/{ui => }/Drawer.js | 0 client/coral-admin/src/components/ui/Layout.js | 2 +- .../src/routes/Moderation/components/ViewOptions.css | 3 ++- 4 files changed, 3 insertions(+), 2 deletions(-) rename client/coral-admin/src/components/{ui => }/Drawer.css (100%) rename client/coral-admin/src/components/{ui => }/Drawer.js (100%) diff --git a/client/coral-admin/src/components/ui/Drawer.css b/client/coral-admin/src/components/Drawer.css similarity index 100% rename from client/coral-admin/src/components/ui/Drawer.css rename to client/coral-admin/src/components/Drawer.css diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/Drawer.js similarity index 100% rename from client/coral-admin/src/components/ui/Drawer.js rename to client/coral-admin/src/components/Drawer.js diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js index 00a09efb6..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 = ({ diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css index 714cb6a62..3a6000f9b 100644 --- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css +++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css @@ -1,4 +1,4 @@ -@custom-media --tablet (max-width: 1024px); +@custom-media --tablet (max-width: 1180px); .viewOptions { display: inline-block; @@ -8,6 +8,7 @@ overflow: visible; height: 144px; min-height: auto; + z-index: 10; @media (--tablet) { width: 650px;