Merge pull request #2207 from weseek/improve/create_page

Improve/create page

src/client/js/components/PageCreateModal.jsx

@@ -91,34 +91,41 @@ const PageCreateModal = (props) => {
 
   function renderCreateTodayForm() {
     return (
-      <div className="row form-group">
+      <div className="row">
         <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">
-              <span>{userPageRootPath}/</span>
-              <input
-                type="text"
-                className="page-today-input1 form-control text-center"
-                value={todayInput1}
-                onChange={e => onChangeTodayInput1Handler(e.target.value)}
-              />
-              <span className="page-today-suffix">/{now}/</span>
+
+          <div className="d-sm-flex align-items-center justify-items-between">
+
+            <div className="d-flex align-items-center flex-fill flex-wrap flex-lg-nowrap">
+              <div className="d-flex align-items-center">
+                <span>{userPageRootPath}/</span>
+                <input
+                  type="text"
+                  className="page-today-input1 form-control text-center mx-2"
+                  value={todayInput1}
+                  onChange={e => onChangeTodayInput1Handler(e.target.value)}
+                />
+                <span className="page-today-suffix">/{now}/</span>
+              </div>
               <input
                 type="text"
-                className="page-today-input2 form-control"
+                className="page-today-input2 form-control mt-1 mt-lg-0 mx-lg-2 flex-fill"
                 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">
-              <button type="button" className="btn btn-outline-primary rounded-pill" onClick={createTodayPage}>
+
+            <div className="d-flex justify-content-end mt-1 mt-sm-0">
+              <button type="button" className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3" onClick={createTodayPage}>
                 <i className="icon-fw icon-doc"></i>{ t('Create') }
               </button>
             </div>
+
           </div>
+
         </fieldset>
       </div>
     );
@@ -126,11 +133,13 @@ const PageCreateModal = (props) => {
 
   function renderInputPageForm() {
     return (
-      <div className="row form-group">
+      <div className="row">
         <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="d-sm-flex align-items-center justify-items-between">
+
+            <div className="flex-fill">
               {isReachable
                 // GW-2355 refactor typeahead
                 ? <PagePathAutoComplete crowi={appContainer} initializedPath={path} addTrailingSlash />
@@ -138,19 +147,22 @@ const PageCreateModal = (props) => {
                   <input
                     type="text"
                     value={pageNameInput}
-                    className="page-name-input form-control"
+                    className="form-control flex-fill"
                     placeholder={t('Input page name')}
                     onChange={e => onChangePageNameInputHandler(e.target.value)}
                     required
                   />
                 )}
             </div>
-            <div className="create-page-button-container">
-              <button type="submit" className="btn btn-outline-primary rounded-pill" onClick={createInputPage}>
+
+            <div className="d-flex justify-content-end mt-1 mt-sm-0">
+              <button type="button" className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3" onClick={createInputPage}>
                 <i className="icon-fw icon-doc"></i>{ t('Create') }
               </button>
             </div>
+
           </div>
+
         </fieldset>
       </div>
     );
@@ -158,46 +170,51 @@ const PageCreateModal = (props) => {
 
   function renderTemplatePageForm() {
     return (
-      <div className="row form-group">
+      <div className="row">
         <fieldset className="col-12">
+
           <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 id="dd-template-type" className="dropdown w-100">
-                <button id="template-type" type="button" className="btn btn-secondary btn dropdown-toggle" data-toggle="dropdown">
-                  {template == null && t('template.option_label.select') }
-                  {template === 'children' && t('template.children.label')}
-                  {template === 'decendants' && t('template.decendants.label')}
-                </button>
-                <div className="dropdown-menu" aria-labelledby="userMenu">
-                  <a className="dropdown-item" type="button" onClick={() => onChangeTemplateHandler('children')}>
-                    { t('template.children.label') } (_template)<br className="d-block d-md-none" />
-                    <small className="text-muted text-wrap">- { t('template.children.desc') }</small>
-                  </a>
-                  <a className="dropdown-item" type="button" onClick={() => onChangeTemplateHandler('decendants')}>
-                    { t('template.decendants.label') } (__template) <br className="d-block d-md-none" />
-                    <small className="text-muted">- { t('template.decendants.desc') }</small>
-                  </a>
-                </div>
-              </div>
 
+          <div className="d-sm-flex align-items-center justify-items-between">
+
+            <div id="dd-template-type" className="dropdown flex-fill">
+              <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')}
+              </button>
+              <div className="dropdown-menu" aria-labelledby="userMenu">
+                <a className="dropdown-item" type="button" onClick={() => onChangeTemplateHandler('children')}>
+                  { t('template.children.label') } (_template)<br className="d-block d-md-none" />
+                  <small className="text-muted text-wrap">- { t('template.children.desc') }</small>
+                </a>
+                <a className="dropdown-item" type="button" onClick={() => onChangeTemplateHandler('decendants')}>
+                  { t('template.decendants.label') } (__template) <br className="d-block d-md-none" />
+                  <small className="text-muted">- { t('template.decendants.desc') }</small>
+                </a>
+              </div>
             </div>
-            <div className="create-page-button-container">
-              <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>
+
+            <div className="d-flex justify-content-end mt-1 mt-sm-0">
+              <button
+                type="button"
+                className={`grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3 ${template == null && 'disabled'}`}
+                onClick={createTemplatePage}
+              >
+                <i className="icon-fw icon-doc"></i>{ t('Edit') }
               </button>
             </div>
+
           </div>
+
         </fieldset>
       </div>
     );
   }
   return (
-    <Modal size="lg" isOpen={appContainer.state.isPageCreateModalShown} toggle={appContainer.closePageCreateModal}>
+    <Modal size="lg" isOpen={appContainer.state.isPageCreateModalShown} toggle={appContainer.closePageCreateModal} className="grw-create-page">
       <ModalHeader tag="h4" toggle={appContainer.closePageCreateModal} className="bg-primary text-light">
         { t('New Page') }
       </ModalHeader>

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

@@ -1,61 +1,15 @@
-.modal.create-page {
-  .modal-body {
-    //TODO remove legend
-    legend {
-      margin-bottom: 10px;
-    }
-
-    form,
-    #template-form {
-      // layout
-      .create-page-input-container {
-        .create-page-input-row {
-          flex: 1;
-        }
-        .create-page-button-container {
-          margin-left: 15px;
-          .btn {
-            min-width: 105px;
-          }
-        }
-
-        // change layout by screen size
-        @include media-breakpoint-down(md) {
-          flex-direction: column;
-          .create-page-button-container {
-            margin-top: 10px;
-            text-align: right;
-          }
-        }
-      }
-
-      .page-today-prefix {
-      }
-      .page-today-input1 {
-        width: 60px;
-        padding-right: 2px;
-        padding-left: 2px;
-        margin-right: 5px;
-        margin-left: 5px;
-      }
-      .page-today-suffix {
-      }
-      .page-today-input2 {
-        flex: 1;
-        margin-left: 5px;
-      }
-
-      .page-name-input {
-        flex: 1;
-        input {
-          min-width: 300px; // Workaround to display placeholder.
-          //   cf https://github.com/ericgio/react-bootstrap-typeahead/issues/256
-        }
-      }
-
-      .create-page-under-tree-label code {
-        font-family: $font-family-monospace-not-strictly;
-      }
-    }
-  } // .modal-body
+.grw-create-page {
+  .page-today-input1 {
+    width: 60px;
+  }
+  .page-today-input2 {
+  }
+
+  .grw-btn-create-page {
+    min-width: 90px;
+  }
+
+  .create-page-under-tree-label code {
+    font-family: $font-family-monospace-not-strictly;
+  }
 }