succeed to build

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -808,7 +808,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
         { this.renderLoadingKeymapOverlay() }
 
-        <div className="overlay overlay-gfm-cheatsheet mt-1 p-3 pt-3">
+        <div className="overlay overlay-gfm-cheatsheet d-none d-sm-block mt-1 p-3 pt-3">
           { this.state.isSimpleCheatsheetShown && this.renderSimpleCheatsheet() }
           { this.state.isCheatsheetModalButtonShown && this.renderCheatsheetModalButton() }
         </div>

src/client/js/components/PageEditor/Editor.jsx

@@ -314,7 +314,7 @@ export default class Editor extends AbstractEditor {
 
             <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
             Attach files
-            <span className="desc-long">
+            <span className="d-none d-sm-block">
               &nbsp;by dragging &amp; dropping,&nbsp;
               <span className="btn-link">selecting them</span>,&nbsp;
               or pasting from the clipboard.

src/client/styles/scss/_admin.scss

@@ -59,36 +59,40 @@
     }
   }
 
+  //// TODO: migrate to Bootstrap 4
+  //// omit all .btn-toggle and use Switches
+  //// https://getbootstrap.com/docs/4.2/components/forms/#switches
+  //
   // Toggle Twitter Bootstrap button class when active
   // https://jsfiddle.net/ms040m01/3/
-  @mixin active-color($color, $bg-color, $border-color) {
-    color: $color;
-    background-color: darken($bg-color, 10%);
-    border-color: $border-color;
-
-    &:hover {
-      background-color: darken($bg-color, 15%);
-    }
-  }
-  .btn-group.btn-toggle {
-    .btn {
-      min-width: 60px;
-    }
-    .btn.active[data-active-class='default'] {
-      @include active-color($btn-default-color, $btn-default-bg, $btn-default-border);
-    }
-    .btn.active[data-active-class='primary'] {
-      @include active-color($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-    }
-
-    // disabled btn-group styles
-    &.btn-group-disabled {
-      .btn:hover {
-        cursor: not-allowed;
-        background-color: unset;
-      }
-    }
-  }
+  // @mixin active-color($color, $bg-color, $border-color) {
+  //   color: $color;
+  //   background-color: darken($bg-color, 10%);
+  //   border-color: $border-color;
+
+  //   &:hover {
+  //     background-color: darken($bg-color, 15%);
+  //   }
+  // }
+  // .btn-group.btn-toggle {
+  //   .btn {
+  //     min-width: 60px;
+  //   }
+  //   .btn.active[data-active-class='default'] {
+  //     @include active-color($btn-default-color, $btn-default-bg, $btn-default-border);
+  //   }
+  //   .btn.active[data-active-class='primary'] {
+  //     @include active-color($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  //   }
+
+  //   // disabled btn-group styles
+  //   &.btn-group-disabled {
+  //     .btn:hover {
+  //       cursor: not-allowed;
+  //       background-color: unset;
+  //     }
+  //   }
+  // }
 
   // theme selector
   #themeOptions {

src/client/styles/scss/_comment_growi.scss

@@ -4,8 +4,7 @@
     padding: 1em;
     margin-left: 4.5em;
 
-    // screen-xs
-    @media (max-width: $screen-xs) {
+    @include media-breakpoint-down(xs) {
       margin-left: 3.5em;
     }
 
@@ -20,8 +19,7 @@
       border: 1em solid transparent;
       border-left-width: 0;
 
-      // screen-xs
-      @media (max-width: $screen-xs) {
+      @include media-breakpoint-down(xs) {
         top: 1em;
       }
     }
@@ -32,8 +30,8 @@
     width: 3em;
     height: 3em;
     margin-top: 0.8em;
-    // screen-xs
-    @media (max-width: $screen-xs) {
+
+    @include media-breakpoint-down(xs) {
       width: 2em;
       height: 2em;
     }

src/client/styles/scss/_comment_kibela.scss

@@ -5,7 +5,7 @@
     padding: 1em;
     margin-left: 4.5em;
 
-    @media (max-width: $screen-xs) {
+    @include media-breakpoint-down(xs) {
       margin-left: 3.5em;
     }
 
@@ -24,7 +24,7 @@
       border-left: 20px solid transparent;
       border-left-width: 0;
 
-      @media (max-width: $screen-xs) {
+      @include media-breakpoint-down(xs) {
         top: 1em;
       }
     }
@@ -33,9 +33,10 @@
   %picture {
     float: left;
     width: 3em;
-    height: 3em; // screen-xs
+    height: 3em;
     margin-top: 0.8em;
-    @media (max-width: $screen-xs) {
+
+    @include media-breakpoint-down(xs) {
       width: 2em;
       height: 2em;
     }
@@ -149,22 +150,25 @@
     .CodeMirror {
       border: 0px !important;
     }
-    #page-editor {
-      @media (max-width: $screen-sm) {
-        .desc-long {
-          display: none;
-        }
-      }
-    }
-    @media screen and (max-width: 1400px) {
-      .desc-long {
-        display: none;
-      }
-      @media screen and (max-width: 570px) {
-        .gfm-cheatsheet {
-          display: none;
-        }
-      }
-    }
+
+    //// TODO: migrate to Bootstrap 4
+    // use @include media-breakpoint-*
+    // #page-editor {
+    //   @media (max-width: $screen-sm) {
+    //     .desc-long {
+    //       display: none;
+    //     }
+    //   }
+    // }
+    // @media screen and (max-width: 1400px) {
+    //   .desc-long {
+    //     display: none;
+    //   }
+    //   @media screen and (max-width: 570px) {
+    //     .gfm-cheatsheet {
+    //       display: none;
+    //     }
+    //   }
+    // }
   }
 }

src/client/styles/scss/_create-page.scss

@@ -1,6 +1,6 @@
 .modal.create-page {
   // more than tablet size
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-up(sm) {
     .modal-dialog {
       width: 750px;
     }
@@ -26,7 +26,7 @@
         }
 
         // change layout by screen size
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(xs) {
           flex-direction: column;
           .create-page-button-container {
             margin-top: 10px;

src/client/styles/scss/_create-template.scss

@@ -1,5 +1,5 @@
 .modal.create-template {
-  @media (min-width: $screen-sm) {
+  @include media-breakpoint-up(sm) {
     // align .panel-body heights
     .panel-select-template .panel-body {
       min-height: 120px;

src/client/styles/scss/_editor-attachment.scss

@@ -120,19 +120,3 @@
     }
   }
 }
-
-#page-editor {
-  @media (max-width: $screen-xs) {
-    .desc-long {
-      display: none;
-    }
-  }
-}
-
-.comment-form {
-  @media (max-width: $screen-sm) {
-    .desc-long {
-      display: none;
-    }
-  }
-}

src/client/styles/scss/_editor-overlay.scss

@@ -59,11 +59,6 @@
         opacity: 1;
       }
     }
-
-    // hide on smartphone
-    @media (max-width: $screen-xs) {
-      display: none;
-    }
   }
 }
 

src/client/styles/scss/_handsontable.scss

@@ -37,7 +37,7 @@
   transform: none;
 
   .modal-navbar {
-    background-color: $navbar-default-bg;
+    @extend .bg-light;
     border-bottom: $border 1px solid;
   }
 

src/client/styles/scss/_layout.scss

@@ -15,16 +15,6 @@
         cursor: default;
       }
     }
-
-    .nav-item-admin,
-    .nav-item-create-page {
-      span {
-        margin-left: 0.5em;
-        @media (max-width: $screen-xs-min) {
-          display: none;
-        }
-      }
-    }
   }
 
   /*

src/client/styles/scss/_mixins.scss

@@ -1,16 +1,17 @@
 @mixin variable-font-size($basesize) {
-  font-size: $basesize;
-  @media (max-width: $screen-lg) {
-    font-size: #{$basesize * 0.9};
+  font-size: $basesize * 0.6;
+
+  @include media-breakpoint-only(sm) {
+    font-size: #{$basesize * 0.7};
   }
-  @media (max-width: $screen-md) {
+  @include media-breakpoint-only(md) {
     font-size: #{$basesize * 0.8};
   }
-  @media (max-width: $screen-sm) {
-    font-size: #{$basesize * 0.7};
+  @include media-breakpoint-only(lg) {
+    font-size: #{$basesize * 0.9};
   }
-  @media (max-width: $screen-xs) {
-    font-size: #{$basesize * 0.6};
+  @include media-breakpoint-only(xl) {
+    font-size: $basesize;
   }
 }
 
@@ -64,7 +65,7 @@
             height: calc(100vh - #{$editor-margin});
           }
 
-          @media (min-width: $screen-md) {
+          @include media-breakpoint-up(md) {
             padding-right: 0;
           }
         }

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

@@ -120,11 +120,6 @@ body.on-edit {
     .tag-viewer.new-page {
       display: block;
     }
-
-    // hide if screen size is less than tablet
-    @media (max-width: $screen-sm) {
-      display: none;
-    }
   }
 
   .page-editor-footer {
@@ -235,11 +230,6 @@ body.on-edit {
           }
         }
       }
-
-      // less than smartphone size
-      @media (max-width: $screen-xs-max) {
-        display: none;
-      }
     }
 
     #page-grant-selector {

src/client/styles/scss/_shortcuts.scss

@@ -1,12 +1,10 @@
 #shortcuts-modal {
-  // more than tablet size
-  @media (min-width: $screen-sm-min) {
+  @include media-breakpoint-only(xs) {
     .modal-dialog {
       width: 750px;
     }
   }
-  // less than tablet size
-  @media (max-width: $screen-xs-max) {
+  @include media-breakpoint-up(sm) {
     table {
       table-layout: fixed;
     }

src/client/styles/scss/_wiki.scss

@@ -227,8 +227,7 @@ div.body {
   }
 }
 
-// tablet and iphone size
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(sm) {
   .main-container .main .wiki {
     img {
       max-width: 100%;

src/server/views/_form.html

@@ -12,7 +12,7 @@
 <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
 
   <div>
-    <div id="page-editor-options-selector" class="hidden-xs"></div>
+    <div id="page-editor-options-selector" class="d-none d-sm-block"></div>
   </div>
 
   <div id="save-page-controls"

src/server/views/layout-crowi/base/layout.html

@@ -29,7 +29,7 @@
     {% include '../../widget/system-version.html' %}
   </aside>
 
-  <div class="row hidden-print bg-title">
+  <div class="row hidden-print bg-title d-none d-md-block">
     <div class="col-md-9 header-container">
       {% block content_header %}
       {% endblock %}

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

@@ -8,7 +8,7 @@
 {% block layout_main %}
 <div class="container-fluid">
 
-  <div class="row bg-title hidden-print">
+  <div class="row hidden-print bg-title d-none d-md-block">
     <div class="col-xs-12 header-container">
       {% block content_header %}
       {% endblock %}

src/server/views/layout-kibela/base/layout.html

@@ -11,7 +11,7 @@
   <div class="row body m-0 p-0">
 
     <div id="main" class="main col-md-7 col-xs-12 kibela-block bg-white m-t-30 round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
-      <div class="row bg-title">
+      <div class="row bg-title d-none d-md-block">
         <div class="col-xs-12 header-container">
           {% block content_header %} {% endblock %}
         </div>

src/server/views/layout/layout.html

@@ -132,7 +132,7 @@
 
         {% if user %}
         <li class="nav-item-create-page">
-          <a href="#" data-target="#create-page" data-toggle="modal" class="create-page">
+          <a href="#" data-target="#create-page" data-toggle="modal" class="d-none d-sm-block ml-1">
             <i class="icon-pencil"></i><span>{{ t('New') }}</span>
           </a>
         </li>