WIP: WIP: apply bootstrap theme

* create_page

lib/views/modal/create_page.html

@@ -2,7 +2,7 @@
   <div class="modal-dialog">
     <div class="modal-content">
 
-      <div class="modal-header">
+      <div class="modal-header bg-warning">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title">{{ t('New Page') }}</h4>
       </div>
@@ -11,36 +11,35 @@
 
         <form class="form-horizontal" id="create-page-today" role="form">
           <fieldset>
-            <div class="col-xs-12">
-              <h4>{{ t("Create today's") }}</h4>
-            </div>
-            <div class="col-xs-10">
-              <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">
-              <button type="submit" class="btn btn-primary">{{ t('Create') }}</button>
+            <legend>{{ t("Create today's") }}</legend>
+            <div class="row">
+              <div class="col-xs-10 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">
+                <button type="submit" class="btn btn-primary">{{ t('Create') }}</button>
+              </div>
             </div>
           </fieldset>
         </form>
-        <hr>
 
         <form class="form-horizontal" id="create-page-under-tree" role="form">
           <fieldset>
-            <div class="col-xs-12 create-page-under-tree-label">
-              <h4>{{ t('Create under', parentPath(path)) }}</h4>
-            </div>
-            <div class="col-xs-10">
-              {% 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">
-              <button type="submit" class="btn btn-primary">{{ t('Create') }}</button>
+            <legend>{{ t('Create under', parentPath(path)) }}</legend>
+            <div class="row">
+              <div class="col-xs-10">
+                {% 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">
+                <button type="submit" class="btn btn-primary">{{ t('Create') }}</button>
+              </div>
             </div>
           </fieldset>
         </form>

resource/js/legacy/crowi.js

@@ -205,16 +205,6 @@ $(function() {
     var dateString = today.getFullYear() + '/' + month + '/' + day;
     $('#create-page-today .page-today-suffix').text('/' + dateString + '/');
     $('#create-page-today .page-today-input2').data('prefix', '/' + dateString + '/');
-
-    var input2Width = $('#create-page-today .col-xs-10').outerWidth() - 1;
-    var newWidth = input2Width
-      - $('#create-page-today .page-today-prefix').outerWidth()
-      - $('#create-page-today .page-today-input1').outerWidth()
-      - $('#create-page-today .page-today-suffix').outerWidth()
-      - 42
-      ;
-    $('#create-page-today .form-control.page-today-input2').css({width: newWidth}).focus();
-
   });
 
   $('#create-page-today').submit(function(e) {

resource/styles/scss/_override-agileadmin.scss

@@ -8,7 +8,9 @@
   }
 }
 
-// logo
+/*
+ * Logo
+ */
 .top-left-part {
   line-height: 0%;
   a {
@@ -34,7 +36,34 @@
   }
 }
 
+/*
+ * Dropdown
+ */
+.dropdown-menu {
+  border-radius: 0;
 
+  > li > a {
+    padding: 5px 15px;
+  }
+}
+
+
+/*
+ * Modal
+ */
+.modal-content {
+  border: none;
+  border-radius: 0;
+
+  .modal-header, .modal-footer {
+    padding: 10px 15px;
+  }
+}
+
+
+/*
+ * Helper Classes
+ */
 .img-circle {
   // size list
   &.img-circle-lg {

resource/styles/scss/_override-rbt.scss

@@ -0,0 +1,13 @@
+// override react-bootstrap-typeahead styles
+// see: https://github.com/ericgio/react-bootstrap-typeahead
+.rbt-input.form-control {
+  // focus
+  &.focus {
+    box-shadow: none;
+    border-color: inherit;
+  }
+}
+// hide loading icon
+.rbt-aux {
+  display: none;
+}

resource/styles/scss/_search.scss

@@ -51,12 +51,6 @@
     padding-top: 4px;
     height: 30px;
 
-    // focus
-    &.focus {
-      box-shadow: none;
-      border-color: #ccc;
-    }
-
     .rbt-input-wrapper {
       margin-left: 8px;
     }
@@ -79,11 +73,6 @@
       }
     }
   }
-  // hide loading icon
-  .rbt-aux {
-    display: none;
-  }
-
 }
 
 // layout

resource/styles/scss/crowi.scss

@@ -5,6 +5,7 @@
 @import 'variables';
 
 @import 'override-agileadmin';
+@import 'override-rbt';
 
 // crowi component
 // @import 'admin';
@@ -112,6 +113,7 @@ footer {
   margin-bottom: 0;
   border-radius: 0;
 }
+*/
 
 .modal.create-page {
 
@@ -160,6 +162,7 @@ footer {
   }
 }
 
+/*
 .popular-page-high {
   color: #e80000;
   font-size: 1.1em;