diff --git a/client/coral-admin/index.ejs b/client/coral-admin/index.ejs index 45c971ffe..9b5fe84bf 100644 --- a/client/coral-admin/index.ejs +++ b/client/coral-admin/index.ejs @@ -17,6 +17,6 @@
- + diff --git a/client/coral-admin/postcss.config.js b/client/coral-admin/postcss.config.js new file mode 100644 index 000000000..d5267160a --- /dev/null +++ b/client/coral-admin/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('postcss-smart-import')({ /* ...options */ }), + require('precss')({ /* ...options */ }), + require('autoprefixer')({ /* ...options */ }) + ] +} diff --git a/client/coral-admin/public/index.html b/client/coral-admin/public/index.html index e792fcd2c..ef1adffec 100644 --- a/client/coral-admin/public/index.html +++ b/client/coral-admin/public/index.html @@ -17,6 +17,6 @@
- + diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js index 2c77fe900..4b7c01e84 100644 --- a/client/coral-admin/src/components/App.js +++ b/client/coral-admin/src/components/App.js @@ -1,11 +1,9 @@ import React from 'react' import { Provider } from 'react-redux' -import { Layout } from 'react-mdl' import 'material-design-lite' import { Router, Route, browserHistory } from 'react-router' import ModerationQueue from 'containers/ModerationQueue' -import Header from 'components/Header' import store from 'services/store' import CommentStream from 'containers/CommentStream' import EmbedLink from 'components/EmbedLink' @@ -16,18 +14,12 @@ export default class App extends React.Component { render (props) { return ( - -
-
- - - - - - -
-
- + + + + + + ) } diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js index f56a1349f..02367911f 100644 --- a/client/coral-admin/src/components/CommentList.js +++ b/client/coral-admin/src/components/CommentList.js @@ -120,7 +120,7 @@ export default class CommentList extends React.Component { {commentIds.map((commentId, index) => ( { if (el && commentId === active) { this._active = el } }} - key={index} + key={index + 'comment'} index={index} onClickAction={this.onClickAction} actions={this.props.actions} diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js index ed8bfc9bd..0e52686d8 100644 --- a/client/coral-admin/src/components/Header.js +++ b/client/coral-admin/src/components/Header.js @@ -9,14 +9,14 @@ export default (props) => (
- Moderate - Configure + Moderate + Configure
- Moderate - Configure + Moderate + Configure {props.children} diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js index c28534417..efe235df7 100644 --- a/client/coral-admin/src/components/ModerationKeysModal.js +++ b/client/coral-admin/src/components/ModerationKeysModal.js @@ -28,8 +28,8 @@ export default ({ open, onClose }) => (

{lang.t('modqueue.shortcuts')}

- {shortcuts.map(shortcut => ( - + {shortcuts.map((shortcut, i) => ( +
@@ -37,7 +37,7 @@ export default ({ open, onClose }) => ( {Object.keys(shortcut.shortcuts).map(key => ( - + diff --git a/client/coral-admin/src/components/Page.js b/client/coral-admin/src/components/Page.js new file mode 100644 index 000000000..733cec677 --- /dev/null +++ b/client/coral-admin/src/components/Page.js @@ -0,0 +1,12 @@ +import React from 'react' +import {Layout} from 'react-mdl' +import 'material-design-lite' +import Header from 'components/Header' + +export default (props) => ( + +
+ {props.children} +
+ +) diff --git a/client/coral-admin/src/containers/CommentStream.js b/client/coral-admin/src/containers/CommentStream.js index 33963f422..4f0a03698 100644 --- a/client/coral-admin/src/containers/CommentStream.js +++ b/client/coral-admin/src/containers/CommentStream.js @@ -6,6 +6,7 @@ import { connect } from 'react-redux' import { createComment, flagComment } from 'actions/comments' import CommentList from 'components/CommentList' import CommentBox from 'components/CommentBox' +import Page from 'components/Page' /** * Renders a comment stream using a CommentList component @@ -43,17 +44,19 @@ class CommentStream extends React.Component { // Render the comment box along with the CommentList render ({ comments }, { snackbar, snackbarMsg }) { return ( -
- - - {snackbarMsg} -
+ +
+ + + {snackbarMsg} +
+ ) } } diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js index 02862cb8b..4a36e56e7 100644 --- a/client/coral-admin/src/containers/Configure.js +++ b/client/coral-admin/src/containers/Configure.js @@ -10,6 +10,7 @@ import { Button, Icon } from 'react-mdl' +import Page from 'components/Page' import styles from './Configure.css' class Configure extends React.Component { @@ -59,33 +60,35 @@ class Configure extends React.Component { : 'Embed Comment Stream' return ( -
-
- - - Comment Settings - - - Embed Comment Stream - - - + +
+
+ + + Comment Settings + + + Embed Comment Stream + + + +
+
+

{pageTitle}

+ { + this.state.activeSection === 'comments' + ? this.getCommentSettings() + : this.getEmbed() + } +
-
-

{pageTitle}

- { - this.state.activeSection === 'comments' - ? this.getCommentSettings() - : this.getEmbed() - } -
-
+ ) } } diff --git a/client/coral-admin/src/containers/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue.js index f80aac2e2..061786543 100644 --- a/client/coral-admin/src/containers/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue.js @@ -2,6 +2,7 @@ import React from 'react' import { connect } from 'react-redux' import ModerationKeysModal from 'components/ModerationKeysModal' +import Page from 'components/Page' import CommentList from 'components/CommentList' import { updateStatus } from 'actions/comments' import styles from './ModerationQueue.css' @@ -59,53 +60,56 @@ class ModerationQueue extends React.Component { render () { const { comments } = this.props const { activeTab, singleView, modalOpen } = this.state + console.log('moderation queue', styles) return ( -
-
- this.onTabClick('pending')} - className={`mdl-tabs__tab is-active ${styles.tab}`}>{lang.t('modqueue.pending')} - this.onTabClick('rejected')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')} - this.onTabClick('flagged')} - className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')} + +
+ +
+ !comments.get('byId').get(id).get('status'))} + comments={comments.get('byId')} + onClickAction={(action, id) => this.onCommentAction(action, id)} + actions={['reject', 'approve']} + loading={comments.loading} /> +
+
+ comments.get('byId').get(id).get('status') === 'rejected')} + comments={comments.get('byId')} + onClickAction={(action, id) => this.onCommentAction(action, id)} + actions={['approve']} + loading={comments.loading} /> +
+
+ { + const data = comments.get('byId').get(id) + return !data.get('status') && data.get('flagged') === true + })} + comments={comments.get('byId')} + onClickAction={(action, id) => this.onCommentAction(action, id)} + actions={['reject', 'approve']} + loading={comments.loading} /> +
+ this.setState({ modalOpen: false })} />
-
- !comments.get('byId').get(id).get('status'))} - comments={comments.get('byId')} - onClickAction={(action, id) => this.onCommentAction(action, id)} - actions={['reject', 'approve']} - loading={comments.loading} /> -
-
- comments.get('byId').get(id).get('status') === 'rejected')} - comments={comments.get('byId')} - onClickAction={(action, id) => this.onCommentAction(action, id)} - actions={['approve']} - loading={comments.loading} /> -
-
- { - const data = comments.get('byId').get(id) - return !data.get('status') && data.get('flagged') === true - })} - comments={comments.get('byId')} - onClickAction={(action, id) => this.onCommentAction(action, id)} - actions={['reject', 'approve']} - loading={comments.loading} /> -
- this.setState({ modalOpen: false })} /> -
+ ) } } diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js index 509473891..d15367dd0 100644 --- a/client/coral-admin/src/index.js +++ b/client/coral-admin/src/index.js @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' -import App from 'components/App' +import App from './components/App' // Render the application into the DOM ReactDOM.render(, document.querySelector('#root')) diff --git a/client/coral-admin/webpack.config.dev.js b/client/coral-admin/webpack.config.dev.js index e8b0c86f0..bd5913b5a 100644 --- a/client/coral-admin/webpack.config.dev.js +++ b/client/coral-admin/webpack.config.dev.js @@ -1,7 +1,6 @@ const path = require('path') const fs = require('fs') -const webpack = require('webpack') const autoprefixer = require('autoprefixer') const precss = require('precss') const config = require('./config.json') @@ -13,8 +12,6 @@ let templateString = fs.readFileSync(path.join(__dirname, 'index.ejs')).toString templateString = templateString.replace('<%= basePath %>', config.basePath) fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) -console.log(templateString) - module.exports = { entry: { 'bundle': path.join(__dirname, 'src', 'index') @@ -27,7 +24,7 @@ module.exports = { loaders: [ { test: /.js$/, loader: 'babel', include: path.join(__dirname, 'src'), exclude: /node_modules/ }, { test: /\.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, - { test: /\.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } + { test: /.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } ] }, plugins: [ autoprefixer, precss ], diff --git a/package.json b/package.json index 2b6abf556..0c7aab592 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "app.js", "scripts": { "start": "./bin/www", - "build": "./node_modules/webpack/bin/webpack.js --config ./client/coral-embed-stream/webpack.config.js && ./node_modules/webpack/bin/webpack.js --config ./client/coral-admin/webpack.config.js", + "build": "./node_modules/webpack/bin/webpack.js --config ./client/coral-embed-stream/webpack.config.js && cd client/coral-admin && npm run build", "lint": "eslint .", "pretest": "npm install", "test": "mocha tests --recursive",
{lang.t(shortcut.title)}
{key} {lang.t(shortcut.shortcuts[key])}