reorganize layout for on-edit

src/client/styles/scss/_mixins.scss

@@ -15,9 +15,8 @@
   }
 }
 
-@mixin expand-editor($editor-header-plus-footer, $navbar-height-adjustment: 0px) {
-  $navbar-height: $grw-navbar-border-width + $navbar-height-adjustment;
-  $header-plus-footer: $navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
+@mixin expand-editor($editor-margin-top) {
+  $header-plus-footer: $editor-margin-top + $grw-editor-navbar-bottom-height;
 
   $editor-margin: $header-plus-footer //
     + 25px //   add .btn-open-dropzone height
@@ -25,8 +24,7 @@
 
   .main {
     width: 100%;
-    height: calc(100vh - #{$navbar-height});
-    padding-top: 2px;
+    height: calc(100vh - #{$editor-margin-top});
     margin-top: 0px !important;
 
     &,
@@ -36,8 +34,7 @@
       flex: 1;
       flex-direction: column;
 
-      #edit,
-      #hackmd {
+      .tab-pane {
         height: calc(100vh - #{$header-plus-footer});
         min-height: calc(100vh - #{$header-plus-footer}); // for IE11
       }

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

@@ -20,6 +20,15 @@ body.on-edit {
     width: 100vw;
   }
 
+  // restrict height of subnav
+  .grw-subnav {
+    max-height: 95px;
+
+    @include media-breakpoint-up(md) {
+      max-height: 115px;
+    }
+  }
+
   .page-wrapper {
     position: relative;
     top: $grw-navbar-border-width;
@@ -27,11 +36,17 @@ body.on-edit {
   }
 
   // calculate margin
-  $editor-header-plus-footer: 42px //               .nav-tabs height
-    + 1px //                                        .page-editor-footer border-top
-    + $grw-editor-navbar-bottom-height !default; // .EditorNavbarBottom min-height
+  $editor-margin-top: 95px //              .grw-subnav height
+    + $grw-navbar-border-width;
+  @include expand-editor($editor-margin-top);
 
-  @include expand-editor($editor-header-plus-footer);
+  @include media-breakpoint-up(md) {
+    // calculate margin
+    $editor-margin-top: 115px //              .grw-subnav height
+      + $grw-navbar-border-width;
+
+    @include expand-editor($editor-margin-top);
+  }
 
   // for growi layout
   .main {
@@ -86,42 +101,42 @@ body.on-edit {
     padding-bottom: 0;
   }
 
-  .row.grw-subnav {
-    $left-margin: $grw-nav-main-left-tab-width * 2 + 25px; // width of .grw-nav-main-left-tab x 2 + some margin
-    $right-margin: 128px + 94px + 46px; //                    width of all of grw-nav-main-right-tab
-
-    position: absolute;
-    left: $left-margin;
-    z-index: 7; // forward than .CodeMirror-vscrollbar
-    width: calc(100% - #{$left-margin} - #{$right-margin});
-    padding-top: 3px;
-    pointer-events: none; // disable pointer-events because it becomes an obstacle
-
-    background: none;
-
-    > .grw-subnav-container {
-      width: 100%; //   for crowi layout
-      padding: 0; //    for crowi layout
-      pointer-events: initial; // enable pointer-events
-    }
-  }
-
-  .grw-page-path-nav-for-edit {
-    position: absolute;
-
-    .grw-page-path-link {
-      font-size: 20px;
-      line-height: 1em;
-    }
-    .separator {
-      margin-right: 0.1em;
-      margin-left: 0.1em;
-    }
-  }
-
-  .tag-labels {
-    line-height: 1em;
-  }
+  // .row.grw-subnav {
+  //   $left-margin: $grw-nav-main-left-tab-width * 2 + 25px; // width of .grw-nav-main-left-tab x 2 + some margin
+  //   $right-margin: 128px + 94px + 46px; //                    width of all of grw-nav-main-right-tab
+
+  //   position: absolute;
+  //   left: $left-margin;
+  //   z-index: 7; // forward than .CodeMirror-vscrollbar
+  //   width: calc(100% - #{$left-margin} - #{$right-margin});
+  //   padding-top: 3px;
+  //   pointer-events: none; // disable pointer-events because it becomes an obstacle
+
+  //   background: none;
+
+  //   > .grw-subnav-container {
+  //     width: 100%; //   for crowi layout
+  //     padding: 0; //    for crowi layout
+  //     pointer-events: initial; // enable pointer-events
+  //   }
+  // }
+
+  // .grw-page-path-nav-for-edit {
+  //   position: absolute;
+
+  //   .grw-page-path-link {
+  //     font-size: 20px;
+  //     line-height: 1em;
+  //   }
+  //   .separator {
+  //     margin-right: 0.1em;
+  //     margin-left: 0.1em;
+  //   }
+  // }
+
+  // .tag-labels {
+  //   line-height: 1em;
+  // }
 
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;