It adds translations for the admin and fix CSS.

client/coral-admin/src/components/Header.js

@@ -2,22 +2,26 @@ import React from 'react';
 import {Layout, Navigation, Drawer, Header} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../translations.json';
 
 // App header. If we add a navbar it should be here
 export default (props) => (
   <Layout fixedDrawer>
     <Header title='Talk'>
       <Navigation>
-        <Link className={styles.navLink} to={'/admin/'}>Moderate</Link>
-        <Link className={styles.navLink} to={'/admin/configure'}>Configure</Link>
+        <Link className={styles.navLink} to={'/admin/'}>{lang.t('configure.moderate')}</Link>
+        <Link className={styles.navLink} to={'/admin/configure'}>{lang.t('Configure')}</Link>
       </Navigation>
     </Header>
     <Drawer>
       <Navigation>
-        <Link className={styles.navLink} to={'/admin/'}>Moderate</Link>
-        <Link className={styles.navLink} to={'/admin/configure'}>Configure</Link>
+        <Link className={styles.navLink} to={'/admin/'}>{lang.t('configure.moderate')}</Link>
+        <Link className={styles.navLink} to={'/admin/configure'}>{lang.t('configure.Configure')}</Link>
       </Navigation>
     </Drawer>
     {props.children}
   </Layout>
 );
+
+const lang = new I18n(translations);

client/coral-admin/src/components/ui/Drawer.js

@@ -2,13 +2,17 @@ import React from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../../translations.json';
 
 export default () => (
   <Drawer>
     <Navigation>
-      <Link className={styles.navLink} to="/admin">Moderate</Link>
-      <Link className={styles.navLink} to="/admin/community">Community</Link>
-      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
+      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
     </Navigation>
   </Drawer>
 );
+
+const lang = new I18n(translations);

client/coral-admin/src/components/ui/Header.js

@@ -2,16 +2,20 @@ import React from 'react';
 import {Navigation, Header} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../../translations.json';
 
 export default () => (
   <Header title='Talk'>
     <Navigation>
-      <Link className={styles.navLink} to="/admin">Moderate</Link>
-      <Link className={styles.navLink} to="/admin/community">Community</Link>
-      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
+      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
       <span>
         {`v${process.env.VERSION}`}
       </span>
     </Navigation>
   </Header>
 );
+
+const lang = new I18n(translations);

client/coral-admin/src/containers/Configure.css

@@ -29,6 +29,13 @@
   margin-bottom: 10px;
   cursor: pointer;
   width: auto;
+  height: auto;
+  text-align: left;
+}
+
+.configSettingInfoBox p {
+  font-size: 12px;
+  bottom: 0;
 }
 
 .configSettingEmbed {

client/coral-admin/src/containers/Configure.js

@@ -60,7 +60,7 @@ class Configure extends React.Component {
             onClick={this.updateModeration}
             checked={this.props.settings.moderation === 'pre'} />
         </ListItemAction>
-        Enable pre-moderation
+        {lang.t('configure.enable-pre-moderation')}
       </ListItem>
       <ListItem threeLine className={styles.configSettingInfoBox}>
         <ListItemAction>
@@ -68,33 +68,22 @@ class Configure extends React.Component {
             onClick={this.updateInfoBoxEnable}
             checked={this.props.settings.infoBoxEnable} />
         </ListItemAction>
-        <ListItemContent>Include Comment Stream Description for Readers.
-        Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
+        <ListItemContent>
+          {lang.t('configure.include-comment-stream')}
+          <p>
+            {lang.t('configure.include-comment-stream-desc')}
+          </p>
         </ListItemContent>
       </ListItem>
       <ListItem className={`${styles.configSettingInfoBox} ${this.props.settings.infoBoxEnable ? null : styles.hidden}`} >
-        <Textfield
-          onChange={this.updateInfoBoxContent}
-          value={this.props.settings.infoBoxContent}
-          expandable
-          label='Include your text here'
-          rows={3}
-          style={{width: '100%'}}/>
+        <ListItemContent>
+          <Textfield
+            onChange={this.updateInfoBoxContent}
+            value={this.props.settings.infoBoxContent}
+            label={lang.t('configure.include-text')}
+            rows={3}/>
+        </ListItemContent>
       </ListItem>
-      {/*
-      <ListItem className={styles.configSetting}>
-        <ListItemAction><Checkbox /></ListItemAction>
-        Include Comment Stream Description for Readers
-      </ListItem>
-      <ListItem className={styles.configSetting}>
-        <ListItemAction><Checkbox /></ListItemAction>
-        Limit Comment Length
-        <Textfield
-          pattern='-?[0-9]*(\.[0-9]+)?'
-          error='Input is not a number!'
-          label='Maximum Characters' />
-      </ListItem>
-    */}
     </List>;
   }
 
@@ -115,7 +104,7 @@ class Configure extends React.Component {
 
     return <List>
       <ListItem className={styles.configSettingEmbed}>
-        <p>Copy and paste code below into your CMS to embed your comment box in your articles</p>
+        <p>{lang.t('configure.copy-and-paste')}</p>
         <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
         <Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
           {lang.t('embedlink.copy')}
@@ -131,8 +120,8 @@ class Configure extends React.Component {
 
   render () {
     let pageTitle = this.state.activeSection === 'comments'
-      ? 'Comment Settings'
-      : 'Embed Comment Stream';
+      ? lang.t('configure.comment-settings')
+      : lang.t('configure.embed-comment-stream');
 
     if (this.props.fetchingSettings) {
       pageTitle += ' - Loading...';
@@ -145,16 +134,16 @@ class Configure extends React.Component {
               <ListItem className={styles.settingOption}>
                 <ListItemContent
                   onClick={this.changeSection.bind(this, 'comments')}
-                  icon='settings'>Comment Settings</ListItemContent>
+                  icon='settings'>{lang.t('configure.comment-settings')}</ListItemContent>
               </ListItem>
               <ListItem className={styles.settingOption}>
                 <ListItemContent
                   onClick={this.changeSection.bind(this, 'embed')}
-                  icon='code'>Embed Comment Stream</ListItemContent>
+                  icon='code'>{lang.t('configure.embed-comment-stream')}</ListItemContent>
               </ListItem>
             </List>
             <Button raised colored onClick={this.saveSettings}>
-              <Icon name='save' /> Save Changes
+              <Icon name='save' /> {lang.t('configure.save-changes')}
             </Button>
           </div>
           <div className={styles.mainContent}>

client/coral-admin/src/translations.json

@@ -29,6 +29,19 @@
     },
     "embedlink": {
       "copy": "Copy to Clipboard"
+    },
+    "configure": {
+      "enable-pre-moderation": "Enable pre-moderation",
+      "include-comment-stream": "Include Comment Stream Description for Readers.",
+      "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
+      "include-text": "Include your text here.",
+      "comment-settings": "Comment Settings",
+      "embed-comment-stream": "Embed Comment Stream",
+      "save-changes": "Save Changes",
+      "copy-and-paste": "Copy and paste code below into your CMS to embed your comment box in your articles",
+      "moderate": "Moderate",
+      "configure": "Configure",
+      "community": "Community"
     }
   },
   "es": {
@@ -50,6 +63,19 @@
     "comment": {
       "flagged": "marcado",
       "anon": "Anónimo"
+    },
+    "configure": {
+      "enable-pre-moderation": "Habilitar pre-moderación",
+      "include-comment-stream": "Incluir la Descripción a un Hilo de Comentario para los y las Lectoras.",
+      "include-comment-stream-desc": "Escribir un mensaje que será agregado a la parte de arriba del tu hilo de comentarios. Por ejemplo, un tema, guias de comunidad, etc.",
+      "include-text": "Incluir tu texto aqui.",
+      "comment-settings": "Configuración de Comentarios",
+      "embed-comment-stream": "Colocar Hilo de Comentarios",
+      "save-changes": "Guardar Cambios",
+      "copy-and-paste": "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus articulos",
+      "moderate": "Moderar",
+      "configure": "Configurar",
+      "community": "Comunidad"
     }
   }
 }