diff --git a/app/assets/javascripts/app/frontend/controllers/home.js b/app/assets/javascripts/app/frontend/controllers/home.js index 507f3c931..79880660d 100644 --- a/app/assets/javascripts/app/frontend/controllers/home.js +++ b/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(); diff --git a/app/assets/stylesheets/app/_common.scss b/app/assets/stylesheets/app/_common.scss index ea9cb0895..87f8bbdb0 100644 --- a/app/assets/stylesheets/app/_common.scss +++ b/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; - } - } - } -} diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss index c122eac3a..95707f564 100644 --- a/app/assets/stylesheets/app/_editor.scss +++ b/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,187 +17,124 @@ .section-title-bar { border-bottom: none !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; - // } - } + height: $heading-height !important; } - $heading-height: 100px; + .section-menu { + flex: 1 0 28px; + max-height: 28px; + } +} - .editor-heading { +.editor-heading { - position: absolute; - width: 100%; - padding: 15px; + width: 100%; + padding: 15px; + padding-top: 0px; + background-color: white; + + min-height: $heading-height; + + padding-right: 10px; + + &.fullscreen { + position: relative; + } + + > .title { + font-size: 18px; + font-weight: bold; padding-top: 0px; - background-color: white; - - min-height: $heading-height; - width: 100%; - padding-right: 10px; - &.fullscreen { - position: relative; - } - - > .title { - font-size: 18px; + > .input { + float: left; + text-overflow:ellipsis; + width: 90%; font-weight: bold; - padding-top: 0px; - width: 100%; - - > .input { - float: left; - text-overflow:ellipsis; - width: 90%; - font-weight: bold; - border: none; - outline: none; - background-color: transparent; - - &:disabled { - color: black; - } - } - - } - .save-status { - width: 20% !important; - float: right; - position: absolute; - - right: 20px; - font-size: 12px; - text-transform: none; - font-weight: normal; - margin-top: 4px; - width: 120px; - text-align: right; - color: rgba(black, 0.23); - } - - .tags { - clear: left; - width: 100%; - height: 25px; - - .tags-input { - background-color: transparent; - width: 100%; - border: none; - } - } - } - - .editor-content { - max-height: 100%; - - 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; - - &.fullscreen { - padding-top: 0px; - } - - .editable { - font-family: monospace; - max-height: 100%; - height: 100%; - width: 100%; border: none; outline: none; - padding: 15px; - padding-top: 17px; - font-size: 17px; - resize: none; + background-color: transparent; - &.fullscreen { - padding: 85px 10%; - max-width: 1200px; - display: inline-block; + &:disabled { + color: black; } } + + } + + .save-status { + width: 20% !important; + float: right; + position: absolute; + + right: 20px; + font-size: 12px; + text-transform: none; + font-weight: normal; + margin-top: 4px; + width: 120px; + text-align: right; + color: rgba(black, 0.23); + } + + .tags { + clear: left; + width: 100%; + height: 25px; + + .tags-input { + background-color: transparent; + width: 100%; + border: none; + } + } } -.nav-tabs { - a { - color: black; - text-decoration: none; +.editor-content { + flex: 1; + z-index: 10; + background-color: white; + overflow-y: hidden;; + + &.fullscreen { + padding-top: 0px; } - a { - background-color: transparent; + + #editor-iframe { + max-height: 100%; + height: 100%; + width: 100%; + } + + .editable { + font-family: monospace; + max-height: 100%; + overflow-y: scroll; + height: 100%; + width: 100%; + border: none; + outline: none; + padding: 15px; + padding-top: 11px; + font-size: 17px; + resize: none; + + &.fullscreen { + padding: 85px 10%; + max-width: 1200px; + display: inline-block; + } } } + .nav { padding-left: 0; margin-bottom: 0; list-style: none; } -.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; -} - -.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; } diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss index 092bfb6d5..621d97678 100644 --- a/app/assets/stylesheets/app/_main.scss +++ b/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; + } + } + } +} diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss index 923e7cf57..4294ff6de 100644 --- a/app/assets/stylesheets/app/_notes.scss +++ b/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 { diff --git a/app/assets/stylesheets/app/_tags.scss b/app/assets/stylesheets/app/_tags.scss index 7d3ce9e34..ba45efd89 100644 --- a/app/assets/stylesheets/app/_tags.scss +++ b/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; diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml index 2556b403c..41dedafed 100644 --- a/app/assets/templates/frontend/editor.html.haml +++ b/app/assets/templates/frontend/editor.html.haml @@ -1,46 +1,45 @@ .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)", - "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", - "select-on-click" => "true"} - .save-status{"ng-class" => "{'red bold': ctrl.saveError}", "ng-bind-html" => "ctrl.noteStatus"} - .tags - %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 - %li.dropdown{"click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"} - %a.dropdown-toggle{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false;"} - File - %span.caret - %span.sr-only + .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)", + "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", + "select-on-click" => "true"} + .save-status{"ng-class" => "{'red bold': ctrl.saveError}", "ng-bind-html" => "ctrl.noteStatus"} + .tags + %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 + %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 + %span.sr-only - %ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} - %li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"} - .text Toggle Fullscreen - .shortcut Cmd + O - %li{"ng-click" => "ctrl.deleteNote()"} - .text Delete + %ul.dropdown-menu.dropdown-menu-left.nt-dropdown-menu.dark{"ng-if" => "ctrl.showMenu"} + %li{"ng-click" => "ctrl.selectedMenuItem(); ctrl.toggleFullScreen()"} + .text Toggle Fullscreen + .shortcut Cmd + O + %li{"ng-click" => "ctrl.deleteNote()"} + .text Delete - %li.sep - %li.dropdown{"click-outside" => "ctrl.showEditorMenu = false;", "is-open" => "ctrl.showEditorMenu"} - %a.dropdown-toggle{"ng-click" => "ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false;"} - Editor - %span.caret - %span.sr-only - %editor-menu{"ng-if" => "ctrl.showEditorMenu", "callback" => "ctrl.selectedEditor", "selected-editor" => "ctrl.customEditor"} + %li.sep + %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 + %span.sr-only + %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"} - %a.dropdown-toggle{"ng-click" => "ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false;"} - Extensions - %span.caret - %span.sr-only - %contextual-extensions-menu{"ng-if" => "ctrl.showExtensions", "item" => "ctrl.note"} + %li.sep + %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 + %span.sr-only + %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;"} - %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()"} + .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%;"} + %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()"} diff --git a/app/assets/templates/frontend/home.html.haml b/app/assets/templates/frontend/home.html.haml index f7057c955..82642f6f9 100644 --- a/app/assets/templates/frontend/home.html.haml +++ b/app/assets/templates/frontend/home.html.haml @@ -1,12 +1,11 @@ .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 + %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade", "all-tag" => "allTag", + "tags" => "tags"} - %notes-section{"remove-tag" => "notesRemoveTag", "add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", - "tag" => "selectedTag", "remove" => "deleteNote"} + %notes-section{"remove-tag" => "notesRemoveTag", "add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", + "tag" => "selectedTag", "remove" => "deleteNote"} - %editor-section{"ng-if" => "selectedNote", "note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"} + %editor-section{"ng-if" => "selectedNote", "note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"} %header diff --git a/app/assets/templates/frontend/layouts/about.html.haml b/app/assets/templates/frontend/layouts/about.html.haml deleted file mode 100644 index c274dd210..000000000 --- a/app/assets/templates/frontend/layouts/about.html.haml +++ /dev/null @@ -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 diff --git a/app/assets/templates/frontend/layouts/footer.html.haml b/app/assets/templates/frontend/layouts/footer.html.haml deleted file mode 100644 index f378522db..000000000 --- a/app/assets/templates/frontend/layouts/footer.html.haml +++ /dev/null @@ -1,4 +0,0 @@ -%footer.footer{"ng-class" => "footerClass"} - .container - .row - .footer-about-section diff --git a/app/views/application/frontend.html.erb b/app/views/application/frontend.html.erb index 5e965dc17..e60481af3 100644 --- a/app/views/application/frontend.html.erb +++ b/app/views/application/frontend.html.erb @@ -37,7 +37,7 @@ - +