From 23866f67a0c6aca4ed8a10095722ed1eb96e17a8 Mon Sep 17 00:00:00 2001
From: Carsten Brandt <mail@cebe.cc>
Date: Sat, 26 Apr 2014 14:29:56 +0200
Subject: [PATCH] improved usability for the apidoc search

---
 .../templates/bootstrap/assets/css/style.css  |  8 +++++--
 .../templates/bootstrap/layouts/main.php      | 23 ++++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/extensions/apidoc/templates/bootstrap/assets/css/style.css b/extensions/apidoc/templates/bootstrap/assets/css/style.css
index a6452e6fe3..40ef62bef7 100644
--- a/extensions/apidoc/templates/bootstrap/assets/css/style.css
+++ b/extensions/apidoc/templates/bootstrap/assets/css/style.css
@@ -119,8 +119,12 @@ table.summary-table .col-defined  { width: 15%; }
     top: 50px;
     z-index: 1000;
 
-    background: #fff;
-    border: solid 1px #000;
+    border-radius: 0;
+    /* reset all due to android browser issues http://caniuse.com/#search=border-radius */
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 #search-results {
diff --git a/extensions/apidoc/templates/bootstrap/layouts/main.php b/extensions/apidoc/templates/bootstrap/layouts/main.php
index f7f7afa04f..351c06352d 100644
--- a/extensions/apidoc/templates/bootstrap/layouts/main.php
+++ b/extensions/apidoc/templates/bootstrap/layouts/main.php
@@ -83,15 +83,13 @@ $this->beginPage();
     $this->registerJsFile('./jssearch.index.js', 'yii\apidoc\templates\bootstrap\assets\JsSearchAsset');
     $this->registerJs(<<<JS
 
-$('#searchbox').focus();
+var searchBox = $('#searchbox');
 
-$(document).on("keyup", function(event) {
-    if (event.which == 27) {
-        $('#search-resultbox').hide();
-    }
-});
+// focus the search field
+searchBox.focus();
 
-$('#searchbox').on("keyup", function(event) {
+// search when typing in search field
+searchBox.on("keyup", function(event) {
     var query = $(this).val();
 
     if (query == '' || event.which == 27) {
@@ -151,13 +149,22 @@ $('#searchbox').on("keyup", function(event) {
         $('#search-results').html(resHtml);
     }
 });
+
+// hide the search results on ESC
+$(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } });
+// hide search results on click to document
+$(document).bind('click', function (e) { $('#search-resultbox').hide(); });
+// except the following:
+searchBox.bind('click', function(e) { e.stopPropagation(); });
+$('#search-resultbox').bind('click', function(e) { e.stopPropagation(); });
+
 JS
 );
 
     NavBar::end();
     ?>
 
-    <div id="search-resultbox" style="display: none;">
+    <div id="search-resultbox" style="display: none;" class="modal-content">
         <ul id="search-results">
         </ul>
     </div>