diff --git a/client/coral-admin/src/routes/Community/components/ActionButton.css b/client/coral-admin/src/routes/Community/components/ActionButton.css new file mode 100644 index 000000000..8f328e8b8 --- /dev/null +++ b/client/coral-admin/src/routes/Community/components/ActionButton.css @@ -0,0 +1,4 @@ +.actionButton { + transform: scale(.8); + margin: 0; +} diff --git a/client/coral-admin/src/routes/Community/components/ActionButton.js b/client/coral-admin/src/routes/Community/components/ActionButton.js index 09af420f6..400b59ab3 100644 --- a/client/coral-admin/src/routes/Community/components/ActionButton.js +++ b/client/coral-admin/src/routes/Community/components/ActionButton.js @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './Community.css'; +import styles from './ActionButton.css'; import {Button} from 'coral-ui'; import {menuActionsMap} from '../../../utils/moderationQueueActionsMap'; diff --git a/client/coral-admin/src/routes/Community/components/Community.css b/client/coral-admin/src/routes/Community/components/Community.css deleted file mode 100644 index 629045ab8..000000000 --- a/client/coral-admin/src/routes/Community/components/Community.css +++ /dev/null @@ -1,299 +0,0 @@ -@custom-media --big-viewport (min-width: 780px); - -.container { - padding: 10px; - display: flex; - padding-bottom: 200px; -} - -.leftColumn { - padding: 42px 56px; - width: 234px; -} - -.mainContent { - width: calc(100% - 300px); - padding: 34px 14px; - box-sizing: border-box; -} - -.mainFlaggedContent { - width: 100%; - padding: 34px 14px; - box-sizing: border-box; -} - -.roleButton { - display: block; -} - -.searchBox { - width: 100%; - padding: 9px; - border: 1px solid #ccc; - border-radius: 2px; - display: flex; - background: white; - box-sizing: border-box; - height: 40px; - - i { - color: #A1A1A1 - } - - input { - display: block; - width: 100%; - height: 100%; - border: none; - font-size: 16px; - padding: 0 2px 0 15px; - box-sizing: border-box; - } -} - -.list { - padding: 8px 0; - list-style: none; - display: block; - - &.singleView .listItem { - display: none; - } - - &.singleView .listItem.activeItem { - display: block; - height: 100%; - font-size: 1.5em; - line-height: 1.5em; - border: none; - - .actions { - position: fixed; - bottom: 60px; - left: 25%; - margin: 0 auto; - display: flex; - justify-content: space-around; - width: 50%; - margin: 0; - } - - .actionButton { - transform: scale(1.4); - } - } -} - -.listItem { - border-bottom: 1px solid #e0e0e0; - font-size: 18px; - width: 100%; - max-width: 660px; - min-width: 400px; - margin: 0 auto; - position: relative; - transition: all 200ms; - padding: 10px 0 0; - min-height: 220px; - - .container { - display: block; - padding: 0 14px; - min-height: 180px; - } - - &:hover { - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - } - - &:last-child { - border-bottom: none; - } - - .context { - a { - color: #f36451; - text-decoration: underline; - float: right; - } - } - - .sideActions { - position: absolute; - right: 0; - height: 100%; - top: 0; - padding: 50px 18px; - box-sizing: border-box; - } - - .itemHeader { - display: flex; - align-items: center; - justify-content: space-between; - - .author { - font-size: 16px; - font-weight: bold; - min-width: 230px; - display: flex; - align-items: center; - } - } - - .itemBody { - display: flex; - justify-content: space-between; - } - - .avatar { - margin-right: 16px; - height: 40px; - width: 40px; - border-radius: 50%; - background-color: #757575; - font-size: 40px; - color: #fff; - } - - .created { - color: #666; - font-size: 13px; - margin-left: 40px; - } - - .actionButton { - transform: scale(.8); - margin: 0; - } - - .body { - margin-top: 0px; - flex: 1; - color: black; - max-width: 500px; - word-wrap: break-word; - } - - .flagged { - color: rgba(255, 0, 0, .5); - padding-top: 15px; - padding-left: 10px; - } - - .flagCount{ - font-size: 12px; - color: #d32f2f; - } - -} - -.empty { - color: #444; - margin-top: 50px; - text-align: center; -} - - -@media (--big-viewport) { - .listItem { - border: 1px solid #e0e0e0; - margin-bottom: 30px; - - &:last-child { - border-bottom: 1px solid #e0e0e0; - } - - &.activeItem { - border: 2px solid #333; - } - } - -} - -.hasLinks { - color: #f00; - text-align: right; - display: flex; - align-items: center; - - i { - margin-right: 5px; - } -} - -.banned { - color: #f00; - text-align: left; - display: flex; - align-items: center; - - i { - margin-right: 5px; - } -} - -.ban { - display: block; - text-align: center; - margin-top: 5px; -} - -.banButton { - width: 114px; - letter-spacing: 1px; - - i { - vertical-align: middle; - margin-right: 10px; - font-size: 14px; - } -} - -.actionButton { - transform: scale(.8); - margin: 0; -} - -.flaggedByCount { - display: block; - text-align: left; - margin-top: 5px; -} - -.flaggedByCount i { - font-size: 14px; - margin-right: 10px; -} - -.flaggedBy { - display: inline; - padding: 3px; - font-size: 14px; - margin-left: 5px; -} - -.flaggedByLabel { - font-weight: 600; - font-size: 14px; -} - -.flaggedReasons { - margin-left: 24px; - margin-top: 10px; -} - -p.flaggedByReason { - font-size: 1tpx; - margin: 0px; - line-height: 1.4; -} - -.button { - composes: buttonReset from 'coral-framework/styles/reset.css'; - vertical-align: text-bottom; - &:hover { - background-color: #E0E0E0; - } -} diff --git a/client/coral-admin/src/routes/Community/components/CommunityMenu.css b/client/coral-admin/src/routes/Community/components/CommunityMenu.css new file mode 100644 index 000000000..c6313828a --- /dev/null +++ b/client/coral-admin/src/routes/Community/components/CommunityMenu.css @@ -0,0 +1,21 @@ +.tab { + flex: 1; + color: white; + text-transform: capitalize; + font-weight: 500; + font-size: 15px; + letter-spacing: 1px; + transition: border-bottom 200ms; +} + +.tabBar { + background-color: rgba(44, 44, 44, 0.89); + z-index: 5; +} + +.active { + color: white; + box-sizing: border-box; + border-bottom: solid 5px #F36451; +} + diff --git a/client/coral-admin/src/routes/Community/components/CommunityMenu.js b/client/coral-admin/src/routes/Community/components/CommunityMenu.js index b89e9350a..1e226313d 100644 --- a/client/coral-admin/src/routes/Community/components/CommunityMenu.js +++ b/client/coral-admin/src/routes/Community/components/CommunityMenu.js @@ -1,6 +1,6 @@ import React from 'react'; -import styles from './styles.css'; +import styles from './CommunityMenu.css'; import t from 'coral-framework/services/i18n'; import {Link} from 'react-router'; diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css index e69de29bb..6c7173c3d 100644 --- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css +++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css @@ -0,0 +1,11 @@ +.container { + padding: 10px; + display: flex; + padding-bottom: 200px; +} + +.mainFlaggedContent { + width: 100%; + padding: 34px 14px; + box-sizing: border-box; +} diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js index b455dfff1..da3d03e61 100644 --- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js +++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js @@ -1,7 +1,7 @@ import React from 'react'; import t from 'coral-framework/services/i18n'; -import styles from './Community.css'; +import styles from './FlaggedAccounts.css'; import EmptyCard from 'coral-admin/src/components/EmptyCard'; import LoadMore from '../../../components/LoadMore'; import FlaggedUser from '../containers/FlaggedUser'; diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.css b/client/coral-admin/src/routes/Community/components/FlaggedUser.css new file mode 100644 index 000000000..d5648fa61 --- /dev/null +++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.css @@ -0,0 +1,17 @@ +.listItem { + border-bottom: 1px solid #e0e0e0; + font-size: 18px; + width: 100%; + max-width: 660px; + min-width: 400px; + margin: 0 auto; + position: relative; + transition: all 200ms; + padding: 10px 0 0; + min-height: 220px; + + &:hover { + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } +} + diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js index 736e3a992..5f0136367 100644 --- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js +++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './Community.css'; +import styles from './styles.css'; import ActionButton from './ActionButton'; import {username} from 'talk-plugin-flags/helpers/flagReasons'; diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js index 464f3bc5b..64c1aaf6f 100644 --- a/client/coral-admin/src/routes/Community/components/People.js +++ b/client/coral-admin/src/routes/Community/components/People.js @@ -1,6 +1,6 @@ import React from 'react'; -import styles from './Community.css'; +import styles from './styles.css'; import Table from '../containers/Table'; import {Pager, Icon} from 'coral-ui'; import EmptyCard from '../../../components/EmptyCard'; diff --git a/client/coral-admin/src/routes/Community/components/styles.css b/client/coral-admin/src/routes/Community/components/styles.css index 8581c4c7d..f647da86b 100644 --- a/client/coral-admin/src/routes/Community/components/styles.css +++ b/client/coral-admin/src/routes/Community/components/styles.css @@ -1,119 +1,51 @@ @custom-media --big-viewport (min-width: 780px); -.listContainer { - max-width: 860px; - margin: 0 auto; -} - -.tabBar { - background-color: rgba(44, 44, 44, 0.89); - z-index: 5; -} - -.tab { - flex: 1; - color: white; - text-transform: capitalize; - font-weight: 500; - font-size: 15px; - letter-spacing: 1px; - transition: border-bottom 200ms; -} - -.active { - color: white; - box-sizing: border-box; - border-bottom: solid 5px #F36451; -} - -.active > span { - color: white; -} - -.active:after { - background: transparent !important; -} - -.showShortcuts { - position: absolute; - right: 130px; +.container { + padding: 10px; display: flex; - align-items: center; - font-size: 13px; - -span { - margin-left: 7px; -} + padding-bottom: 200px; } -@media (--big-viewport) { - .tab { - flex: none; - } +.leftColumn { + padding: 42px 56px; + width: 234px; } -.approve { - margin-top: 10px; +.mainContent { + width: calc(100% - 300px); + padding: 34px 14px; + box-sizing: border-box; } -.notFound { - position: relative; - margin: 20px auto; - text-align: center; - padding: 68px 45px; - vertical-align: middle; - min-width: 500px; - - a { - color: rgb(244, 126, 107); - font-weight: 500; - - &.goToStreams { - position: absolute; - right: 10px; - bottom: 10px; - } - } +.roleButton { + display: block; } -.header { - background-color: #2c2c2c; - color: white; - margin-bottom: -1px; +.searchBox { + width: 100%; + padding: 9px; + border: 1px solid #ccc; + border-radius: 2px; + display: flex; + background: white; + box-sizing: border-box; + height: 40px; - .settingsButton { - i { - vertical-align: middle; - margin-left: 10px; - margin-top: -4px; - } + i { + color: #A1A1A1 } - .moderateAsset { - a { - text-align: center; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - color: white; - text-transform: capitalize; - font-weight: 500; - font-size: 15px; - letter-spacing: 1px; - transition: opacity 200ms; - opacity: 1; - - &:hover { - opacity: .8; - cursor: pointer; - } - } + input { + display: block; + width: 100%; + height: 100%; + border: none; + font-size: 16px; + padding: 0 2px 0 15px; + box-sizing: border-box; } } - -@custom-media --big-viewport (min-width: 780px); - .list { padding: 8px 0; list-style: none; @@ -134,15 +66,12 @@ span { position: fixed; bottom: 60px; left: 25%; + margin: 0 auto; display: flex; justify-content: space-around; width: 50%; margin: 0; } - - .actionButton { - transform: scale(1.4); - } } } @@ -159,6 +88,7 @@ span { min-height: 220px; .container { + display: block; padding: 0 14px; min-height: 180px; } @@ -184,9 +114,9 @@ span { right: 0; height: 100%; top: 0; - padding: 40px 18px; + padding: 50px 18px; box-sizing: border-box; - } + } .itemHeader { display: flex; @@ -194,6 +124,8 @@ span { justify-content: space-between; .author { + font-size: 16px; + font-weight: bold; min-width: 230px; display: flex; align-items: center; @@ -221,18 +153,12 @@ span { margin-left: 40px; } - .actionButton { - transform: scale(.8); - margin: 0; - } - .body { margin-top: 0px; flex: 1; color: black; max-width: 500px; word-wrap: break-word; - font-weight: 300; } .flagged { @@ -245,11 +171,8 @@ span { font-size: 12px; color: #d32f2f; } - } - - .empty { color: #444; margin-top: 50px; @@ -301,34 +224,55 @@ span { margin-top: 5px; } -.Comment { - .moderateArticle { - font-size: 12px; - a { - display: inline-block; - color: #679af3; - text-decoration: none; - font-size: 1em; - font-weight: 400; - letter-spacing: .5px; - font-size: 12px; - margin-left: 10px; +.banButton { + width: 114px; + letter-spacing: 1px; - &:hover { - text-decoration: underline; - opacity: .9; - cursor: pointer; - } - } - } -} - -.flagBox { - max-width: 480px; - border-top: 1px solid rgba(66, 66, 66, 0.12); - h3 { + i { + vertical-align: middle; + margin-right: 10px; font-size: 14px; - margin: 0; - font-weight: 500; + } +} + +.flaggedByCount { + display: block; + text-align: left; + margin-top: 5px; +} + +.flaggedByCount i { + font-size: 14px; + margin-right: 10px; +} + +.flaggedBy { + display: inline; + padding: 3px; + font-size: 14px; + margin-left: 5px; +} + +.flaggedByLabel { + font-weight: 600; + font-size: 14px; +} + +.flaggedReasons { + margin-left: 24px; + margin-top: 10px; +} + +p.flaggedByReason { + font-size: 1tpx; + margin: 0px; + line-height: 1.4; +} + +.button { + composes: buttonReset from 'coral-framework/styles/reset.css'; + vertical-align: text-bottom; + &:hover { + background-color: #E0E0E0; } }