Merge pull request #1249 from weseek/support/apply-bst4-create-modal-fix

GW-330 「作成」押したときのモーダル内を直す:Support/apply bst4 create modal fix

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

@@ -2,11 +2,13 @@
   // more than tablet size
   @include media-breakpoint-up(sm) {
     .modal-dialog {
-      width: 750px;
+      width: 45%;
+      max-width: initial;
     }
   }
 
   .modal-body {
+    //TODO remove legend
     legend {
       margin-bottom: 10px;
     }

src/client/styles/scss/_layout.scss

@@ -179,3 +179,9 @@
   margin-left: -15px;
   overflow: unset;
 }
+
+//@each $
+.grw-modal-head {
+  font-size: 1em;
+  border-bottom: 1px solid $grw-line-gray;
+}

src/server/views/modal/create_page.html

@@ -3,15 +3,15 @@
     <div class="modal-content">
 
       <div class="modal-header bg-primary">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <div class="modal-title">{{ t('New Page') }}</div>
+        <div class="modal-title text-white">{{ t('New Page') }}</div>
+        <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
       </div>
 
       <div class="modal-body">
 
         <form class="row form-horizontal" id="create-page-today" role="form">
-          <fieldset class="col-xs-12">
-            <legend>{{ t("Create today's") }}</legend>
+          <fieldset class="col-12 mb-5">
+            <h3 class="grw-modal-head pb-2">{{ t("Create today's") }}</h3>
             <div class="d-flex create-page-input-container">
               <div class="create-page-input-row d-flex align-items-center">
                 <span class="page-today-prefix">{{ userPageRoot(user) }}/</span>
@@ -20,15 +20,15 @@
                 <input type="text" data-prefix="/{{ now|datetz('Y/m/d') }}/" class="page-today-input2 form-control" id="page-today-input2" name="" placeholder="{{ t('Input page name (optional)') }}">
               </div>
               <div class="create-page-button-container">
-                <button type="submit" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+                <button type="submit" class="fcbtn btn btn-outline-primary rounded-pill btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
               </div>
             </div>
           </fieldset>
         </form>
 
-        <form class="row form-horizontal m-t-15" id="create-page-under-tree" role="form">
-          <fieldset class="col-xs-12">
-            <legend>{{ t('Create under') }}</legend>
+        <form class="row form-horizontal" id="create-page-under-tree" role="form">
+          <fieldset class="col-12 mb-5">
+            <h3 class="grw-modal-head pb-2">{{ t('Create under') }}</h3>
             <div class="d-flex create-page-input-container">
               <div class="create-page-input-row d-flex align-items-center">
                 {% if searchConfigured() %}
@@ -38,25 +38,26 @@
                 {% endif %}
               </div>
               <div class="create-page-button-container">
-                <button type="submit" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+                <button type="submit" class="fcbtn btn btn-outline-primary rounded-pill btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
               </div>
             </div>
           </fieldset>
         </form>
 
         {% set templateParentPath = parentPath(path | preventXss | escape) %}
-        <div id="template-form" class="row form-horizontal m-t-15">
-          <fieldset class="col-xs-12">
-            <legend>{{ t('template.modal_label.Create template under', templateParentPath) }}</legend>
+        <div id="template-form" class="row form-horizontal">
+          <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">
               <div class="create-page-input-row d-flex align-items-center">
                 <select id="template-type" class="form-control selectpicker" title="{{ t('template.option_label.select') }}">
+                  <!-- TODO:select box refactor -->
                   <option value="children" data-subtext="- {{ t('template.children.desc') }}">{{ t('template.children.label') }}(_template)</option>
                   <option value="decentants" data-subtext="- {{ t('template.decendants.desc') }}">{{ t('template.decendants.label') }}(__template)</option>
                 </select>
               </div>
-              <div class="create-page-button-container">
-                <a id="link-to-template" href="{{ page.path || path }}" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1b disabled">
+              <div class="create-page-button-container my-auto">
+                <a id="link-to-template" href="{{ page.path || path }}" class="fcbtn btn btn-outline-primary rounded-pill btn-1b disabled">
                   <i class="icon-fw icon-doc"></i>
                   <span id="create-template-button-link">{{ t('Edit') }}</span>
                 </a>