WIP: reconstruct layouts

* create-page

lib/views/modal/create_page.html

@@ -9,35 +9,35 @@
 
       <div class="modal-body">
 
-        <form class="form-horizontal" id="create-page-today" role="form">
-          <fieldset>
+        <form class="row form-horizontal" id="create-page-today" role="form">
+          <fieldset class="col-xs-12">
             <legend>{{ t("Create today's") }}</legend>
-            <div class="row">
-              <div class="col-xs-10 d-flex align-items-center">
+            <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>
                 <input type="text" data-prefix="{{ userPageRoot(user) }}/" class="page-today-input1 form-control text-center" value="{{ t('Memo') }}" id="" name="">
                 <span class="page-today-suffix">/{{ now|datetz('Y/m/d') }}/</span>
                 <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="col-xs-2">
+              <div class="create-page-button-container">
                 <button type="submit" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1f"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
               </div>
             </div>
           </fieldset>
         </form>
 
-        <form class="form-horizontal m-t-15" id="create-page-under-tree" role="form">
-          <fieldset>
+        <form class="row form-horizontal m-t-15" id="create-page-under-tree" role="form">
+          <fieldset class="col-xs-12">
             <legend>{{ t('Create under', parentPath(path)) }}</legend>
-            <div class="row">
-              <div class="col-xs-10">
+            <div class="d-flex create-page-input-container">
+              <div class="create-page-input-row d-flex align-items-center">
                 {% if searchConfigured() %}
                 <div class="clearfix" id="page-name-inputter"></div>
                 {% else %}
                 <input type="text" value="{{ parentPath(path) }}" class="page-name-input form-control " placeholder="{{ t('Input page name') }}" required />
                 {% endif %}
               </div>
-              <div class="col-xs-2">
+              <div class="create-page-button-container">
                 <button type="submit" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1f"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
               </div>
             </div>

resource/styles/scss/_create-page.scss

@@ -7,37 +7,55 @@
   }
 
   .modal-body {
-    h3, h4 {
+    legend {
       margin-bottom: 10px;
     }
 
     form {
 
-      .page-name-addons {
-        position: absolute;
-        top: 7px;
-        left: 27px;
+      // layout
+      .create-page-input-container {
+        .create-page-input-row {
+          flex: 1;
+        }
+        .create-page-button-container {
+          margin-left: 15px;
+        }
+
+        // change layout by screen size
+        @media (max-width: $screen-xs-max) {
+          flex-direction: column;
+          .create-page-button-container {
+            margin-top: 10px;
+            text-align: right;
+          }
+        }
       }
+
       .page-today-prefix {
-        display: inline-block;
       }
       .page-today-input1 {
         width: 60px;
+        margin-left: 5px;
+        margin-right: 5px;
         padding-left: 2px;
         padding-right: 2px;
-        display: inline-block;
       }
       .page-today-suffix {
-        display: inline-block;
       }
       .page-today-input2 {
-        // width: 100%;
-        display: inline-block;
+        flex: 1;
+        margin-left: 5px;
       }
-      #page-name-inputter input {
-        min-width: 300px; // Workaround to display placeholder.
-                          //   cf https://github.com/ericgio/react-bootstrap-typeahead/issues/256
+
+      #page-name-inputter {
+        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;
       }