diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index d96bacfe0..194c2351f 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -5,10 +5,13 @@ import Streams from 'containers/Streams/Streams'; import Configure from 'containers/Configure/Configure'; import LayoutContainer from 'containers/LayoutContainer'; import InstallContainer from 'containers/Install/InstallContainer'; + +import CommunityLayout from 'containers/Community/CommunityLayout'; import CommunityContainer from 'containers/Community/CommunityContainer'; import ModerationLayout from 'containers/ModerationQueue/ModerationLayout'; import ModerationContainer from 'containers/ModerationQueue/ModerationContainer'; + import Dashboard from 'containers/Dashboard/Dashboard'; const routes = ( @@ -16,11 +19,23 @@ const routes = ( - + + {/* Community Routes */} + + + + + + + + + + + {/* Moderation Routes */} diff --git a/client/coral-admin/src/containers/Community/CommunityContainer.js b/client/coral-admin/src/containers/Community/CommunityContainer.js index e4263cc06..56e4e7762 100644 --- a/client/coral-admin/src/containers/Community/CommunityContainer.js +++ b/client/coral-admin/src/containers/Community/CommunityContainer.js @@ -6,7 +6,10 @@ import { newPage, } from '../../actions/community'; -import Community from './Community'; +import CommunityMenu from './components/CommunityMenu'; + +import People from './People'; +import FlaggedAccounts from './FlaggedAccounts'; class CommunityContainer extends Component { constructor(props) { @@ -60,19 +63,41 @@ class CommunityContainer extends Component { this.search({page}); } - render() { - const {searchValue} = this.state; + getTabContent(searchValue) { const {community} = this.props; + const activeTab = this.props.route.path === ':id' ? 'flagged' : this.props.route.path; + + if (activeTab === 'people') { + return ( + + ); + } + return ( - + + ); + } + + render() { + const {searchValue, activeTab} = this.state; + + const tab = this.getTabContent(activeTab, searchValue, this.props); + + return ( +
+ +
+ { tab } +
+
); } } diff --git a/client/coral-admin/src/containers/Community/CommunityLayout.js b/client/coral-admin/src/containers/Community/CommunityLayout.js new file mode 100644 index 000000000..d6022fed9 --- /dev/null +++ b/client/coral-admin/src/containers/Community/CommunityLayout.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const CommunityLayout = props => ( +
+ {props.children} +
+); + +export default CommunityLayout; diff --git a/client/coral-admin/src/containers/Community/FlaggedAccounts.js b/client/coral-admin/src/containers/Community/FlaggedAccounts.js new file mode 100644 index 000000000..4f4df8edc --- /dev/null +++ b/client/coral-admin/src/containers/Community/FlaggedAccounts.js @@ -0,0 +1,19 @@ +import React from 'react'; + +// import I18n from 'coral-framework/modules/i18n/i18n'; +// import translations from 'coral-admin/src/translations.json'; + +import styles from './Community.css'; + +// import EmptyCard from '../../components/EmptyCard'; +// const lang = new I18n(translations); + +const FlaggedAccounts = () => { + return ( +
+ Flagged Accounts +
+ ); +}; + +export default FlaggedAccounts; diff --git a/client/coral-admin/src/containers/Community/Community.js b/client/coral-admin/src/containers/Community/People.js similarity index 95% rename from client/coral-admin/src/containers/Community/Community.js rename to client/coral-admin/src/containers/Community/People.js index 08a962c34..b91da0fee 100644 --- a/client/coral-admin/src/containers/Community/Community.js +++ b/client/coral-admin/src/containers/Community/People.js @@ -29,7 +29,7 @@ const tableHeaders = [ } ]; -const Community = ({isFetching, commenters, ...props}) => { +const People = ({isFetching, commenters, ...props}) => { const hasResults = !isFetching && !!commenters.length; return (
@@ -73,4 +73,4 @@ const Community = ({isFetching, commenters, ...props}) => { ); }; -export default Community; +export default People; diff --git a/client/coral-admin/src/containers/Community/components/CommunityMenu.js b/client/coral-admin/src/containers/Community/components/CommunityMenu.js new file mode 100644 index 000000000..9a51798ec --- /dev/null +++ b/client/coral-admin/src/containers/Community/components/CommunityMenu.js @@ -0,0 +1,31 @@ +import React from 'react'; + +import styles from './styles.css'; + +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from 'coral-admin/src/translations.json'; + +import {Link} from 'react-router'; + +const lang = new I18n(translations); + +const CommunityMenu = () => { + const flaggedPath = '/admin/community/flagged'; + const peoplePath = '/admin/community/people'; + return ( +
+
+
+ + {lang.t('community.flaggedaccounts')} + + + {lang.t('community.people')} + +
+
+
+ ); +}; + +export default CommunityMenu; diff --git a/client/coral-admin/src/containers/Community/components/styles.css b/client/coral-admin/src/containers/Community/components/styles.css new file mode 100644 index 000000000..e2fd31911 --- /dev/null +++ b/client/coral-admin/src/containers/Community/components/styles.css @@ -0,0 +1,336 @@ +@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; + display: flex; + align-items: center; + font-size: 13px; + +span { + margin-left: 7px; +} +} + +@media (--big-viewport) { + .tab { + flex: none; + } +} + +.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; + } + } +} + +.header { + background-color: #2c2c2c; + color: white; + margin-bottom: -1px; + + .settingsButton { + i { + vertical-align: middle; + margin-left: 10px; + margin-top: -4px; + } + } + + .moderateAsset { + a { + -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; + } + + &:first-child { + text-align: left; + } + + &:nth-child(2) { + text-align: center; + } + + &:last-child { + text-align: right; + } + } + } +} + + +@custom-media --big-viewport (min-width: 780px); + +.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: 16px; + width: 100%; + max-width: 660px; + min-width: 400px; + margin: 0 auto; + padding: 16px 14px; + position: relative; + transition: box-shadow 200ms; + margin-top: 0; + + + &: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: 40px 18px; + box-sizing: border-box; + } + + .itemHeader { + display: flex; + align-items: center; + justify-content: space-between; + + .author { + 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; + font-size: 0.88em; + 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; +} + +.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; + + &:hover { + text-decoration: underline; + opacity: .9; + cursor: pointer; + } + } + } +} + +.flagBox { + max-width: 480px; + border-top: 1px solid rgba(66, 66, 66, 0.12); + h3 { + font-size: 14px; + margin: 0; + font-weight: 500; + } +} diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index f685ac094..b1a44533e 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -54,7 +54,6 @@ class ModerationContainer extends Component { } if (data.error) { - console.log(data); return
Error
; } diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index 7219a22ca..e99a08a45 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -13,7 +13,9 @@ "active": "Active", "banned": "Banned", "banned-user": "Banned User", - "loading": "Loading results" + "loading": "Loading results", + "flaggedaccounts": "Account Flags", + "people": "People" }, "modqueue": { "likes": "likes", @@ -145,7 +147,9 @@ "active": "Activa", "banned": "Suspendido", "banned-user": "Usuario Suspendido", - "loading": "Cargando resultados" + "loading": "Cargando resultados", + "flaggedaccounts": "Cuentas Reportadas", + "people": "Gente" }, "modqueue": { "likes": "gustos",