fix (UI): fix UI + improvements

client/helpers/dom.js

@@ -1,8 +1,15 @@
-export function screenHeight(){
+export function screenHeight(withMenuBar){
     const $breadcrumb = document.querySelector(".component_breadcrumb");
-    const $menubar = document.querySelector(".component_menubar");
-    let size = document.body.clientHeight;
-    if($breadcrumb){ size -= $breadcrumb.clientHeight; }
-    if($menubar){ size -= $menubar.clientHeight; }
+    let size = document.body.offsetHeight;
+    if($breadcrumb){ size -= $breadcrumb.offsetHeight; }
+    return size;
+}
+
+export function screenHeightWithMenubar(){
+    const $breadcrumb = document.querySelector(".component_breadcrumb");
+    const $menubar = document.querySelector(".component_menubar");
+    let size = document.body.offsetHeight;
+    if($breadcrumb){ size -= $breadcrumb.offsetHeight; }
+    if($menubar){ size -= $menubar.offsetHeight; }
     return size;
 }

client/helpers/index.js

@@ -8,6 +8,6 @@ export { pathBuilder, basename, dirname } from './path';
 export { memory } from './memory';
 export { prepare } from './navigate';
 export { invalidate, http_get, http_post, http_delete } from './ajax';
-export { screenHeight } from './dom';
+export { screenHeight, screenHeightWithMenubar } from './dom';
 export { prompt } from './prompt';
 export { notify } from './notify';

client/pages/viewerpage/editor.js

@@ -20,6 +20,7 @@ import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/foldgutter.css';
 
 import './editor.scss';
+import { debounce, screenHeightWithMenubar  } from '../../helpers/';
 
 export class Editor extends React.Component {
     constructor(props){
@@ -27,8 +28,10 @@ export class Editor extends React.Component {
         this.state = {
             loading: null,
             editor: null,
-            filename: this.props.filename
+            filename: this.props.filename,
+            height: 0
         };
+        this.resetHeight = debounce(this.resetHeight.bind(this), 100);
     }
 
     componentWillReceiveProps(props){
@@ -77,12 +80,22 @@ export class Editor extends React.Component {
                 this.props.onSave && this.props.onSave();
             };
         }
+        this.resetHeight();
+        window.addEventListener("resize", this.resetHeight);
     }
 
     componentWillUnmount(){
         this.state.editor.clearHistory();
+        window.removeEventListener("resize", this.resetHeight);
     }
 
+    resetHeight(){
+        this.setState({
+            height: screenHeightWithMenubar()
+        });
+    }
+
+
     loadMode(file){
         let ext = file.split('.').pop(),
             mode = null;
@@ -134,7 +147,7 @@ export class Editor extends React.Component {
                 <Loader/>
               </NgIf>
               <NgIf cond={this.state.loading === false} style={{height: '100%'}}>
-                <div id="editor" style={{height: '100%'}}></div>
+                <div id="editor" style={{height: this.state.height+"px"}}></div>
               </NgIf>
             </div>
         );

client/pages/viewerpage/editor.scss

@@ -1,7 +1,9 @@
 .CodeMirror {
     height: 100%;
-    color: #333333;
+    color: #3b4045;
     background: var(--bg-color);
+    font-size: 14px;
+    font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
 }
 .CodeMirror-scroll { -webkit-overflow-scrolling: touch; }
 

client/router.js

@@ -9,16 +9,14 @@ export default class AppRouter extends React.Component {
         return (
             <div style={{height: '100%'}}>
               <BrowserRouter>
-                <div style={{height: '100%'}}>
-                  <Switch>
-                    <Route exact path="/" component={HomePage} />
-                    <Route path="/login" component={ConnectPage} />
-                    <Route path="/files/:path*" component={FilesPage} />
-                    <Route path="/view/:path*" component={ViewerPage} />
-                    <Route path="/logout" component={LogoutPage} />
-                    <Route component={NotFoundPage} />
-                  </Switch>
-                </div>
+                <Switch>
+                  <Route exact path="/" component={HomePage} />
+                  <Route path="/login" component={ConnectPage} />
+                  <Route path="/files/:path*" component={FilesPage} />
+                  <Route path="/view/:path*" component={ViewerPage} />
+                  <Route path="/logout" component={LogoutPage} />
+                  <Route component={NotFoundPage} />
+                </Switch>
               </BrowserRouter>
               <ModalPrompt />
               <Notification />