adjust editor layout

src/client/js/components/PageEditor.jsx

@@ -288,8 +288,8 @@ class PageEditor extends React.Component {
     const emojiStrategy = this.props.appContainer.getEmojiStrategy();
 
     return (
-      <div className="row">
-        <div className="col-md-6 col-sm-12 page-editor-editor-container">
+      <div className="d-flex">
+        <div className="page-editor-editor-container" style={{ flex: 1 }}>
           <Editor
             ref={(c) => { this.editor = c }}
             value={this.state.markdown}
@@ -305,7 +305,7 @@ class PageEditor extends React.Component {
             onSave={this.onSaveWithShortcut}
           />
         </div>
-        <div className="col-md-6 hidden-sm hidden-xs page-editor-preview-container">
+        <div className="d-none d-xl-block page-editor-preview-container" style={{ flex: 1 }}>
           <Preview
             markdown={this.state.markdown}
             // eslint-disable-next-line no-return-assign

src/client/styles/scss/_mixins.scss

@@ -28,8 +28,6 @@
     width: 100%;
     height: calc(100vh - #{$grw-navbar-height});
     padding-top: 2px;
-    padding-right: 0;
-    padding-left: 0;
     margin-top: 0px !important;
 
     &,
@@ -66,10 +64,6 @@
           .textarea-editor {
             height: calc(100vh - #{$editor-margin});
           }
-
-          @include media-breakpoint-up(md) {
-            padding-right: 0;
-          }
         }
       }
 

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

@@ -19,14 +19,8 @@ body.on-edit {
 
   // for growi layout
   .main {
-    > .row {
-      margin: 0;
-
-      > .col-lg-10,
-      > .col-md-9 {
-        width: 100%;
-        padding: 0;
-      }
+    .col.grw-page-content-container {
+      padding: 0;
     }
   }
 
@@ -51,7 +45,7 @@ body.on-edit {
 
   // hide unnecessary elements for growi layout
   .revision-toc-container {
-    display: none;
+    display: none !important;
   }
 
   // hide unnecessary elements for crowi layout
@@ -192,6 +186,7 @@ body.on-edit {
     .page-editor-preview-body {
       padding-top: 18px;
       padding-right: 15px;
+      padding-left: 15px;
       overflow-y: scroll;
     }
 

src/server/views/layout-growi/page.html

@@ -13,7 +13,7 @@
 {% block content_main %}
   <div class="row">
 
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
 
       {% include '../widget/page_content.html' %}
 
@@ -25,7 +25,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
       {% include './widget/liker-and-seenusers.html' %}
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>

src/server/views/layout-growi/page_list.html

@@ -13,7 +13,7 @@
 {% block content_main %}
   <div class="row">
 
-    <div class="col-lg-10 col-md-9">
+    <div class="col grw-page-content-container">
 
       {% include '../widget/page_content.html' %}
 
@@ -25,7 +25,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
       {% include './widget/liker-and-seenusers.html' %}
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>