Merge pull request #75 from standardnotes/flexbox

Flexbox

app/assets/javascripts/app/frontend/controllers/editor.js

@@ -46,8 +46,8 @@ angular.module('app.frontend')
   })
   .controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager) {
 
-    window.addEventListener("message", function(){
+    window.addEventListener("message", function(event){
-      console.log("App received message:", event);
+      // console.log("App received message:", event);
       if(event.data.status) {
         this.postNoteToExternalEditor();
       } else {

app/assets/javascripts/app/frontend/controllers/home.js

@@ -1,7 +1,5 @@
 angular.module('app.frontend')
 .controller('HomeCtrl', function ($scope, $rootScope, $timeout, modelManager, syncManager, authManager) {
-    $rootScope.bodyClass = "app-body-class";
-
     syncManager.loadLocalItems(function(items) {
       $scope.$apply();
 

app/assets/stylesheets/app/_common.scss

@@ -72,45 +72,3 @@
     }
   }
 }
-
-
-.section-menu {
-  padding-top: 0px;
-  width: 100%;
-  position: absolute;
-  padding-left: inherit;
-  padding-right: inherit;
-  left: 0;
-  right: 0;
-  bottom: 0px;
-  background-color: #f1f1f1;
-  color: $selected-text-color;
-  height: 28px;
-  cursor: default;
-
-  ol, ul {
-      margin-top: 5px;
-      margin-bottom: 10px;
-
-      &.dropdown-menu {
-        margin-top: 10px;
-      }
-  }
-
-  ul {
-    li {
-      text-align: left;
-
-      &.sep {
-        margin: 6px;
-        display: block;
-      }
-
-      a {
-        font-size: 13px;
-        font-weight: bold;
-        padding: 0 0;
-      }
-    }
-  }
-}

app/assets/stylesheets/app/_editor.scss

@@ -1,5 +1,10 @@
+$heading-height: 75px;
 .editor {
-  width: 60%;
+  flex: 1 50%;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
 
   &.fullscreen {
     width: 100%;
@@ -12,26 +17,17 @@
 
   .section-title-bar {
     border-bottom: none !important;
-
+    height: $heading-height !important;
-    // &.fullscreen {
-    //   opacity: 0.0;
-    //   -webkit-transition: all 300ms ease-in-out;
-    //   -moz-transition: all 300ms ease-in-out;
-    //   -ms-transition: all 300ms ease-in-out;
-    //   -o-transition: all 300ms ease-in-out;
-    //   transition: all 300ms ease-in-out;
-    //
-    //   &:hover {
-    //     opacity: 1.0;
-    //   }
-    }
   }
 
-  $heading-height: 100px;
+  .section-menu {
+    flex: 1 0 28px;
+    max-height: 28px;
+  }
+}
 
 .editor-heading {
 
-    position: absolute;
   width: 100%;
   padding: 15px;
   padding-top: 0px;
@@ -39,7 +35,6 @@
 
   min-height: $heading-height;
 
-    width: 100%;
   padding-right: 10px;
 
   &.fullscreen {
@@ -67,6 +62,7 @@
     }
 
   }
+
   .save-status {
     width: 20% !important;
     float: right;
@@ -96,31 +92,32 @@
 }
 
 .editor-content {
-    max-height: 100%;
+  flex: 1;
-
-    height: 100%;
-    clear: both;
-    min-width: 0;
-    padding-left: 10px;
-    padding-right: 10px;
-    overflow: auto;
-    text-align: center; // centers children div horizontally
   z-index: 10;
-    padding-top: $heading-height;
+  overflow-y: hidden;
+  height: 100%;
+  display: flex;
+  background-color: white;
 
   &.fullscreen {
     padding-top: 0px;
   }
 
+  #editor-iframe {
+    flex: 1;
+    width: 100%;
+  }
+
   .editable {
     font-family: monospace;
-      max-height: 100%;
+    flex: 1;
-      height: 100%;
+    overflow-y: scroll;
     width: 100%;
+
     border: none;
     outline: none;
     padding: 15px;
-      padding-top: 17px;
+    padding-top: 11px;
     font-size: 17px;
     resize: none;
 
@@ -132,67 +129,18 @@
   }
 }
 
-.nav-tabs {
-  a {
-      color: black;
-      text-decoration: none;
-  }
-  a {
-      background-color: transparent;
-  }
-}
 .nav {
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
+    ul {
+      font-weight: bold;
+    }
 }
 
-.nav-pills>li {
-    float: left;
-}
-.nav>li {
-    position: relative;
-    display: block;
-}
-
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
-    color: #fff;
-    background-color: #337ab7;
-}
-.nav-pills>li>a {
-    border-radius: 4px;
-}
 .nav>li>a {
     position: relative;
     display: block;
-    padding: 10px 15px;
+    font-weight: bold;
-}
+    user-select: none;
-
-.nav-tabs>li {
-    float: left;
-    margin-bottom: -1px;
-}
-.nav>li {
-    position: relative;
-    display: block;
-}
-
-.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
-    color: black;
-    cursor: pointer;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-bottom-color: transparent;
-}
-.nav-tabs>li>a {
-    margin-right: 2px;
-    line-height: 1.42857143;
-    border: 1px solid transparent;
-    // border-radius: 4px 4px 0 0;
-    cursor: pointer;
-}
-.nav>li>a {
-    position: relative;
-    display: block;
-    padding: 10px 15px;
 }

app/assets/stylesheets/app/_extensions.scss

@@ -42,6 +42,7 @@
 
   > .title {
     font-size: 14px;
+    font-weight: bold;
   }
 
   > .subtitle {

app/assets/stylesheets/app/_main.scss

@@ -45,6 +45,7 @@ body {
   height: 100%;
   font-size: 20px;
   margin: 0;
+  background-color: $bg-color;
 }
 
 .dark-button {
@@ -80,35 +81,21 @@ p {
   min-height: 100vh;
   height: 100vh;
   overflow: auto;
-}
-
-.app-body-class {
-  height: 100%;
   background-color: $bg-color;
-  min-width: 100px;
-  min-width: 900px;
 }
 
 $header-height: 25px;
 
-.app-container {
-  display: table;
-  background-color: $bg-color;
-  width: 100%;
-  height: calc(100% - #{$header-height});
-  padding-top: 0px;
-  font-size: 0;
-  margin-top: 0;
-}
-
 $section-header-height: 70px;
 
 .app {
-  height: 100%;
+  // height: 100%;
+  height: calc(100% - #{$header-height});
   width: 100%;
-  display: table-row;
+  display: flex;
   vertical-align: top;
   overflow: hidden;
+  position: relative;
 
   .light-button {
     background-color: $bg-color;
@@ -127,15 +114,8 @@ $section-header-height: 70px;
 
   .section {
     padding-bottom: 0px;
-
-    display: block;
     height: 100%;
     max-height: calc(100vh - #{$header-height});
-    float: left;
-    overflow-y: auto;
-    overflow-x: hidden;
-    min-width: 0;
-
     font-size: 17px;
 
     .scrollable {
@@ -148,7 +128,6 @@ $section-header-height: 70px;
       max-height: 100%;
       background-color: white;
       position: relative;
-      box-shadow: 0px 0px 2px rgba(gray, 0.3);
     }
 
     .section-title-bar {
@@ -185,3 +164,41 @@ $section-header-height: 70px;
    }
   }
 }
+
+.section-menu {
+  width: 100%;
+  padding-top: 0px;
+  padding-left: 21px;
+  padding-right: 21px;
+
+  background-color: #f1f1f1;
+  color: $selected-text-color;
+  height: 28px;
+  cursor: default;
+
+  ol, ul {
+      margin-top: 5px;
+      margin-bottom: 10px;
+
+      &.dropdown-menu {
+        margin-top: 10px;
+      }
+  }
+
+  ul {
+    li {
+      text-align: left;
+
+      &.sep {
+        margin: 6px;
+        display: block;
+      }
+
+      a {
+        font-size: 13px;
+        font-weight: bold;
+        padding: 0 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/app/_notes.scss

@@ -1,8 +1,11 @@
 .notes {
-  width: 25%;
   border-left: 1px solid #dddddd;
   border-right: 1px solid #dddddd;
 
+  flex: 1 20%;
+  max-width: 350px;
+  min-width: 170px;
+
   $notes-title-bar-height: 130px;
 
   .notes-title-bar {

app/assets/stylesheets/app/_tags.scss

@@ -1,5 +1,8 @@
 .tags {
-    width: 15%;
+    // width: 15%;
+    flex: 1 10%;
+    max-width: 180px;
+    min-width: 100px;
 
     $tags-title-bar-height: 55px;
 

app/assets/templates/frontend/editor.html.haml

@@ -1,5 +1,4 @@
 .section.editor{"ng-class" => "{'fullscreen' : ctrl.fullscreen}"}
-  .content
   .section-title-bar.editor-heading{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
     .title
       %input.input#note-title-editor{"ng-model" => "ctrl.note.title", "ng-keyup" => "$event.keyCode == 13 && ctrl.saveTitle($event)",
@@ -10,8 +9,8 @@
       %input.tags-input{"type" => "text", "ng-keyup" => "$event.keyCode == 13 && ctrl.updateTagsFromTagsString($event, ctrl.tagsString)",
       "ng-model" => "ctrl.tagsString", "placeholder" => "#tags", "ng-blur" => "ctrl.updateTagsFromTagsString($event, ctrl.tagsString)"}
   .section-menu
-        %ul.nav.nav-pills
+    %ul.nav
-          %li.dropdown{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
+      %li.dropdown.pull-left.mr-10{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
         %a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false;"}
           File
           %span.caret
@@ -25,7 +24,7 @@
             .text Delete
 
       %li.sep
-          %li.dropdown{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
+      %li.dropdown.pull-left.mr-10{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"}
         %a.dropdown-toggle{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false;"}
           Editor
           %span.caret
@@ -33,7 +32,7 @@
         %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.customEditor"}
 
       %li.sep
-          %li.dropdown{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
+      %li.dropdown.pull-left{"ng-if" => "ctrl.hasAvailableExtensions()", "click-outside" => "ctrl.showExtensions = false;", "is-open" => "ctrl.showExtensions"}
         %a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false;"}
           Extensions
           %span.caret
@@ -41,6 +40,6 @@
         %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"}
 
   .editor-content{"ng-class" => "{'fullscreen' : ctrl.fullscreen }"}
-      %iframe#editor-iframe{"ng-if" => "ctrl.customEditor", "ng-src" => "{{ctrl.customEditor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%; height: 100%; z-index: 1000; float: left;"}
+    %iframe#editor-iframe{"ng-if" => "ctrl.customEditor", "ng-src" => "{{ctrl.customEditor.url | trusted}}", "frameBorder" => "0", "style" => "width: 100%;"}
     %textarea.editable#note-text-editor{"ng-if" => "!ctrl.customEditor", "ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-model" => "ctrl.note.text",
      "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()"}

app/assets/templates/frontend/home.html.haml

@@ -1,5 +1,4 @@
 .main-ui-view
-  .app-container
   .app
     %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade", "all-tag" => "allTag",
                     "tags" => "tags"}

app/assets/templates/frontend/layouts/about.html.haml

@@ -1,6 +0,0 @@
-.about.animated.fadeIn
-  .title About
-  .summary Namewhale helps you find a unique name for your startup. Using an intelligent, seed-based algorithm, names are generated based on the sound, style, and feel of the seed words you chose.
-  .links
-    %a{"href" => "https://itunes.apple.com/us/app/namewhale/id1028881375?ls=1&mt=8", "target" => "_blank"} Namewhale on the AppStore
-    %a{"href" => "https://twitter.com/namewhale", "target" => "_blank"} @namewhale

app/assets/templates/frontend/layouts/footer.html.haml

@@ -1,4 +0,0 @@
-%footer.footer{"ng-class" => "footerClass"}
-  .container
-    .row
-      .footer-about-section

app/views/application/frontend.html.erb

@@ -37,7 +37,7 @@
 
   </head>
 
-  <body ng-class="bodyClass">
+  <body>
     <div ui-view="content"></div>
   </body>
 

test/javascripts/controllers/HomeCtrl_spec.js

@@ -13,10 +13,6 @@ describe("app.frontend", function() {
       });
     }));
 
-    it('should have a body class', function() {
-      expect(scope.bodyClass).toEqual('app-body-class');
-    });
-
     it('should have an All tag', function() {
       expect(scope.allTag).toBeDefined();
       expect(scope.allTag.title).toEqual("All");