Revert "LL homepage design and styleguide fixes"

.gitignore

@@ -44,4 +44,3 @@ js_assets/
 .sass-cache/
 styleguide/build/
 
-npm-debug.log

kitsune/bundles.py

@@ -296,19 +296,7 @@
             'sumo/js/instant_search.js',
             'sumo/js/legacy_login_toggle.js',
             'sumo/js/responsive-nav-toggle.js',
-            'sumo/js/profile-avatars.js',
-            'protocol/js/protocol-base.js',
-            'protocol/js/protocol-utils.js',
-            'protocol/js/protocol-supports.js',
-            'protocol/js/protocol-details.js',
-            'protocol/js/protocol-footer.js',
-            'protocol/js/protocol-menu.js',
-            'protocol/js/protocol-modal.js',
-            'protocol/js/protocol-navigation.js',
-            'protocol/js/protocol-newsletter.js',
-            'protocol/js/protocol-notification-bar.js',
-            'protocol/js/protocol-sidemenu.js',
-            'sumo/js/protocol-nav.js',
+            'sumo/js/profile-avatars.js'
         ),
         'output_filename': 'build/common-min.js'
     },

kitsune/landings/jinja2/landings/home.html

@@ -3,43 +3,22 @@
 {% set styles = ('home',) %}
 {% set canonical_url = canonicalize(viewname='home') %}
 
-{% block contentwrap %}
-  <section class="sumo-page-section shade-bg text-center">
-    <div class="mzp-l-content narrow">
-      <h1 class="text-display-xl">{{ _('Search Mozilla Support') }}</h1>
-      {{ search_box(settings, id='support-search-home', params=search_params) }}
-
-      <p class="popular-searches">
-        <span>Popular Searches:</span>
-        <a href="#TODO">Firefox Accounts</a>
-        <a href="#TODO">Log In</a>
-        <a href="#TODO">Item</a>
-        <a href="#TODO">Item</a>
-      </p>
-    </div>
-  </section>
-
-
-
-<section class="mzp-l-content sumo-page-section">
-  <div class="text-center">
-    <h2 class="display-xs">{{ _('Get Help') }}</h2>
-    <p>{{ _('Pick your product') }}</p>
+{% block content %}
+  <div class="grid_12 search-form-large">
+    <h1>{{ _('Search Mozilla Support') }}</h1>
+    {{ search_box(settings, id='support-search-home', params=search_params) }}
   </div>
-  {{ product_cards(products) }}
-</section>
-
-<section class="mzp-l-content sumo-page-section">
-  <div class="text-center">
-    <h2 class="display-xs">{{ _('Featured Articles & Threads') }}</h2>
+  <div class="grid_12">
+    <h2 class="help-articles-title">{{ _('Help articles') }}</h2>
+    <section id="products-and-services">
+      {{ product_cards(products) }}
+    </section>
   </div>
-  {% include "landings/includes/featured_articles.html" %}
-  <p class="text-right"><strong><a href="#TODO">View More</a></strong></p>
-</section>
-
-<section class="mzp-l-content sumo-page-section">
-  {% include "landings/includes/join-our-community-callout.html" %}
-</section>
+  <section id="get-involved-box" class="grid_12">
+    <a class="button" href="{{ url('landings.get_involved') }}">
+      {{ _('Volunteer for Mozilla Support') }}
+    </a>
+  </section>
 {% endblock %}
 
 {% block outer_side %}

kitsune/products/jinja2/products/includes/product_macros.html

@@ -1,25 +1,20 @@
 {% macro product_cards(products, topic=None) -%}
-<div class="sumo-card-grid" style="--cg-count: {{ products|length }};">
-  <div class="scroll-wrap">
+  <ul id="product-cards" class="card-grid cf">
     {% for product in products %}
-      <div class="card card--product">
+      <li>
         {% if topic %}
           {% set prod_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
         {% else %}
           {% set prod_url = url('products.product', slug=product.slug) %}
         {% endif %}
-
-          <img class="card--icon" src="{{ product.image_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}" />
-          <div class="card--details">
-            <h3 class="card--title">
-              <a class="expand-this-link" href="{{ prod_url }}" data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
-                {{ pgettext('DB: products.Product.title', product.title) }}
-              </a>
-            </h3>
-            <p class="card--desc">{{ pgettext('DB: products.Product.description', product.description) }}</p>
+        <a class="cf" href="{{ prod_url }}" data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
+          <div class="icon">
+            <img src="{{ product.image_url }}" alt="{{ pgettext('DB: products.Product.title', product.title) }}" />
           </div>
-      </div>
+          <div class="title">{{ pgettext('DB: products.Product.title', product.title) }}</div>
+          <div class="description">{{ pgettext('DB: products.Product.description', product.description) }}</div>
+        </a>
+      </li>
     {% endfor %}
-  </div>
-</div>
+  </ul>
 {%- endmacro %}

kitsune/settings.py

@@ -401,7 +401,6 @@ def parse_conn_max_age(value):
 STATIC_URL = config('STATIC_URL', default='/static/')
 STATICFILES_DIRS = (
     path('js_assets'),
-    path('node_modules/@mozilla-protocol/core'),
     path('jsi18n'),  # Collect jsi18n so that it is cache-busted
 )
 STATICFILES_FINDERS = (

kitsune/sumo/jinja2/base.html

@@ -1,4 +1,4 @@
-{% from 'includes/common_macros.html' import announcement_bar, search_box, aux_nav, profile_nav, favicon with context %}
+{% from 'includes/common_macros.html' import announcement_bar, search_box, aux_nav, favicon with context %}
 
 {% if request.LANGUAGE_CODE == settings.WIKI_DEFAULT_LANGUAGE and waffle.flag('surveygizmo') %}
   {# allow any artibtrary survey to be loaded via the SurveyGizmo admin #}
@@ -26,11 +26,11 @@
     {% endfor %}
   {% endif %}
 
-  <!-- {% stylesheet 'common' %}
+  {% stylesheet 'common' %}
   {% stylesheet 'print' %}
   {% for style in styles %}
     {% stylesheet style %}
-  {% endfor %} -->
+  {% endfor %}
 
   <link href="{{ STATIC_URL }}build/screen.css" rel="stylesheet" type="text/css" />
 
@@ -110,7 +110,7 @@
 {% if localizable_url %}
   {% set locale_picker_url = locale_picker_url|urlparams(next=localizable_url) %}
 {% endif %}
-<ul class="sumo-nav-access" id="nav-access">
+<ul id="nav-access">
   <li><a href="#main-content">{{ _('Skip to main content') }}</a></li>
   <li><a href="{{ locale_picker_url }}">{{ _('Switch language') }}</a></li>
   <li><a id="skip-to-search" href="#search-q">{{ _('Skip to search') }}</a></li>
@@ -125,6 +125,23 @@
 
 <div class="media-test"></div>
 
+{# These will only be shown on small-ish screens, by media queries. #}
+{% if request.MOBILE %}
+  <div class="mobile-banner" id="mobile-warning">
+    <div class="close-button" data-close-id="mobile-warning" data-close-memory="remember">X</div>
+    <a href="javascript: history.back();">
+      {{ _("This page doesn't have a mobile optimized version. Tap here to go back.") }}
+    </a>
+  </div>
+{% else %}
+  <div class="mobile-banner" id="mobile-warning">
+    <div class="close-button" data-close-id="mobile-warning" data-close-memory="remember">X</div>
+    <a href="?{{ request.QUERY_STRING }}&amp;mobile=1">
+      {{ _('Tap here to go to the mobile version of the site.') }}
+    </a>
+  </div>
+{% endif %}
+
 {# TrafficCop experiment_fxa_cta_topbar #}
 {% if run_experiments %}
   <div id="promotions" class="hidden">
@@ -153,18 +170,13 @@
 </div>
 
 
-<header class="mzp-c-navigation sumo-nav">
+<header class="mzp-c-navigation sumo-nav {{modifier_class}}">
   <div class="mzp-c-navigation-l-content">
     <div class="sumo-nav--container">
       <div class="sumo-nav--logo">
-        <a href="{{ url('home') }}"><img src="{{ STATIC_URL }}sumo/img/mozilla-support.svg" alt="Mozilla Support Logo"/></a>
+        <a href="{{ url('home') }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Home"><img src="{{ STATIC_URL }}sumo/img/mozilla-support.svg" alt="Mozilla Support Logo"/></a>
       </div>
-
-      <button data-sumo-toggle-nav="#search-navigation" class="sumo-nav--search-button" type="button" aria-controls="search-navigation">Search</button>
-      <button data-sumo-toggle-nav="#main-navigation" class="sumo-nav--toggle-button" type="button" aria-controls="main-navigation">Menu</button>
-      <a class="sumo-nav--avatar-button" data-sumo-toggle-nav="#profile-navigation" aria-controls="profile-navigation" aria-role="button">
-        <img class="avatar" src="{{ profile_avatar(user) }}" alt="Avatar for Username">
-      </a>
+      <button class="mzp-c-navigation-menu-button" type="button" aria-controls="main-navigation">Menu</button>
       <div class="mzp-c-navigation-items sumo-nav--list-wrap" id="main-navigation">
         <div class="mzp-c-navigation-menu">
           <nav class="mzp-c-menu mzp-is-basic">
@@ -176,25 +188,6 @@
           </nav>
         </div>
       </div>
-
-      <div class="mzp-c-navigation-items sumo-nav--list-wrap-right" id="profile-navigation">
-        <div class="mzp-c-navigation-menu">
-          <nav class="mzp-c-menu mzp-is-basic">
-              {% if not hide_aux_nav %}
-              <ul class="mzp-c-menu-category-list sumo-nav--list">
-                {{ profile_nav(user, hide_aaq_link) }}
-              </ul>
-              {% endif %}
-          </nav>
-        </div>
-      </div>
-      <div class="mzp-c-navigation-items sumo-nav--mobile-search-form" id="search-navigation">
-        <div class="mzp-c-navigation-menu">
-          <nav class="mzp-c-menu mzp-is-basic">
-            {{ search_box(settings, id='mobile-search-results', params=search_params) }}
-          </nav>
-        </div>
-      </div>
     </div>
   </div>
 </header><!--/.mzp-c-navigation -->
@@ -204,7 +197,6 @@
   {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
 {% endblock %}
 
-{% block contentwrap %}
 <div class="container_12 cf {% block base_container_classes %}{% endblock %}" id="main-container">
   <div class="grid_12">
     {% if messages %}
@@ -228,15 +220,16 @@
     </aside>
   {% endblock %}
 
-  <section class="support-search-main cf">
+  <div class="support-search-main cf">
+    <div class="grid_12 search-form-large">
       {{ search_box(settings, id='support-search-results', params=search_params) }}
-  </section>
+    </div>
+  </div>
 
   <main id="main-content" role="main">
     {% block content %}{% endblock %}
   </main>
 </div>
-{% endblock %}
 
 
 <footer class="mzp-c-footer">
@@ -299,6 +292,21 @@ <h5 class="mzp-c-footer-heading">{{ _('Firefox Accounts') }}</h5>
             <!-- form submit button is shown when JavaScript is not enabled -->
             <button type="submit">{{ _('Go') }}</button>
           </form>
+          <script src="../../../assets/protocol/protocol/js/protocol-lang-switcher.js"></script>
+
+          <script>
+            (function() {
+              'use strict';
+              // a custom callback can be passed to the lang switcher for analytics purposes.
+              Mzp.LangSwitcher.init(function(
+                previousLanguage, newLanguage) {
+                console.log('Previous language: ',
+                  previousLanguage);
+                console.log('New language: ',
+                  newLanguage);
+              })
+            })();
+          </script>
           <ul class="mzp-c-footer-links-social">
             <li><a class="twitter" href="https://twitter.com/firefox">Twitter<span>(@firefox)</span></a></li>
             <li><a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a></li>