diff --git a/client/coral-admin/config.sample.json b/client/coral-admin/config.sample.json index f5b9ad5f8..55d39db05 100644 --- a/client/coral-admin/config.sample.json +++ b/client/coral-admin/config.sample.json @@ -1,3 +1,3 @@ { - "base": "client/coral-admin" + "basePath": "client/coral-admin" } diff --git a/client/coral-admin/package.json b/client/coral-admin/package.json index ced6a3512..048359526 100644 --- a/client/coral-admin/package.json +++ b/client/coral-admin/package.json @@ -26,8 +26,8 @@ }, "devDependencies": { "autoprefixer": "6.5.0", - "buble": "0.13.0", - "buble-loader": "0.3.0", + "babel-core": "^6.18.2", + "babel-loader": "^6.2.7", "copy-webpack-plugin": "3.0.1", "css-loader": "0.25.0", "json-loader": "0.5.4", @@ -36,7 +36,7 @@ "precss": "1.4.0", "standard": "8.2.0", "style-loader": "0.13.1", - "webpack": "2.1.0-beta.25", + "webpack": "^1.13.3", "webpack-dev-server": "1.16.1" } } 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 c31c22a6d..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 545cd80a4..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 8aebe7864..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.css b/client/coral-admin/src/containers/Configure.css index 2f98a8b99..2c65fd5bc 100644 --- a/client/coral-admin/src/containers/Configure.css +++ b/client/coral-admin/src/containers/Configure.css @@ -23,7 +23,10 @@ } .configSettingEmbed { - composes: configSetting; + border: 1px solid #ccc; + border-radius: 4px; + height: 90px; + margin-bottom: 10px; display: block; height: 170px; } 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 ca3b5cab5..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') @@ -9,11 +8,9 @@ const config = require('./config.json') // doing a string replace here because I spent a day trying to do it the "webpack" way // ond nothing works. just trying to replace a string in an index.html file is // apparently something no one has ever done in the js community. -let templateString = fs.readFileSync('./index.ejs').toString() +let templateString = fs.readFileSync(path.join(__dirname, 'index.ejs')).toString() templateString = templateString.replace('<%= basePath %>', config.basePath) -fs.writeFileSync('./public/index.html', templateString) - -console.log(templateString) +fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) module.exports = { entry: { @@ -25,24 +22,16 @@ module.exports = { }, module: { loaders: [ - { test: /.js$/, loaders: 'buble', include: path.join(__dirname, 'src') }, - { test: /.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, - { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' } + { 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'] } ] }, - plugins: [ - new webpack.LoaderOptionsPlugin({ - options: { - context: __dirname, - postcss: [autoprefixer, precss] - } - }) - ], + plugins: [ autoprefixer, precss ], resolve: { - modules: [ + root: [ path.resolve('./src'), - path.resolve('../'), - 'node_modules' + path.resolve('../') ] }, devServer: { diff --git a/client/coral-admin/webpack.config.js b/client/coral-admin/webpack.config.js index 67d5aef22..2c81bf4fc 100644 --- a/client/coral-admin/webpack.config.js +++ b/client/coral-admin/webpack.config.js @@ -4,22 +4,22 @@ const devConfig = require('./webpack.config.dev') const autoprefixer = require('autoprefixer') const precss = require('precss') const Copy = require('copy-webpack-plugin') -const webpack = require('webpack') const config = require('./config.json') // doing a string replace here because I spent a day trying to do it the "webpack" way // ond nothing works. just trying to replace a string in an index.html file is // apparently something no one has ever done in the js community. -let templateString = fs.readFileSync('./index.ejs').toString() +let templateString = fs.readFileSync(path.join(__dirname, 'index.ejs')).toString() templateString = templateString.replace('<%= basePath %>', config.basePath) -fs.writeFileSync('./public/index.html', templateString) +fs.writeFileSync(path.join(__dirname, 'public/index.html'), templateString) module.exports = Object.assign({}, devConfig, { module: { + context: __dirname, loaders: [ - { test: /.js$/, loaders: 'buble', include: [path.join(__dirname, 'src'), path.join(__dirname, '../', 'coral-framework')] }, - { test: /.json$/, loaders: 'json', include: __dirname, exclude: /node_modules/ }, - { test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader' } + { test: /.js$/, loader: 'babel', include: [path.join(__dirname, 'src'), path.join(__dirname, '../', 'coral-framework')], exclude: /node_modules/ }, + { test: /.json$/, loader: 'json', include: __dirname, exclude: /node_modules/ }, + { test: /.css$/, loaders: ['style-loader', 'css-loader?importLoaders=1', 'postcss-loader'] } ] }, plugins: [ @@ -27,14 +27,6 @@ module.exports = Object.assign({}, devConfig, { from: path.join(__dirname, '..', 'coral-embed-stream', 'dist'), to: './embed/comment-stream' }]), - new webpack.LoaderOptionsPlugin({ - options: { - context: __dirname, - postcss: [autoprefixer, precss], - minimize: true, - debug: false - } - }), - new webpack.optimize.UglifyJsPlugin() + autoprefixer, precss ] }) diff --git a/package.json b/package.json index 5c49dbbdb..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", + "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])}