From 130abd86860e435a3a054667c2325133270c5e89 Mon Sep 17 00:00:00 2001
From: Rehan Dalal <rehandalal@gmail.com>
Date: Wed, 17 Jun 2015 16:46:31 -0400
Subject: [PATCH 1/3] [bug 1172603] [bug 1172604] Search on mobile product
 pages

---
 kitsune/bundles.py                            | 13 +++++++
 .../templates/products/mobile/documents.html  | 11 ++++++
 .../templates/products/mobile/product.html    | 12 ++++++
 kitsune/sumo/static/sumo/js/instant_search.js | 23 +++++++----
 .../sumo/static/sumo/js/mobile/products.js    | 32 ++++++++++++++++
 .../static/sumo/less/mobile/products.less     | 38 ++++++++++++++++---
 .../tpl/mobile-product-search-results.html    |  7 ++++
 7 files changed, 122 insertions(+), 14 deletions(-)
 create mode 100644 kitsune/sumo/static/sumo/js/mobile/products.js
 create mode 100644 kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html

diff --git a/kitsune/bundles.py b/kitsune/bundles.py
index 42fef80ebca..3a5c30bcbc7 100644
--- a/kitsune/bundles.py
+++ b/kitsune/bundles.py
@@ -407,6 +407,19 @@
         ),
         'output_filename': 'build/products-min.js'
     },
+    'mobile-products': {
+        'source_filenames': (
+            'sumo/js/templates/mobile-product-search-results.js',
+            'nunjucks/browser/nunjucks-slim.js',
+            'sumo/js/nunjucks.js',
+            'moment/moment.js',
+            'sumo/js/cached_xhr.js',
+            'sumo/js/search_utils.js',
+            'sumo/js/instant_search.js',
+            'sumo/js/mobile/products.js',
+        ),
+        'output_fiename': 'build/mobile-products-min.js'
+    },
     'search': {
         'source_filenames': (
             'sumo/js/search.js',
diff --git a/kitsune/products/templates/products/mobile/documents.html b/kitsune/products/templates/products/mobile/documents.html
index 785b169cea6..18f9a149d36 100644
--- a/kitsune/products/templates/products/mobile/documents.html
+++ b/kitsune/products/templates/products/mobile/documents.html
@@ -1,6 +1,7 @@
 {% extends 'mobile/base.html' %}
 
 {% set styles = ('mobile-products',) %}
+{% set scripts = ('mobile-products',) %}
 {% set classes = 'documents' %}
 {% if subtopic %}
   {% set headline = _(subtopic.title, 'DB: products.Topic.title') %}
@@ -14,6 +15,16 @@
   {% set return_url = url('products.product', slug=product.slug) %}
 {% endif %}
 
+{% block after_header %}
+  <div class="search-bar slide-on-exposed">
+    <form data-instant-search="form" action="{{ url('search') }}" method="get">
+      <input type="hidden" name="product" value="{{ product.slug }}" />
+      <input type="hidden" name="w" value="1" />
+      <input type="search" name="q" required="required" aria-required="true" placeholder="{{ _('Search support articles') }}" class="searchbox" id="search-q" />
+    </form>
+  </div>
+{% endblock %}
+
 {% block content %}
   {% if subtopic %}
     <div class="filter-bar">
diff --git a/kitsune/products/templates/products/mobile/product.html b/kitsune/products/templates/products/mobile/product.html
index f3afd843efb..670544adddd 100644
--- a/kitsune/products/templates/products/mobile/product.html
+++ b/kitsune/products/templates/products/mobile/product.html
@@ -2,11 +2,23 @@
 
 {% set title = _(product.title, 'DB: products.Product.title') %}
 {% set headline = title %}
+{% set classes = 'product-landing' %}
 {% set styles = ('mobile-products',) %}
+{% set scripts = ('mobile-products',) %}
 {% set return_url = url('products') %}
 
 {% block title %}{{ _('{product} Help')|f(product=_(product.title, 'DB: products.Product.title')) }}{% endblock %}
 
+{% block after_header %}
+  <div class="search-bar slide-on-exposed">
+    <form data-instant-search="form" action="{{ url('search') }}" method="get">
+      <input type="hidden" name="product" value="{{ product.slug }}" />
+      <input type="hidden" name="w" value="1" />
+      <input type="search" name="q" required="required" aria-required="true" placeholder="{{ _('Search support articles') }}" class="searchbox" id="search-q" />
+    </form>
+  </div>
+{% endblock %}
+
 {% block content %}
   <ul id="topics">
     {% for topic in topics %}
diff --git a/kitsune/sumo/static/sumo/js/instant_search.js b/kitsune/sumo/static/sumo/js/instant_search.js
index f0d5cdceb56..b11c2bf375e 100644
--- a/kitsune/sumo/static/sumo/js/instant_search.js
+++ b/kitsune/sumo/static/sumo/js/instant_search.js
@@ -1,4 +1,4 @@
-(function($, _) {
+(function($) {
   var searchTimeout;
   var locale = $('html').attr('lang');
 
@@ -31,9 +31,16 @@
       $('#main-content').after($searchContent);
     }
 
-    $searchContent.html(_.render('search-results.html', context));
+    $searchContent.html(k.nunjucksEnv.render('search-results.html', context));
   }
 
+  window.k.InstantSearchSettings = {
+    hideContent: hideContent,
+    showContent: showContent,
+    render: render,
+    searchClient: search
+  };
+
   $(document).on('submit', '[data-instant-search="form"]', function(ev) {
     ev.preventDefault();
   });
@@ -42,14 +49,14 @@
     var $this = $(this);
     var params = {
       format: 'json'
-    }
+    };
 
     if ($this.val().length === 0) {
       if (searchTimeout) {
         window.clearTimeout(searchTimeout);
       }
 
-      showContent();
+      window.k.InstantSearchSettings.showContent();
     } else if ($this.val() !== search.lastQuery) {
       if (searchTimeout) {
         window.clearTimeout(searchTimeout);
@@ -64,10 +71,10 @@
 
       searchTimeout = setTimeout(function () {
         search.setParams(params);
-        search.query($this.val(), render);
+        search.query($this.val(), k.InstantSearchSettings.render);
       }, 200);
 
-      hideContent();
+      k.InstantSearchSettings.hideContent();
     }
   });
 
@@ -96,7 +103,7 @@
     cxhr.request($this.data('href'), {
       data: {format: 'json'},
       dataType: 'json',
-      success: render
+      success: k.InstantSearchSettings.render
     });
   });
-})(jQuery, k.nunjucksEnv);
+})(jQuery);
diff --git a/kitsune/sumo/static/sumo/js/mobile/products.js b/kitsune/sumo/static/sumo/js/mobile/products.js
new file mode 100644
index 00000000000..c952903a9c4
--- /dev/null
+++ b/kitsune/sumo/static/sumo/js/mobile/products.js
@@ -0,0 +1,32 @@
+(function($) {
+  var $body = $('body');
+  var locale = $('html').attr('lang');
+  var search = k.InstantSearchSettings.searchClient;
+
+  if ($body.is('.product-landing') ||  $body.is('.documents')) {
+    k.InstantSearchSettings.hideContent = function() {
+      $('#content').hide();
+    };
+
+    k.InstantSearchSettings.showContent = function() {
+      $('#content').show();
+      $('#instant-search-content').remove();
+    };
+
+    k.InstantSearchSettings.render = function(data) {
+      var context = $.extend({}, data);
+      var base_url = '/' + locale + '/search?q=' + search.lastQuery;
+      base_url += '&' + search.serializeParams();
+      context['base_url'] = base_url;
+
+      if ($('#instant-search-content').length) {
+        var $searchContent = $('#instant-search-content');
+      } else {
+        var $searchContent = $('<div />').attr('id', 'instant-search-content');
+        $('#content').after($searchContent);
+      }
+
+      $searchContent.html(k.nunjucksEnv.render('mobile-product-search-results.html', context));
+    };
+  }
+})(jQuery);
diff --git a/kitsune/sumo/static/sumo/less/mobile/products.less b/kitsune/sumo/static/sumo/less/mobile/products.less
index 7db1b4cce90..0cbe1bd5d57 100644
--- a/kitsune/sumo/static/sumo/less/mobile/products.less
+++ b/kitsune/sumo/static/sumo/less/mobile/products.less
@@ -1,15 +1,33 @@
 @import '../variables.less';
 @import 'mixins.less';
 
+.product-landing,
 .documents {
-  h2 {
-    background: @borderLightGrey;
-    font-size: 20px;
-    margin: 0;
-    padding: 10px 16px;
+  .search-bar {
+    background: #fff;
+    border-bottom: 1px solid @borderLightGrey;
+    height: 50px;
+    position: fixed;
+    top: 51px;
+    width: 100%;
+    z-index: 10;
+
+    input {
+      background: @mobileFormBackground;
+      border: 0;
+      box-sizing: border-box;
+      height: 50px;
+      padding: 0 16px;
+      width: 100%;
+    }
+  }
+
+  .wrapper {
+    top: 102px;
   }
+}
 
-  .document-list {
+.document-list {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -28,6 +46,14 @@
     }
   }
 
+.documents {
+  h2 {
+    background: @borderLightGrey;
+    font-size: 20px;
+    margin: 0;
+    padding: 10px 16px;
+  }
+
   > header {
     h1 {
       font-weight: bold;
diff --git a/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html b/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html
new file mode 100644
index 00000000000..8c2f1a2a6d8
--- /dev/null
+++ b/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html
@@ -0,0 +1,7 @@
+<ul class="document-list">
+  {% for doc in results %}
+    <li>
+      <a href="{{ doc.url }}">{{ doc.title }}</a>
+    </li>
+  {% endfor %}
+</ul>

From 36a3dc25544350367d7854b992624f515a3c921e Mon Sep 17 00:00:00 2001
From: Rehan Dalal <rehandalal@gmail.com>
Date: Wed, 17 Jun 2015 18:26:30 -0400
Subject: [PATCH 2/3] no results message

---
 .../sumo/static/sumo/less/mobile/products.less    |  9 +++++++++
 .../sumo/tpl/mobile-product-search-results.html   | 15 ++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/kitsune/sumo/static/sumo/less/mobile/products.less b/kitsune/sumo/static/sumo/less/mobile/products.less
index 0cbe1bd5d57..3bfe67bfad3 100644
--- a/kitsune/sumo/static/sumo/less/mobile/products.less
+++ b/kitsune/sumo/static/sumo/less/mobile/products.less
@@ -22,6 +22,15 @@
     }
   }
 
+  .search-header {
+    background: @borderLightGrey;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 6px 16px;
+    text-transform: uppercase;
+  }
+
   .wrapper {
     top: 102px;
   }
diff --git a/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html b/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html
index 8c2f1a2a6d8..075c0bb9fe0 100644
--- a/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html
+++ b/kitsune/sumo/static/sumo/tpl/mobile-product-search-results.html
@@ -1,7 +1,12 @@
+<div class="search-header">{{ 'Search results'|gettext }}</div>
 <ul class="document-list">
-  {% for doc in results %}
-    <li>
-      <a href="{{ doc.url }}">{{ doc.title }}</a>
-    </li>
-  {% endfor %}
+  {% if num_results > 0 %}
+    {% for doc in results %}
+      <li>
+        <a href="{{ doc.url }}">{{ doc.title }}</a>
+      </li>
+    {% endfor %}
+  {% else %}
+    <li><a href="#">{{ 'No results found.'|gettext }}</a></li>
+  {% endif %}
 </ul>

From 48c1c6a141602302dfb69255a7bd4c62796233e0 Mon Sep 17 00:00:00 2001
From: Rehan Dalal <rehandalal@gmail.com>
Date: Wed, 17 Jun 2015 18:46:24 -0400
Subject: [PATCH 3/3] fix bundle

---
 kitsune/bundles.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kitsune/bundles.py b/kitsune/bundles.py
index 3a5c30bcbc7..6b4107028eb 100644
--- a/kitsune/bundles.py
+++ b/kitsune/bundles.py
@@ -418,7 +418,7 @@
             'sumo/js/instant_search.js',
             'sumo/js/mobile/products.js',
         ),
-        'output_fiename': 'build/mobile-products-min.js'
+        'output_filename': 'build/mobile-products-min.js'
     },
     'search': {
         'source_filenames': (