From bfd1820bafbe9f93a844b575a4b9c05d1ae2646b Mon Sep 17 00:00:00 2001
From: Joel <joelbmolina@gmail.com>
Date: Thu, 19 Jan 2017 12:51:32 -0700
Subject: [PATCH] updated styling for left content

---
 client/vue-components/main_content.vue | 42 +++++++++++++-------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/client/vue-components/main_content.vue b/client/vue-components/main_content.vue
index a60d10d..a3c8948 100755
--- a/client/vue-components/main_content.vue
+++ b/client/vue-components/main_content.vue
@@ -1,28 +1,26 @@
 <template>
   <div class="main-content">
     <navbar></navbar>
-
-    <div>
     <!-- area to add live data as text is being added -->
-     <div class="content-left">
-     <div>
-      <videocomponent id="video" :wsrtc="wsrtc" :uri="uri"></videocomponent>
-     </div>
+    <div class="content">
+      <div class="content-left">
+        <videocomponent id="video" :wsrtc="wsrtc" :uri="uri"></videocomponent>
+        <div class="doc-info">
+          <div>{{ count }} words</div>
+          <div>{{ time }} read</div>
+        </div>
+        <audiocomponent id="audio" ></audiocomponent>
 
-      <div class="doc-info">
-        <div>{{ count }} words</div>
-        <div>{{ time }} read</div>
       </div>
-      <div class="audio">
-        <audiocomponent id="audio" ></audiocomponent>
+
+      <div class="content-right">
+        <div id="editor"></div>
       </div>
       <div>
         <statcomponent :quill="quill"></statcomponent>
       </div>
     </div>
-    <div class="content-right">
-      <div id="editor"></div>
-    </div>
+
   </div>
 </template>
 
@@ -41,6 +39,7 @@
   import editor from '../js/editor.js'
   import statcomponent from './stat_component.vue'
 
+
   export default {
     created() {
       let chance = new Chance()
@@ -63,6 +62,7 @@
       const connection = new sharedb.Connection(socket)
       // console.log(socket, this.wsrtc)
       // console.log(socket, this.wsrtc)
+
       // For testing reconnection
       window.disconnect = function() {
         connection.close();
@@ -106,7 +106,7 @@
   }
 </script>
 
-<style scoped>
+<style>
 .main-content{
   width: 100vw;
 }
@@ -117,19 +117,18 @@
 }
 .content-right{
   width: 80%;
-  display: inline-block;
-  float: right;
 }
 .content-left{
   width: 20%;
-  display: inline-block;
-  justify-content: center;
-  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
 }
 .doc-info{
   font-size: 0.95em;
   font-weight: 600;
-  margin: 0.75em;
+  margin: 1em;
   opacity: 0.35;
 }
 html, body{
@@ -138,6 +137,7 @@ html, body{
 }
 #editor {
   height: 100%;
+  padding: 1em;
 }
 code {
   color: #f66;