Added search UI for Small devices (tablet)

lib/views/layout/layout.html

@@ -33,7 +33,7 @@
       {% block title %}{{ config.crowi['app:title']|default('Crowi') }}{% endblock %}
     </a>
   {% if searchConfigured() %}
-  <div class="navbar-form navbar-left search-top visible-lg visible-md visible-xs" role="search" id="search-top">
+  <div class="navbar-form navbar-left search-top" role="search" id="search-top">
   </div>
   {% endif %}
   </div>

resource/css/_search.scss

@@ -161,3 +161,38 @@
     }
   }
 }
+
+// Small devices Tablets (≥768px)
+@media (max-width: $screen-sm-max) {
+  .search-top {
+    margin-top: 4px 0 0 0;
+    padding: 0;
+    border-style: none !important;
+    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+
+    .search-top-input-group {
+      .search-top-input {
+        width: 240px;
+      }
+      .btn {
+        margin-left: -38px;
+        z-index: 10;
+      }
+    }
+  }
+
+  .search-result {
+    .search-result-content {
+      .search-result-page {
+        .wiki {
+          h1, h2, h3, h4, h5, h6 {
+            font-size: medium;
+          }
+          height: 250px;
+          overflow: scroll;
+        }
+      }
+    }
+  }
+}

resource/js/components/SearchPage/SearchResult.js

@@ -78,7 +78,7 @@ export default class SearchResult extends React.Component {
     return (
       <div className="content-main">
         <div className="search-result row" id="search-result">
-          <div className="col-md-4 hidden-xs page-list search-result-list" id="search-result-list">
+          <div className="col-md-4 hidden-xs hidden-sm page-list search-result-list" id="search-result-list">
             <nav data-spy="affix" data-offset-top="120">
               <ul className="page-list-ul nav">
                 {listView}