Merge pull request #1764 from weseek/support/page-create-modal-bstr4

Support/page create modal bstr4

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

@@ -1,12 +1,17 @@
 .modal.create-page {
   // more than tablet size
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-down(sm) {
     .modal-dialog {
-      width: 45%;
-      max-width: initial;
+      max-width: 100%;
+      margin: 10px;
     }
   }
 
+  .modal-dialog {
+    max-width: 750px;
+    box-sizing: border-box;
+  }
+
   .modal-body {
     //TODO remove legend
     legend {
@@ -28,7 +33,7 @@
         }
 
         // change layout by screen size
-        @include media-breakpoint-down(xs) {
+        @include media-breakpoint-down(sm) {
           flex-direction: column;
           .create-page-button-container {
             margin-top: 10px;

src/client/styles/scss/_override-bootstrap.scss

@@ -162,9 +162,10 @@ fieldset[disabled] .btn {
 }
 
 // input form (disabled box-shadow added in bootstrap4)
-.form-group .form-control {
+form.form-group input.form-control {
   &:focus,
   &.focus {
+    border-color: inherit;
     box-shadow: none;
   }
 }

src/server/views/modal/create_page.html

@@ -9,7 +9,7 @@
 
       <div class="modal-body">
 
-        <form class="row form-horizontal" id="create-page-today" role="form">
+        <form class="row form-group" id="create-page-today" role="form">
           <fieldset class="col-12 mb-4">
             <h3 class="grw-modal-head pb-2">{{ t("Create today's") }}</h3>
             <div class="d-flex create-page-input-container">
@@ -26,7 +26,7 @@
           </fieldset>
         </form>
 
-        <form class="row form-horizontal" id="create-page-under-tree" role="form">
+        <form class="row form-group" id="create-page-under-tree" role="form">
           <fieldset class="col-12 mb-4">
             <h3 class="grw-modal-head pb-2">{{ t('Create under') }}</h3>
             <div class="d-flex create-page-input-container">
@@ -45,7 +45,7 @@
         </form>
 
         {% set templateParentPath = parentPath(path | preventXss | escape) %}
-        <div id="template-form" class="row form-horizontal">
+        <div id="template-form" class="row form-group">
           <fieldset class="col-12">
             <h3 class="grw-modal-head pb-2">{{ t('template.modal_label.Create template under', templateParentPath) }}</h3>
             <div class="d-flex create-page-input-container">