product page instant search revisions

kitsune/products/jinja2/products/product.html

@@ -16,27 +16,28 @@
 {% block base_container_classes %}container_wide{% endblock %}
 
 {% block contentwrap %}
-<section class="sumo-page-section shade-bg text-center">
+<section class="home-search-section sumo-page-section shade-bg">
   <div class="mzp-l-content">
     {% block breadcrumbs %}
       {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
     {% endblock %}
   </div>
-<div class="mzp-l-content narrow">
-    <h1 class="page-heading">
-      <img class="page-heading--logo" src="{{ product.image_alternate_url }}" alt="Photo of {{ product.title }}" />
-      <span class="product-title-text">{{ pgettext('DB: products.Product.title', product.title) }} {{ _('Support') }}</span>
-    </h1>
-    {{ search_box(settings, id='support-search-masthead', params=search_params) }}
-
-    <p class="popular-searches">
-      <span>Popular Searches:</span>
-      <a href="#popular_search_1" data-featured-search>Firefox Accounts</a>
-      <a href="#popular_search_2" data-featured-search>Log In</a>
-      <a href="#popular_search_3" data-featured-search>Installation</a>
-      <a href="#popular_search_4" data-featured-search>Sample</a>
-      <a href="#popular_search_5" data-featured-search>Item 5</a>
-    </p>
+  <div class="mzp-l-content narrow">
+    <div class="home-search-section--content">
+      <h1 class="text-display-xl">
+        <img class="page-heading--logo" src="{{ product.image_alternate_url }}" alt="Photo of {{ product.title }}" />
+        <span class="product-title-text">{{ pgettext('DB: products.Product.title', product.title) }} {{ _('Support') }}</span>
+      </h1>
+      {{ search_box(settings, id='support-search-masthead', params=search_params) }}
+      <p class="popular-searches">
+        <span>Popular Searches:</span>
+        <a href="#popular_search_1" data-featured-search>Firefox Accounts</a>
+        <a href="#popular_search_2" data-featured-search>Log In</a>
+        <a href="#popular_search_3" data-featured-search>Installation</a>
+        <a href="#popular_search_4" data-featured-search>Sample</a>
+        <a href="#popular_search_5" data-featured-search>Item 5</a>
+      </p>
+    </div>
   </div>
 </section>
 

kitsune/sumo/static/sumo/js/instant_search.js

@@ -9,10 +9,8 @@
   function hideContent() {
     $('#main-content').hide();
     $('#main-content').siblings('aside').hide();
-    $('#main-breadcrumbs').hide();
     $('body').addClass('search-results-visible');
     $('.home-search-section .mzp-l-content').removeClass('narrow');
-    $('.popular-searches').addClass('is-hidden');
 
     if ($('#support-search-wiki:visible').length === 0) {
       $('.support-search-main').show();
@@ -22,11 +20,9 @@
 
   function showContent() {
     $('body').removeClass('search-results-visible');
-    $('.popular-searches').removeClass('is-hidden');
     $('.support-search-main').hide();
     $('#main-content').show();
     $('#main-content').siblings('aside').show();
-    $('#main-breadcrumbs').show();
     $('#instant-search-content').remove();
     $('.search-form-large:visible').find('input[name=q]').focus().val('');
     $('#support-search').find('input[name=q]').val('');
@@ -165,7 +161,6 @@
   $(document).on('click', '[data-featured-search]', function(ev) {
     var $mainInput = $('#support-search-masthead input[name=q]');
     var thisLink = $(this).text();
-    console.log('thisLink', thisLink);
     $('#support-search-masthead input[name=q]').focus().val(thisLink);
     $mainInput.trigger( "keyup" );
     ev.preventDefault();

kitsune/sumo/static/sumo/scss/layout/_search-page.scss

@@ -21,6 +21,12 @@
         max-width: c.col-width(7, 10);
       }
     }
+
+    .page-heading--logo,
+    .popular-searches,
+    .breadcrumbs {
+      display: none;
+    }
   }
 }