organize _editor-overlay.scss

resource/js/components/PageEditor/Editor.js

@@ -185,22 +185,9 @@ export default class Editor extends AbstractEditor {
     return className;
   }
 
-  getOverlayStyle() {
-    return {
-      position: 'absolute',
-      zIndex: 4,  // forward than .CodeMirror-gutters
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-    };
-  }
-
   renderDropzoneOverlay() {
-    const overlayStyle = this.getOverlayStyle();
-
     return (
-      <div style={overlayStyle} className="overlay">
+      <div className="overlay">
         {this.state.isUploading &&
           <span className="overlay-content">
             <div className="speeding-wheel d-inline-block"></div>
@@ -221,8 +208,8 @@ export default class Editor extends AbstractEditor {
 
     const isMobile = this.props.isMobile;
 
-    return <React.Fragment>
-      <div style={flexContainer} className="dropzone-container">
+    return (
+      <div style={flexContainer} className="editor-container">
         <Dropzone
             ref="dropzone"
             disableClick
@@ -270,8 +257,7 @@ export default class Editor extends AbstractEditor {
         </button>
 
       </div>
-
-    </React.Fragment>;
+    );
   }
 
 }

resource/styles/scss/dropzone.scss → resource/styles/scss/_editor-overlay.scss

@@ -1,10 +1,16 @@
-.dropzone-container {
+.editor-container {
   .overlay {
     // layout
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: 15px;
+
+    position: absolute;
+    z-index: 7;  // forward than .CodeMirror-vscrollbar
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 
   .overlay-content {
@@ -17,19 +23,6 @@
     }
   }
 
-  .comment-form {
-    .overlay {
-      // style
-      margin-right: 15px;
-      margin-top: 55px;
-      margin-bottom: 55px;
-    }
-    .overlay-content {
-      font-size: 1.8em;
-    }
-  }
-
-
   @mixin overlay-processing-style() {
     .overlay {
       background: rgba(255,255,255,0.5);
@@ -58,6 +51,8 @@
       }
     }
 
+    position: relative;   // against .overlay position: absolute
+
     // unuploadable or rejected
     &.dropzone-unuploadable, &.dropzone-rejected {
       .overlay {

resource/styles/scss/style.scss

@@ -21,6 +21,7 @@
 @import 'comment_growi';
 @import 'create-page';
 @import 'create-template';
+@import 'editor-overlay';
 @import 'layout';
 @import 'layout_crowi';
 @import 'layout_crowi_sidebar';
@@ -35,7 +36,6 @@
 @import 'user';
 @import 'user_growi';
 @import 'wiki';
-@import 'dropzone';
 
 /*
  * for Guest User Mode