Адаптация под мобильные устройства

src/main/resources/kinosearch/kinosearch3/webpp/search.comp.ftl

@@ -1,11 +1,17 @@
 <h1 class="title"><a href="/"><img src="/ks3logo.svg"> KinoSearch</a></h1>
 <br>
-<form method="get" action="/">
+<form id="search" method="get" action="/">
     <div class="input-group">
-        <span class="input-group-addon">Найти:</span>
+        <span class="input-group-addon">
+            <span class="visible-xs-inline glyphicon glyphicon-search" aria-hidden="true"></span>
+            <span class="hidden-xs">Найти:</span>
+        </span>
         <input class="form-control" type="text" placeholder="Что ищем?" name="search" value="${(searchText)!""}"/>
         <span class="input-group-btn">
-            <button class="btn btn-primary" type="submit">Ищи!</button>
+            <button class="btn btn-primary" type="submit">
+                <span class="visible-xs-inline glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
+                <span class="hidden-xs">Ищи!</span>
+            </button>
         </span>
     </div>
 </form>

src/main/resources/kinosearch/kinosearch3/webpp/static/media.css

@@ -0,0 +1,18 @@
+@media only screen and (max-width: 768px) {
+    form#search .btn {
+        height: 34px;
+    }
+
+    .searchResult .media-left {
+        display: block;
+        text-align: center;
+    }
+
+    .searchResult .media-object {
+        display: inline;
+    }
+
+    .searchResult .media-body {
+        padding-top: 8px;
+    }
+}

src/main/resources/kinosearch/kinosearch3/webpp/static/style.css

@@ -1,3 +1,5 @@
+@import url('/media.css');
+
 body {
     background: #f3f3f3 url('/noise-background.png');
     background-size: auto;