diff --git a/.gitignore b/.gitignore
index 29f5961b2..fbc3c54d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,5 @@ dump.rdb
*.cfg
.idea/
coverage/
+.tags
+.tags1
diff --git a/client/coral-admin/src/actions/community.js b/client/coral-admin/src/actions/community.js
index 0674926db..82cee32f4 100644
--- a/client/coral-admin/src/actions/community.js
+++ b/client/coral-admin/src/actions/community.js
@@ -7,7 +7,9 @@ import {
SORT_UPDATE,
COMMENTERS_NEW_PAGE,
SET_ROLE,
- SET_COMMENTER_STATUS
+ SET_COMMENTER_STATUS,
+ SHOW_BANUSER_DIALOG,
+ HIDE_BANUSER_DIALOG
} from '../constants/community';
import coralApi from '../../../coral-framework/helpers/response';
@@ -56,3 +58,7 @@ export const setCommenterStatus = (id, status) => (dispatch) => {
return dispatch({type: SET_COMMENTER_STATUS, id, status});
});
};
+
+// Ban User Dialog
+export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
+export const hideBanUserDialog = (showDialog) => ({type: HIDE_BANUSER_DIALOG, showDialog});
diff --git a/client/coral-admin/src/constants/community.js b/client/coral-admin/src/constants/community.js
index 5d9fb4ab8..9ea4568ff 100644
--- a/client/coral-admin/src/constants/community.js
+++ b/client/coral-admin/src/constants/community.js
@@ -9,3 +9,6 @@ export const SET_COMMENTER_STATUS = 'SET_COMMENTER_STATUS';
export const FETCH_FLAGGED_COMMENTERS_REQUEST = 'FETCH_FLAGGED_COMMENTERS_REQUEST';
export const FETCH_FLAGGED_COMMENTERS_SUCCESS = 'FETCH_FLAGGED_COMMENTERS_SUCCESS';
export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILURE';
+
+export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
+export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
diff --git a/client/coral-admin/src/containers/Community/Community.css b/client/coral-admin/src/containers/Community/Community.css
index 05a268d5a..6460c50d2 100644
--- a/client/coral-admin/src/containers/Community/Community.css
+++ b/client/coral-admin/src/containers/Community/Community.css
@@ -1,3 +1,5 @@
+@custom-media --big-viewport (min-width: 780px);
+
.container {
padding: 10px;
display: flex;
@@ -100,3 +102,188 @@
cursor: pointer;
}
}
+
+.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;
+
+
+ &: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;
+ }
+
+ .sideActions {
+ position: absolute;
+ right: 0;
+ height: 100%;
+ top: 0;
+ padding: 40px 18px;
+ box-sizing: border-box;
+ }
+
+ .itemHeader {
+ display: inline;
+
+ .author {
+ font-size: 24px;
+ min-width: 50px;
+ align-items: left;
+ margin-bottom: 15px;
+ }
+ }
+
+ .itemBody {
+ display: block;
+ }
+
+ .created {
+ color: #666;
+ font-size: 13px;
+ margin-left: 40px;
+ }
+
+ .body {
+ margin-top: 20px;
+ flex: 1;
+ font-size: 0.88em;
+ color: black;
+ }
+
+ .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;
+}
+
+.flaggedBy {
+ display: inline;
+ padding: 3px;
+}
+
+.flaggedByLabel {
+ font-weight: bold;
+}
diff --git a/client/coral-admin/src/containers/Community/CommunityContainer.js b/client/coral-admin/src/containers/Community/CommunityContainer.js
index 0effb551c..7f83909b6 100644
--- a/client/coral-admin/src/containers/Community/CommunityContainer.js
+++ b/client/coral-admin/src/containers/Community/CommunityContainer.js
@@ -1,26 +1,27 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
-import {modUserFlaggedQuery} from 'coral-admin/src/graphql/queries';
import {compose} from 'react-apollo';
+
+import {modUserFlaggedQuery} from 'coral-admin/src/graphql/queries';
+import {banUser} from '../../graphql/mutations';
+
import {
fetchAccounts,
updateSorting,
- newPage
+ newPage,
+ showBanUserDialog,
+ hideBanUserDialog
} from '../../actions/community';
import CommunityMenu from './components/CommunityMenu';
+import BanUserDialog from './components/BanUserDialog';
+
import People from './People';
import FlaggedAccounts from './FlaggedAccounts';
class CommunityContainer extends Component {
- // static propTypes = {
- //
- // // list of actions (approve, reject, ban) associated with the users
- // modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
- // }
-
constructor(props) {
super(props);
@@ -92,12 +93,23 @@ class CommunityContainer extends Component {
}
return (
-