Merge pull request #23 from tanabe/feature/full-screen

Feature/full screen

public/css/style.css

@@ -8,6 +8,12 @@ html, body {
   font-size: 1em;
   line-height: 1.5em;
   background-color: #444;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  overscroll-behavior: none;
 }
 
 h1, h2, h3, h4, h5, h6, p {
@@ -34,9 +40,13 @@ img {
 }
 
 #header {
-  padding: 10px 0 ;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
   background-color: #444;
   width: 100%;
+  padding: 10px;
   text-align: center;
 }
 
@@ -46,84 +56,66 @@ img {
 }
 
 #container {
-  min-height: 100%;
+  position: absolute;
-  height: auto !important;
+  width: 100%;
-  height: 100%;
-  width: 1100px;
-  padding: 20px;
   margin: 0 auto;
   background-color: #fff;
-  border-radius: 10px;
+  overflow: hidden;
 }
 
-#container .section {
+#editor-wrapper {
-  margin-bottom: 20px;
+  border-right: 10px solid #eee;
 }
 
-#content .mode {
+#preview-wrapper {
-  border: 1px solid #ddd;
+  padding-left: 10px;
-  border-radius: 3px;
-  width: 535px;
-  display: inline-block;
-  vertical-align: top;
 }
 
-#content .mode .content {
+.column {
-  padding: 10px;
-}
-
-#preview {
-  margin-left: 20px;
-}
-
-#leftColumn {
-  float: left;
-  width: 700px;
-}
-
-#rightColumn {
-  width: 240px;
-  float: right;
-}
-
-textarea#markdown {
   padding: 0;
   margin: 0;
-  width: 100%;
+  white-space: nowrap;
-  height: 400px;
+  display: inline-block;
-  overflow: auto;
+  width: 50%;
-  font-size: 15px;
+  vertical-align: top;
-  border: none;
+  overflow-y: scroll;
-/*  border: 2px solid #D1D1BC;*/
-  resize: vertical;
-  outline: none;
-}
-
-#editor {
-  width: 100%;
 }
 
 #footer {
-  clear: both;
+  padding: 5px;
+  z-index: 1001;
+  position: absolute;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  padding: 10px;
   background-color: #444;
   color: #fff;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #footer #copyright {
-  font-size: 12px;
   color: #999;
 }
 
+#copyright img {
+  width: 16px;
+  display: block;
+  padding: 0;
+  margin: 0;
+}
 
 #footer #copyright a {
-  font-size: 12px;
+  display: block;
+  padding: 0;
+  margin: 0;
+  font-size:0;
   color: #999;
 }
 
 #footer #copyright a:hover {
   color: #fff;
-  text-decoration: underline;
+  text-decoration: none;
 }

public/index.html

@@ -27,11 +27,9 @@
     </div>
 
     <div id="container">
-      <div id="content" class="section">
-
-        <div id="edit" class="mode">
-          <div class="content">
 
+      <div id="edit" class="column">
+        <div id="editor-wrapper">
           <div id="editor"># Markdown syntax guide
 
 ## Headers
@@ -100,13 +98,11 @@ alert(message);
 
 This web site is using `markedjs/marked`.</div>
         </div>
-        </div>
+      </div><!-- Do not insert new line here --><div id="preview" class="column">
-
+          <div id="preview-wrapper">
-        <div id="preview" class="mode">
             <div id="output" class="content markdown-body">
           </div> 
         </div>
-
       </div>
     </div>
 

public/js/main.js

@@ -1,20 +1,35 @@
 $(function() {
-    var isEdited = false;
+    let isEdited = false;
+
+    let adjustScreen = () => {
+        let screenHeight = $(window).height();
+        let headerHeight = $('#header').outerHeight();
+        let footerHeight = $('#footer').outerHeight();
+        let containerHeight = screenHeight - headerHeight - footerHeight;
+        $('#container').css({ top: `${headerHeight}px` });
+        $('.column').css({ height: `${containerHeight}px`});
+    };
+
+    $(window).resize(() => {
+        adjustScreen();
+    });
 
     // Setup editor
-    var editor = ace.edit('editor');
+    let editor = ace.edit('editor');
     editor.getSession().setUseWrapMode(true);
+    editor.renderer.setScrollMargin(10, 10, 10, 10);
     editor.setOptions({
         maxLines: Infinity,
         indentedSoftWrap: false,
         fontSize: 14,
+        autoScrollEditorIntoView: true,
         theme: 'ace/theme/github',
         // TODO consider some options
     });
-
     editor.on('change', () => {
         isEdited = true;
         convert();
+        adjustScreen();
     });
 
     let convert = () => {
@@ -31,4 +46,5 @@ $(function() {
     });
 
     convert();
+    adjustScreen();
 });