Merge pull request #2116 from weseek/support/adjust-eliminate-the-gap-between-navbar-and-editor

Support/adjust eliminate the gap between navbar and editor

src/client/styles/scss/_layout_kibela.scss

@@ -1,4 +1,11 @@
+$navbar-height-adjustment: 10px;
+
 body.kibela {
+  /* navbar for kibela */
+  #page-wrapper {
+    margin-top: 60px;
+  }
+
   /* Logo */
   .logo {
     .logo-mark {
@@ -40,7 +47,7 @@ body.kibela {
 
   .kibela-block {
     position: relative;
-    top: 20px;
+    top: 10px;
     right: 100px;
     bottom: 0px;
     left: 0px;
@@ -123,10 +130,13 @@ body.kibela {
       + 1px //                    .page-editor-footer border-top
       + 60px; //                  .page-editor-footer min-height
 
-    @include expand-editor($header-plus-footer);
+    @include expand-editor($header-plus-footer, $navbar-height-adjustment);
 
     .kibela-block {
+      top: 0px;
       max-width: unset;
+      padding-top: 0px;
+      border: 0px;
     }
 
     .tab-content {
@@ -157,9 +167,3 @@ body.kibela {
     }
   }
 }
-
-.on-edit {
-  .kibela-block {
-    border: 0px;
-  }
-}

src/client/styles/scss/_mixins.scss

@@ -17,7 +17,8 @@
   }
 }
 
-@mixin expand-editor($editor-header-plus-footer) {
+@mixin expand-editor($editor-header-plus-footer, $navbar-height-adjustment: 0px) {
+  $grw-navbar-height: $grw-navbar-height + $navbar-height-adjustment;
   $header-plus-footer: $grw-navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
 
   $editor-margin: $header-plus-footer //