Merge remote-tracking branch 'origin/search-in-smartphone' into wip-v1.5.2

lib/views/layout/layout.html

@@ -31,10 +31,10 @@
   <div class="navbar-header">
     <a class="navbar-brand" href="/">
       <img alt="Crowi" src="/logo/32x32.png" width="16">
-      {% block title %}{{ config.crowi['app:title']|default('Crowi') }}{% endblock %}
+      <span class="hidden-xs">{% block title %}{{ config.crowi['app:title']|default('Crowi') }}{% endblock %}</span>
     </a>
   {% if searchConfigured() %}
-  <div class="navbar-form navbar-left search-top visible-lg visible-md" 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

@@ -126,3 +126,58 @@
     }
   }
 }
+
+// Smartphone and Tablet
+@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-form {
+      width: 76%;
+    }
+
+    .search-top-input-group {
+      .search-top-input {
+        width: 100%;
+      }
+      .btn {
+        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;
+        }
+      }
+    }
+  }
+}
+
+// Smartphone
+@media (max-width: $screen-xs-max) {
+  .search-top {
+    .search-form {
+      min-width: 40%;
+      max-width: 50%;
+      width: 50%;
+    }
+    .search-box {
+      .search-suggest {
+        left: 2%;
+        width: 94%;
+      }
+    }
+  }
+}

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 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}
@@ -111,4 +111,3 @@ SearchResult.defaultProps = {
   searchResultMeta: {},
   searchError: null,
 };
-