From c17dccef0120bb74ba2089b52c6e948e9204ec48 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 1 Jul 2017 17:06:06 -0700
Subject: [PATCH] Moved PublishingInfo and added animations

---
 frontend/components/Editor/Editor.js   |  4 ++--
 frontend/components/Editor/Editor.scss |  1 -
 frontend/scenes/Document/Document.js   | 26 ++++++++++++++++----------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js
index 025e5a03..6a25ebcf 100644
--- a/frontend/components/Editor/Editor.js
+++ b/frontend/components/Editor/Editor.js
@@ -110,7 +110,7 @@ type KeyData = {
 
   render = () => {
     return (
-      <span>
+      <div>
         <Toolbar state={this.state.state} onChange={this.onChange} />
         <Editor
           key={this.props.starred}
@@ -128,7 +128,7 @@ type KeyData = {
         />
         {!this.props.readOnly &&
           <ClickablePadding onClick={this.focusAtEnd} grow />}
-      </span>
+      </div>
     );
   };
 }
diff --git a/frontend/components/Editor/Editor.scss b/frontend/components/Editor/Editor.scss
index e28ecea2..9cb57c6d 100644
--- a/frontend/components/Editor/Editor.scss
+++ b/frontend/components/Editor/Editor.scss
@@ -1,6 +1,5 @@
 .editor {
   color: #1b2631;
-  height: auto;
   width: 100%;
 
   h1,
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index edcf7c25..128cadd8 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -133,6 +133,15 @@ type Props = {
               message={DISCARD_CHANGES}
             />
             <DocumentContainer>
+              <InfoWrapper visible={!isEditing}>
+                <PublishingInfo
+                  collaborators={this.document.collaborators}
+                  createdAt={this.document.createdAt}
+                  createdBy={this.document.createdBy}
+                  updatedAt={this.document.updatedAt}
+                  updatedBy={this.document.updatedBy}
+                />
+              </InfoWrapper>
               <Editor
                 key={this.document.id}
                 text={this.document.text}
@@ -147,15 +156,7 @@ type Props = {
                 readOnly={!isEditing}
               />
             </DocumentContainer>
-            <Meta align="center" readOnly={!isEditing}>
-              {!isEditing &&
-                <PublishingInfo
-                  collaborators={this.document.collaborators}
-                  createdAt={this.document.createdAt}
-                  createdBy={this.document.createdBy}
-                  updatedAt={this.document.updatedAt}
-                  updatedBy={this.document.updatedBy}
-                />}
+            <Meta align="center" justify="flex-end" readOnly={!isEditing}>
               {!isEditing &&
                 <DocumentViews
                   count={this.document.views}
@@ -189,7 +190,12 @@ const Meta = styled(Flex)`
   padding: 10px 20px;
 `;
 
-const Container = styled(Flex)`
+const InfoWrapper = styled(Flex)`
+  opacity: ${({ visible }) => (visible ? '1' : '0')};
+  transition: all 100ms ease-in-out;
+`;
+
+const Container = styled.div`
   position: relative;
   width: 100%;
 `;