LL homepage design and styleguide fixes

.gitignore

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

kitsune/bundles.py

@@ -296,7 +296,19 @@
             'sumo/js/instant_search.js',
             'sumo/js/legacy_login_toggle.js',
             'sumo/js/responsive-nav-toggle.js',
-            'sumo/js/profile-avatars.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',
         ),
         'output_filename': 'build/common-min.js'
     },

kitsune/landings/jinja2/landings/home.html

@@ -3,22 +3,43 @@
 {% set styles = ('home',) %}
 {% set canonical_url = canonicalize(viewname='home') %}
 
-{% block content %}
-  <div class="grid_12 search-form-large">
-    <h1>{{ _('Search Mozilla Support') }}</h1>
-    {{ search_box(settings, id='support-search-home', params=search_params) }}
+{% 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>
   </div>
-  <div class="grid_12">
-    <h2 class="help-articles-title">{{ _('Help articles') }}</h2>
-    <section id="products-and-services">
-      {{ product_cards(products) }}
-    </section>
+  {{ 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>
-  <section id="get-involved-box" class="grid_12">
-    <a class="button" href="{{ url('landings.get_involved') }}">
-      {{ _('Volunteer for Mozilla Support') }}
-    </a>
-  </section>
+  {% 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>
 {% endblock %}
 
 {% block outer_side %}

kitsune/landings/jinja2/landings/includes/featured_articles.html

@@ -0,0 +1,93 @@
+
+  <div class="sumo-card-grid is-four-wide" style="--cg-count: 4;">
+    <div class="scroll-wrap">
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/reader-mode.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+      <div class="card card--article">
+          <img class="card--icon-sm" src="{{STATIC_URL}}protocol/img/icons/blog.svg" alt="todo: title" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a
+                class="expand-this-link"
+                href="#TODO"
+                data-event-category="link click"
+                data-event-action="product"
+                data-event-label="#TODO-title"
+              >
+                Private Browsing Use Firefox without saving history
+              </a>
+            </h3>
+            <p class="card--desc">
+              Firefox Private Browsing is great for viewing website without saving
+              things like cookies, but did you know there is more you can do? This
+              text should be longer than needed, and will be truncated with CSS.
+              Truncating at 40 words should be sufficient.
+            </p>
+          </div>
+      </div>
+    </div>
+  </div>

kitsune/landings/jinja2/landings/includes/join-our-community-callout.html

@@ -0,0 +1,8 @@
+<div class="card card--callout">
+  <img class="card--feature-img" src="{{ STATIC_URL }}sumo/img/Mozilla_illustration_placholder2x.png" alt="Illustration of hands" />
+  <div class="card--details">
+    <h3 class="card--title">{{ _('Join Our Community') }}</h3>
+    <p class="card--desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</p>
+    <p class="card--desc"><strong><a href="{{ url('landings.get_involved') }}">{{ _('Learn More') }}</a></strong></p>
+  </div>
+</div>

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

@@ -1,20 +1,25 @@
 {% macro product_cards(products, topic=None) -%}
-  <ul id="product-cards" class="card-grid cf">
+<div class="sumo-card-grid" style="--cg-count: {{ products|length }};">
+  <div class="scroll-wrap">
     {% for product in products %}
-      <li>
+      <div class="card card--product">
         {% 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 %}
-        <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) }}" />
+
+          <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>
           </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>
+      </div>
     {% endfor %}
-  </ul>
+  </div>
+</div>
 {%- endmacro %}

kitsune/settings.py

@@ -401,6 +401,7 @@ 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, favicon with context %}
+{% from 'includes/common_macros.html' import announcement_bar, search_box, aux_nav, profile_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 id="nav-access">
+<ul class="sumo-nav-access" 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,23 +125,6 @@
 
 <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">
@@ -170,13 +153,18 @@
 </div>
 
 
-<header class="mzp-c-navigation sumo-nav {{modifier_class}}">
+<header class="mzp-c-navigation sumo-nav">
   <div class="mzp-c-navigation-l-content">
     <div class="sumo-nav--container">
       <div class="sumo-nav--logo">
-        <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>
+        <a href="{{ url('home') }}"><img src="{{ STATIC_URL }}sumo/img/mozilla-support.svg" alt="Mozilla Support Logo"/></a>
       </div>
-      <button class="mzp-c-navigation-menu-button" type="button" aria-controls="main-navigation">Menu</button>
+
+      <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>
       <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">
@@ -188,6 +176,25 @@
           </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 -->
@@ -197,6 +204,7 @@
   {{ 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 %}
@@ -220,16 +228,15 @@
     </aside>
   {% endblock %}
 
-  <div class="support-search-main cf">
-    <div class="grid_12 search-form-large">
+  <section class="support-search-main cf">
       {{ search_box(settings, id='support-search-results', params=search_params) }}
-    </div>
-  </div>
+  </section>
 
   <main id="main-content" role="main">
     {% block content %}{% endblock %}
   </main>
 </div>
+{% endblock %}
 
 
 <footer class="mzp-c-footer">
@@ -292,21 +299,6 @@ <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>