support BS4

style change

src/client/js/components/PageCreateModal.jsx

@@ -94,26 +94,26 @@ const PageCreateModal = (props) => {
       <div className="row form-group">
         <fieldset className="col-12 mb-4">
           <h3 className="grw-modal-head pb-2">{ t("Create today's") }</h3>
-          <div className="d-flex">
-            <div className="create-page-input-row d-flex align-items-center">
+          <div className="d-sm-flex">
+            <div className="create-page-input-row d-flex align-items-center flex-fill">
               <span>{userPageRootPath}/</span>
               <input
                 type="text"
-                className="page-today-input1 form-control text-center"
+                className="page-today-input1 form-control text-center m-2"
                 value={todayInput1}
                 onChange={e => onChangeTodayInput1Handler(e.target.value)}
               />
               <span className="page-today-suffix">/{now}/</span>
               <input
                 type="text"
-                className="page-today-input2 form-control"
+                className="page-today-input2 form-control m-2"
                 id="page-today-input2"
                 placeholder={t('Input page name (optional)')}
                 value={todayInput2}
                 onChange={e => onChangeTodayInput2Handler(e.target.value)}
               />
             </div>
-            <div className="create-page-button-container">
+            <div className="create-page-button-container float-right ml-3 mt-3 mt-sm-0">
               <button type="button" className="btn btn-outline-primary rounded-pill" onClick={createTodayPage}>
                 <i className="icon-fw icon-doc"></i>{ t('Create') }
               </button>
@@ -130,7 +130,7 @@ const PageCreateModal = (props) => {
         <fieldset className="col-12 mb-4">
           <h3 className="grw-modal-head pb-2">{ t('Create under') }</h3>
           <div className="d-flex create-page-input-container">
-            <div className="create-page-input-row d-flex align-items-center">
+            <div className="create-page-input-row d-flex align-items-center flex-fill">
               {isReachable
                 // GW-2355 refactor typeahead
                 ? <PagePathAutoComplete crowi={appContainer} initializedPath={path} addTrailingSlash />
@@ -163,11 +163,11 @@ const PageCreateModal = (props) => {
           <h3 className="grw-modal-head pb-2">{ t('template.modal_label.Create template under')}<br />
             <code>{path}</code>
           </h3>
-          <div className="d-flex create-page-input-container">
-            <div className="create-page-input-row d-flex align-items-center">
+          <div className="d-sm-flex create-page-input-container">
+            <div className="create-page-input-row d-flex align-items-center flex-fill">
 
               <div id="dd-template-type" className="dropdown w-100">
-                <button id="template-type" type="button" className="btn btn-secondary btn dropdown-toggle" data-toggle="dropdown">
+                <button id="template-type" type="button" className="btn btn-secondary btn dropdown-toggle w-100" data-toggle="dropdown">
                   {template == null && t('template.option_label.select') }
                   {template === 'children' && t('template.children.label')}
                   {template === 'decendants' && t('template.decendants.label')}
@@ -185,7 +185,7 @@ const PageCreateModal = (props) => {
               </div>
 
             </div>
-            <div className="create-page-button-container">
+            <div className="create-page-button-container float-right ml-3 mt-3 mt-sm-0">
               <button type="button" className={`btn btn-outline-primary rounded-pill ${template == null && 'disabled'}`} onClick={createTemplatePage}>
                 <i className="icon-fw icon-doc"></i>
                 <span>{ t('Edit') }</span>

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

@@ -33,10 +33,6 @@
       }
       .page-today-input1 {
         width: 60px;
-        padding-right: 2px;
-        padding-left: 2px;
-        margin-right: 5px;
-        margin-left: 5px;
       }
       .page-today-suffix {
       }