GW-332: editor

src/client/js/components/PageEditor/Editor.jsx

@@ -342,14 +342,14 @@ export default class Editor extends AbstractEditor {
             className="btn btn-default btn-block btn-open-dropzone"
             onClick={() => { this.dropzone.open() }}
           >
-
             <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
             Attach files
-            <span className="d-none d-sm-block">
+            <span className="d-none d-sm-inline">
               &nbsp;by dragging &amp; dropping,&nbsp;
               <span className="btn-link">selecting them</span>,&nbsp;
               or pasting from the clipboard.
             </span>
+
           </button>
           )
         }

src/client/js/components/SavePageControls.jsx

@@ -95,7 +95,7 @@ class SavePageControls extends React.Component {
           )
         }
 
-        <div className="btn-group dropup">
+        <div className="btn-group btn-group-sm dropup">
           <button type="button" className="btn btn-primary px-5">{labelSubmitButton}</button>
           <button
             type="button"

src/client/styles/scss/_editor-navbar.scss

@@ -1,5 +1,10 @@
 .editor-container {
   .navbar-editor {
+    height: 30px;
+    padding: 0;
+
+    border-bottom: 1px solid transparent;
+
     li {
       display: inline-block;
     }

src/client/styles/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@import 'layout_variable';
+
 @mixin variable-font-size($basesize) {
   font-size: $basesize * 0.6;
 
@@ -15,8 +17,8 @@
   }
 }
 
-@mixin expand-editor($header-plus-footer) {
-  $header-plus-footer: $header-plus-footer + 2px; // add .main padding-top
+@mixin expand-editor($editor-header-plus-footer) {
+  $header-plus-footer: $grw-navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
 
   $editor-margin: $header-plus-footer //
     + 25px //   add .btn-open-dropzone height
@@ -24,7 +26,7 @@
 
   .main {
     width: 100%;
-    height: 100vh;
+    height: calc(100vh - #{$grw-navbar-height});
     padding-top: 2px;
     padding-right: 0;
     padding-left: 0;

src/client/styles/scss/_on-edit.scss

@@ -11,11 +11,11 @@ body:not(.on-edit) {
 
 body.on-edit {
   // calculate margin
-  $header-plus-footer: 42px //  .nav height
-    + 1px //                    .page-editor-footer border-top
-    + 40px !default; //         .page-editor-footer min-height
+  $editor-header-plus-footer: 42px // .nav-tabs height
+    + 1px //                          .page-editor-footer border-top
+    + 40px !default; //               .page-editor-footer min-height
 
-  @include expand-editor($header-plus-footer);
+  @include expand-editor($editor-header-plus-footer);
 
   // for growi layout
   .main {
@@ -31,7 +31,6 @@ body.on-edit {
   }
 
   // hide unnecessary elements
-  .navbar.navbar-static-top,
   .row.row-alerts,
   .row.page-list,
   .row.page-comments-row,
@@ -168,10 +167,6 @@ body.on-edit {
         }
       }
 
-      .navbar-editor {
-        border-bottom: 1px solid transparent;
-      }
-
       // add icon on cursor
       .autoformat-markdown-table-activated .CodeMirror-cursor {
         &:after {