Publishing Info (#70)

* Restore publishing info
Closes #68

* Prevent document remounting / refetching when changing between edit / read

* Merge master

frontend/components/Editor/Editor.js

@@ -98,7 +98,7 @@ export default class MarkdownEditor extends Component {
 
   render = () => {
     return (
-      <span className={styles.container}>
+      <span>
         <ClickablePadding onClick={this.focusAtStart} />
         <Toolbar state={this.state.state} onChange={this.onChange} />
         <Editor

frontend/components/Editor/Editor.scss

@@ -1,16 +1,3 @@
-.container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  font-weight: 400;
-  font-size: 1em;
-  line-height: 1.5em;
-
-  padding: 0 3em;
-  max-width: 50em;
-}
-
 .editor {
   color: #1b2631;
   height: auto;

frontend/components/Layout/Layout.js

@@ -92,10 +92,7 @@ type Props = {
                     <Flex>
                       <Link to="/search">
                         <div className={styles.search} title="Search (/)">
-                          <img
-                            src={searchIcon}
-                            alt="Search"
-                          />
+                          <img src={searchIcon} alt="Search" />
                         </div>
                       </Link>
                     </Flex>}

frontend/components/PublishingInfo/PublishingInfo.js

@@ -1,36 +1,47 @@
 // @flow
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-
+import type { User } from 'types';
 import { Flex } from 'reflexbox';
 
-import styles from './PublishingInfo.scss';
+const Container = styled(Flex)`
+  margin-bottom: 30px;
+  color: #ccc;
+  font-size: 13px;
+`;
 
-class PublishingInfo extends React.Component {
-  static propTypes = {
-    collaborators: PropTypes.array.isRequired,
-    createdAt: PropTypes.string.isRequired,
-    createdBy: PropTypes.object.isRequired,
-    updatedAt: PropTypes.string.isRequired,
-    updatedBy: PropTypes.object.isRequired,
+const Avatars = styled(Flex)`
+  flex-direction: row-reverse;
+  margin-right: 10px;
+`;
+
+const Avatar = styled.img`
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: 2px solid #FFFFFF;
+`;
+
+class PublishingInfo extends Component {
+  props: {
+    collaborators: Array<User>,
+    createdAt: string,
+    createdBy: User,
+    updatedAt: string,
+    updatedBy: User,
   };
 
   render() {
     return (
-      <Flex align="center" className={styles.user}>
-        <Flex className={styles.avatarLine}>
-          {this.props.collaborators
-            .reverse()
-            .map(user => (
-              <Avatar
-                key={`avatar-${user.id}`}
-                src={user.avatarUrl}
-                title={user.name}
-              />
-            ))}
-        </Flex>
-        <span className={styles.userName}>
+      <Container align="center">
+        <Avatars>
+          {this.props.collaborators.map(user => (
+            <Avatar key={user.id} src={user.avatarUrl} title={user.name} />
+          ))}
+        </Avatars>
+        <span>
           {this.props.createdBy.name}
           {' '}
           published
@@ -45,18 +56,9 @@ class PublishingInfo extends React.Component {
               </span>
             : null}
         </span>
-      </Flex>
+      </Container>
     );
   }
 }
 
-const Avatar = styled.img`
-  width: 26px;
-  height: 26px;
-  marginRight: '-12px',
-
-  border-radius: 50%;
-  border: '2px solid #FFFFFF';
-`;
-
 export default PublishingInfo;

frontend/components/PublishingInfo/PublishingInfo.scss

@@ -1,14 +0,0 @@
-.avatarLine {
-  flex-direction: row-reverse;
-  margin-right: 10px;
-}
-
-.user {
-  margin-bottom: 30px;
-  color: #ccc;
-  font-size: 13px;
-}
-
-.userName {
-  margin: 0 0 0 10px;
-}