adjust .btn-open-dropzone styles

resource/js/components/PageEditor/Editor.js

@@ -251,9 +251,12 @@ export default class Editor extends AbstractEditor {
           onClick={() => {this.refs.dropzone.open()}}>
 
           <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
-          Attach files by dragging &amp; dropping,&nbsp;
-          <span className="btn-link">selecting them</span>,&nbsp;
-          or pasting from the clipboard.
+          Attach files
+          <span className="desc-long">
+            &nbsp;by dragging &amp; dropping,&nbsp;
+            <span className="btn-link">selecting them</span>,&nbsp;
+            or pasting from the clipboard.
+          </span>
         </button>
 
       </div>

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

@@ -122,4 +122,33 @@
   .loading-keymap {
     @include overlay-processing-style();
   }
+
+  .btn-open-dropzone {
+    z-index: 2;
+    font-size: small;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    border: none;
+    border-radius: 0;
+    border-top: 1px dotted #ccc;
+    &:active {
+      box-shadow: none;
+    }
+  }
+
+}
+
+#page-editor {
+  @media (max-width: $screen-xs) {
+    .desc-long {
+      display: none;
+    }
+  }
+}
+.comment-form {
+  @media (max-width: $screen-sm) {
+    .desc-long {
+      display: none;
+    }
+  }
 }

resource/styles/scss/_on-edit.scss

@@ -74,7 +74,6 @@ body.on-edit {
                          + 1px                      // .page-editor-footer border-top
                          + 40px;                    // .page-editor-footer min-height
       $editor-margin: $header-plus-footer + 22px;   // .btn-open-dropzone height
-      $editor-margin-sm: $header-plus-footer;
 
       #page-editor {
         // right(preview)
@@ -93,10 +92,6 @@ body.on-edit {
           .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
           .textarea-editor {
             height: calc(100vh - #{$editor-margin});
-            // less than smartphone
-            @media (max-width: $screen-xs) {
-              height: calc(100vh - #{$editor-margin-sm});
-            }
           }
         }
       }
@@ -171,24 +166,6 @@ body.on-edit {
       }
     }
 
-    .btn-open-dropzone {
-      z-index: 2;
-      font-size: small;
-      text-align: right;
-      padding-top: 3px;
-      padding-bottom: 0;
-      border: none;
-      border-radius: 0;
-      border-top: 1px dotted #ccc;
-      &:active {
-        box-shadow: none;
-      }
-      // hide if screen size is less than smartphone
-      @media (max-width: $screen-xs) {
-        display: none;
-      }
-    }
-
   }
   .page-editor-preview-container {
   }

resource/styles/scss/style.scss

@@ -21,7 +21,7 @@
 @import 'comment_growi';
 @import 'create-page';
 @import 'create-template';
-@import 'editor-overlay';
+@import 'editor-attachment';
 @import 'layout';
 @import 'layout_crowi';
 @import 'layout_crowi_sidebar';