Tweak search on mobile, fixes #432

tipuesearch/tipuesearch.css

@@ -5,6 +5,10 @@ Tipue Search is released under the MIT License
 http://www.tipue.com/search
 */
 
+body.with-search {
+    overflow: hidden;
+}
+
 /* bootstrap overrides the search field so let's undo that */
 input[type="search"] {
     -webkit-appearance: searchfield;
@@ -28,8 +32,7 @@ input[type="search"]::-webkit-search-cancel-button {
     z-index: 100;
     position:absolute;
     top: 50px;
-    left: 50%;
-    margin-left: -300px;
+    left: 0;
     bottom: 0;
 
     overflow: auto;
@@ -73,6 +76,18 @@ input[type="search"]::-webkit-search-cancel-button {
     color: #555;
 }
 
+.tipue_close {
+    border: 0 transparent solid;
+    background: none;
+
+    float: right;
+    font-size: 2em;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    line-height: .8em;
+}
+
 .tipue_search_content_title {
     font-weight:300;
     font-size:21px;
@@ -197,6 +212,14 @@ input[type="search"]::-webkit-search-cancel-button {
     }
 }
 
+@media (min-width: 650px) {
+    #tipue_search_content {
+        width: 650px;
+
+        left: 50%;
+        margin-left: -325px;
+    }
+}
 
 
 

tipuesearch/tipuesearch.js

@@ -8,6 +8,8 @@
 
 (function ($) {
 
+    var originalTitle = document.title;
+
     // Stop words (list from http://www.ranks.nl/stopwords)
     var tipuesearch_stop_words = ["a", "about", "above", "after", "again", "against", "all", "am", "an", "and", "any", "are", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "between", "both", "but", "by", "can't", "cannot", "could", "couldn't", "did", "didn't", "do", "does", "doesn't", "doing", "don't", "down", "during", "each", "few", "for", "from", "further", "had", "hadn't", "has", "hasn't", "have", "haven't", "having", "he", "he'd", "he'll", "he's", "her", "here", "here's", "hers", "herself", "him", "himself", "his", "how", "how's", "i", "i'd", "i'll", "i'm", "i've", "if", "in", "into", "is", "isn't", "it", "it's", "its", "itself", "let's", "me", "more", "most", "mustn't", "my", "myself", "no", "nor", "not", "of", "off", "on", "once", "only", "or", "other", "ought", "our", "ours", "ourselves", "out", "over", "own", "same", "shan't", "she", "she'd", "she'll", "she's", "should", "shouldn't", "so", "some", "such", "than", "that", "that's", "the", "their", "theirs", "them", "themselves", "then", "there", "there's", "these", "they", "they'd", "they'll", "they're", "they've", "this", "those", "through", "to", "too", "under", "until", "up", "very", "was", "wasn't", "we", "we'd", "we'll", "we're", "we've", "were", "weren't", "what", "what's", "when", "when's", "where", "where's", "which", "while", "who", "who's", "whom", "why", "why's", "with", "won't", "would", "wouldn't", "you", "you'd", "you'll", "you're", "you've", "your", "yours", "yourself", "yourselves"];
 
@@ -37,12 +39,19 @@
         return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
     }
 
-    function closeContainer(e) {
-        if (e.which == 27) { //escape
-            $(document).off("keyup", closeContainer);
+    function closeSearch() {
+        document.title = originalTitle;
+
+        $(document).off("keyup", keyUpHandler);
+
+        $("body").removeClass("with-search");
+        tipue_container.hide();
+        tipue_backdrop.hide();
+    }
 
-            tipue_container.hide();
-            tipue_backdrop.hide();
+    function keyUpHandler(e) {
+        if (e.which == 27) { //escape
+            closeSearch();
         }
     }
 
@@ -71,8 +80,6 @@
             pages: []
         };
 
-        var tipuesearch_t_c = 0;
-
         $.ajax(
             {
                 dataType: "json",
@@ -99,17 +106,15 @@
 
 
         function getTipueSearch(start, replace) {
-            $('#tipue_search_content').hide();
             $('#tipue_search_content').html('<div class="tipue_search_spinner"><div class="tipue_search_rect1"></div><div class="tipue_search_rect2"></div><div class="rect3"></div></div>');
-            $('#tipue_search_content').show();
 
-            var out = '';
+            var out = '<button class=tipue_close>&times;</button>';
             var results = '';
             var show_replace = false;
             var show_stop = false;
             var standard = true;
             var c = 0;
-            found = [];
+            var found = [];
 
             var d = set.field.val().toLowerCase();
             d = $.trim(d);
@@ -277,10 +282,8 @@
                 }
 
                 if (c != 0) {
-                    if (set.showTitleCount && tipuesearch_t_c == 0) {
-                        var title = document.title;
-                        document.title = '(' + c + ') ' + title;
-                        tipuesearch_t_c++;
+                    if (set.showTitleCount) {
+                        document.title = '(' + c + ') ' + originalTitle;
                     }
 
                     if (show_replace == 1) {
@@ -403,10 +406,13 @@
                 document.body.appendChild(tipue_backdrop.get(0));
             }
 
+            $("body").addClass("with-search").scrollTop(0);
             tipue_backdrop.show();
             tipue_container.scrollTop(0);
             tipue_container.show().html(out);
 
+            tipue_container.find('.tipue_close').on('click', closeSearch);
+
             $('#tipue_search_replaced').click(
                 function () {
                     getTipueSearch(0, false);
@@ -422,7 +428,7 @@
                     tipue_container.scrollTop(0);
                 });
 
-            $(document).keyup(closeContainer);
+            $(document).keyup(keyUpHandler);
         }
 
     };