extract expand-editor mixin for kibela layout

src/client/styles/scss/_layout_kibela.scss

@@ -1,4 +1,4 @@
-.kibela {
+body.kibela {
   .icon-link,
   .CodeMirror-hint-active,
   .nav-main-left-tab,
@@ -144,19 +144,47 @@
     border-top: solid 0.3em #5584E1 !important;
     border: solid 1.2px #D8D8D8;
   }
-  .tab-content {
-    padding: 1em;
-  }
-  .tab-pane {
-    .page-editor-editor-container {
-      margin: 0px;
-      border: none !important;
+  &.on-edit {
+    $header-plus-footer: 42px                     // .nav height
+                        + 5.5px                   // .kibela-block border-top
+                        + 15px                    // .tab-content padding-top
+                        + 1px                     // .page-editor-footer border-top
+                        + 60px;                   // .page-editor-footer min-height
+
+    @include expand-editor($header-plus-footer);
+
+    .main {
+      > .row.page-content {
+        > .col-xs-12 {
+          width: 100%;
+          padding: 0;
+        }
+      }
+    }
+
+    .tab-content {
+      padding-top: 15px;
+      #edit {
+        margin-left: 1em;
+        margin-right: 1em;
+      }
+    }
+    .tab-pane {
+      .page-editor-editor-container {
+        margin: 0px;
+        border: none !important;
+      }
+    }
+    .page-editor-preview-container {
+      background: white !important;
+      padding-right: 0px !important;
+      padding-left: 2em;
+    }
+    .page-editor-footer {
+      margin: 0;
+      padding: 13px;
+      min-height: 60px;
     }
-  }
-  .page-editor-preview-container {
-    background: white !important;
-    padding-right: 0px !important;
-    padding-left: 2em;
   }
 }
 .on-edit {

src/client/styles/scss/_mixins.scss

@@ -1,15 +1,76 @@
-@mixin variable-font-size($basesize) {
-  font-size: $basesize;
-  @media(max-width: $screen-lg) {
-    font-size: #{$basesize * 0.9};
-  }
-  @media(max-width: $screen-md) {
-    font-size: #{$basesize * 0.8};
-  }
-  @media(max-width: $screen-sm) {
-    font-size: #{$basesize * 0.7};
-  }
-  @media(max-width: $screen-xs) {
-    font-size: #{$basesize * 0.6};
-  }
-}
+@mixin variable-font-size($basesize) {
+  font-size: $basesize;
+  @media(max-width: $screen-lg) {
+    font-size: #{$basesize * 0.9};
+  }
+  @media(max-width: $screen-md) {
+    font-size: #{$basesize * 0.8};
+  }
+  @media(max-width: $screen-sm) {
+    font-size: #{$basesize * 0.7};
+  }
+  @media(max-width: $screen-xs) {
+    font-size: #{$basesize * 0.6};
+  }
+}
+
+@mixin expand-editor($header-plus-footer) {
+  $header-plus-footer: $header-plus-footer + 2px;   // add .main padding-top
+  $editor-margin: $header-plus-footer + 26px;       // add .btn-open-dropzone height
+
+  .main {
+    width: 100%;
+    height: 100vh;
+    margin-top: 0px !important;
+    padding-top: 2px;
+    padding-left: 0;
+    padding-right: 0;
+
+    &,
+    .content-main,
+    .tab-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      .tab-pane#edit, .tab-pane#hackmd {
+        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+        height: calc(100vh - #{$header-plus-footer});
+      }
+
+      #page-editor {
+        // right(preview)
+        &,
+        &>.row,
+        .page-editor-preview-container,
+        .page-editor-preview-body {
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+        }
+        // left(editor)
+        .page-editor-editor-container {
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+
+          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
+          .textarea-editor {
+            height: calc(100vh - #{$editor-margin});
+          }
+
+          @media (min-width: $screen-md) {
+            padding-right: 0;
+          }
+        }
+      }
+
+      #page-editor-with-hackmd {
+        &,
+        .hackmd-preinit, #iframe-hackmd-container > iframe {
+          width: 100vw;
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+        }
+      }
+    }
+  }
+}

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

@@ -11,11 +11,22 @@ body:not(.on-edit) {
 body.on-edit {
 
   // calculate margin
-  $header-plus-footer: 2px                      // .main padding-top
-                      + 42px                    // .nav height
+  $header-plus-footer: 42px                     // .nav height
                       + 1px                     // .page-editor-footer border-top
-                      + 40px;                   // .page-editor-footer min-height
-  $editor-margin: $header-plus-footer + 26px;   // .btn-open-dropzone height
+                      + 40px !default;          // .page-editor-footer min-height
+
+  @include expand-editor($header-plus-footer);
+
+  // for growi layout
+  .main {
+    > .row {
+      margin: 0;
+      > .col-lg-10, > .col-md-9 {
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
 
   // hide unnecessary elements
   .navbar.navbar-static-top,
@@ -67,71 +78,6 @@ body.on-edit {
   .container-fluid {
     padding-bottom: 0;
   }
-  .main {
-    width: 100%;
-    height: 100vh;
-    margin-top: 0px !important;
-    padding-top: 2px;
-    padding-left: 0;
-    padding-right: 0;
-
-    // for growi layout
-    > .row {
-      margin: 0;
-      > .col-lg-10, > .col-md-9 {
-        width: 100%;
-        padding: 0;
-      }
-    }
-
-    &,
-    .content-main,
-    .tab-content {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-
-      .tab-pane#edit, .tab-pane#hackmd {
-        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-        height: calc(100vh - #{$header-plus-footer});
-      }
-
-      #page-editor {
-        // right(preview)
-        &,
-        &>.row,
-        .page-editor-preview-container,
-        .page-editor-preview-body {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-        }
-        // left(editor)
-        .page-editor-editor-container {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-
-          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
-          .textarea-editor {
-            height: calc(100vh - #{$editor-margin});
-          }
-
-          @media (min-width: $screen-md) {
-            padding-right: 0;
-          }
-        }
-      }
-
-      #page-editor-with-hackmd {
-        &,
-        .hackmd-preinit, #iframe-hackmd-container > iframe {
-          width: 100vw;
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-        }
-      }
-
-    }
-  }
 
   .row.bg-title {
     $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin