Merge pull request #82 from weseek/master

release v1.1.10

CHANGES.md

@@ -1,6 +1,11 @@
 CHANGES
 ========
 
+## 1.1.10
+
+* Fix: .search-box is broken on sm/xs screen
+* Support: Browsable with IE11 (Experimental)
+
 ## 1.1.9
 
 * Improvement: Ensure to generate indices of Elasticsearch when installed

lib/views/layout/layout.html

@@ -22,6 +22,17 @@
   <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
   <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
 
+  <!-- polyfills for IE11 -->
+  <script>
+    var userAgent = window.navigator.userAgent.toLowerCase();
+    if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
+      var scriptElement = document.createElement('script');
+      scriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js';
+      var headElement = document.getElementsByTagName('head')[0];
+      headElement.appendChild(scriptElement);
+    }
+  </script>
+
   <!-- jQuery -->
   <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crowi-plus",
-  "version": "1.1.9-RC",
+  "version": "1.1.10-RC",
   "description": "Enhanced Crowi",
   "tags": [
     "wiki",

resource/css/_layout.scss

@@ -13,9 +13,15 @@
       border-radius: 0;
       border: none;
       margin-bottom: 0;
+      display: flex;
 
       box-shadow: 0 3px 10px 0px rgba(0,0,0,.3);
 
+      .navbar-header {
+        flex-grow: 1;
+        display: flex;
+      }
+
       .navbar-brand {
         font-weight: bold;
         img {
@@ -53,7 +59,7 @@
       }
 
       .navbar-toggle {
-        position: absolute;
+        margin-left: 15px;
         top: 0;
         right: 0;
       }

resource/css/_search.scss

@@ -26,12 +26,43 @@
 }
 
 .search-top {
+  flex-grow: 1;
+  display: flex;
+
+  %flexgrow {
+    flex-grow: 1;
+    display: flex;
+  }
+
+  // set flex-grow
+  .search-box {
+    @extend %flexgrow;
+    .form-group {
+      @extend %flexgrow;
+    }
+    .input-group {
+      @extend %flexgrow;
+    }
+  }
+
   .search-top-input-group {
 
     // using react-bootstrap-typeahead
     // see: https://github.com/ericgio/react-bootstrap-typeahead
-    .bootstrap-typeahead-input input {
-      width: 400px;
+    .bootstrap-typeahead {
+      @extend %flexgrow;
+      max-width: 480px;
+
+      .bootstrap-typeahead-input {
+        @extend %flexgrow;
+        input {
+          @extend %flexgrow;
+        }
+      }
+
+    }
+    .input-group-btn {
+      flex-basis: 39px;
     }
 
     .search-top-clear {
@@ -128,24 +159,11 @@
 // Smartphone and Tablet
 @media (max-width: $screen-sm-max) {
   .search-top {
-    margin-top: 4px 0 0 0;
     padding: 0;
+    margin-right: 0;
     border-style: none !important;
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
-
-    .search-form {
-      width: 76%;
-    }
-
-    .search-top-input-group {
-      .search-top-input {
-        width: 100%;
-      }
-      .btn {
-        z-index: 10;
-      }
-    }
   }
 
   .search-result {
@@ -166,12 +184,10 @@
 // Smartphone
 @media (max-width: $screen-xs-max) {
   .search-top {
-    .search-form {
-      min-width: 40%;
-      max-width: 50%;
-      width: 50%;
-    }
-    .search-box {
+    .search-top-input-group {
+      .btn {
+        z-index: 10;
+      }
     }
   }
 }