LL updates 2 26

kitsune/bundles.py

@@ -49,6 +49,7 @@
             "sumo/js/protocol-notification-init.js",
             "sumo/js/protocol-language-switcher-init.js",
             "sumo/js/sumo-tabs.js",
+            "sumo/js/sumo-close-this.js",
         ),
         "output_filename": "build/common-min.js",
     },

kitsune/landings/jinja2/landings/get-involved-kb.html

@@ -31,13 +31,13 @@ <h2 class="text-display-sm">{{ _('Share your wisdom with the world.') }}</h2>
 
 
   <section class="sumo-page-section has-moz-headings pick-a-way text-left">
-    <h2 class="text-display-sm">{{ _('How it works') }}</h2>
-    <div class="sumo-l-two-col">
+    <div class="sumo-l-two-col align-center">
       <div class="sumo-l-two-col--one-half gi-visual text-center">
         <img src="{{ STATIC_URL }}sumo/img/gi-visual-kb.png?v=1" alt="">
         <p class="text-display-xs legacy-blue-text"><em>{{ _('1 article can be viewed by 400 million users and translated into 70+ languages') }}</em></p>
       </div>
       <div class="sumo-l-two-col--one-half">
+        <h2 class="text-display-sm">{{ _('How it works') }}</h2>
         <ol class="mzp-u-list-styled headings-list">
           <li>
             {% set message =  _('Sign up as a volunteer') %}

kitsune/landings/jinja2/landings/get-involved-l10n.html

@@ -29,13 +29,14 @@ <h2 class="text-display-sm">{{ _("Let's make Mozilla Support speak your language
 {% include 'landings/includes/register_contributor.html' %}
 
   <section class="sumo-page-section has-moz-headings pick-a-way text-left">
-    <h2 class="text-display-sm">{{ _('How it works') }}</h2>
-    <div class="sumo-l-two-col">
+
+    <div class="sumo-l-two-col align-center">
       <div class="sumo-l-two-col--one-half gi-visual text-center">
         <img src="{{ STATIC_URL }}sumo/img/gi-visual-l10n.png?v=1" alt="">
         <p class="text-display-xs legacy-blue-text"><em>{{ _("Translating 1 article can help 1,000's of users in your language") }}</em></p>
       </div>
       <div class="sumo-l-two-col--one-half">
+        <h2 class="text-display-sm">{{ _('How it works') }}</h2>
         <ol class="mzp-u-list-styled headings-list">
           <li>
             {% set message =  _('Sign up as a volunteer') %}

kitsune/landings/jinja2/landings/get-involved-questions.html

@@ -30,36 +30,37 @@ <h2 class="text-display-sm">{{ _('Where all the action happens') }}</h2>
   {% set signup_headline = _('Help users in the forums') %}
   {% include 'landings/includes/register_contributor.html' %}
 
-<section class="sumo-page-section has-moz-headings pick-a-way text-left">
-  <h2 class="text-display-sm">{{ _('How it works') }}</h2>
-  <div class="sumo-l-two-col">
+<section class="sumo-page-section has-moz-headings">
+  <div class="sumo-l-two-col align-center">
     <div class="sumo-l-two-col--one-half gi-visual text-center">
       <img src="{{ STATIC_URL }}sumo/img/gi-visual-questions.png?v=1" alt="">
       <p class="text-display-xs legacy-blue-text"><em>{{ _('Solving 1 issue helps up to 1,000 users a day') }}</em></p>
     </div>
     <div class="sumo-l-two-col--one-half">
-      <ol class="mzp-u-list-styled headings-list">
-        <li>{% set message =  _('Sign up as a volunteer') %}
-        {% if not user_is_contributor and request.LANGUAGE_CODE in AAQ_LANGUAGES %}
-          <a href="#" data-trigger="click" data-trigger-target="#sign-up-contributor">{{ message }}</a>
-        {% else %}
-          {{ message }}
-        {% endif %}
-        </li>
-        <li>{% set message = _('Go to our support forum and choose a question to answer') %}
-        {% if request.LANGUAGE_CODE in AAQ_LANGUAGES %}
-          <a href="{{ url('questions.home') }}">{{ message }}</a>
-        {% else %}
-          {{ message }}
-        {% endif %}
-        </li>
-        <li>
-          <strong>{{ _('Start answering!') }}</strong><br>
-          <a href="{{ url('wiki.document', 'answering-questions-support-forum') }}">
-            {{ _('Read this for some help to get started') }}
-          </a>
+      <h2 class="text-display-sm">{{ _('How it works') }}</h2>
+      <div class="pick-a-way text-left">
+        <ol class="mzp-u-list-styled headings-list">
+          <li>{% set message =  _('Sign up as a volunteer') %}
+          {% if not user_is_contributor and request.LANGUAGE_CODE in AAQ_LANGUAGES %}
+            <a href="#" data-trigger="click" data-trigger-target="#sign-up-contributor">{{ message }}</a>
+          {% else %}
+            {{ message }}
+          {% endif %}
+          </li>
+          <li>{% set message = _('Go to our support forum and choose a question to answer') %}
+          {% if request.LANGUAGE_CODE in AAQ_LANGUAGES %}
+            <a href="{{ url('questions.home') }}">{{ message }}</a>
+          {% else %}
+            {{ message }}
+          {% endif %}
           </li>
-      </ol>
+          <li><strong>{{ _('Start answering!') }}</strong><br>
+            <a href="{{ url('wiki.document', 'answering-questions-support-forum') }}">
+              {{ _('Read this for some help to get started') }}
+            </a>
+            </li>
+        </ol>
+        </div>
     </div>
   </div>
 </section>

kitsune/landings/jinja2/landings/get-involved.html

@@ -86,7 +86,7 @@ <h3 class="text-display-sm">{{ _('About Us') }}</h3>
     </div>
   </section>
   <section class="sumo-page-section">
-    <div class="card card--ribbon is-inverse has-moz-headings">
+    <div class="card card--ribbon is-callout-bg has-moz-headings">
       <div class="card--details">
         <h3 class="card--title">
           {{ _('Having trouble with a Mozilla product and want some help?') }}

kitsune/landings/jinja2/landings/includes/register_contributor.html

@@ -1,10 +1,10 @@
 {% if not user_is_contributor %}
-<div class="card card--ribbon is-inverse has-moz-headings heading-is-one-line no-body-text">
+<div class="card card--ribbon is-callout-bg has-moz-headings heading-is-one-line no-body-text">
   <div class="card--details">
     <h3 class="card--title">
       <svg class="card--icon-sm" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-          <g transform="translate(2.000000, 1.878680)" stroke="#FFFFFF" stroke-width="2">
+          <g transform="translate(2.000000, 1.878680)" stroke="#000000" stroke-width="2">
             <path d="M9,1.12132031 L2,1.12132031 C0.8954305,1.12132031 5.32907052e-15,2.01675081 5.32907052e-15,3.12132031 L5.32907052e-15,15.1213203 C5.32907052e-15,16.2258898 0.8954305,17.1213203 2,17.1213203 L11,17.1213203 L13,21.1213203 L15,17.1213203 L17,17.1213203 C18.1045695,17.1213203 19,16.2258898 19,15.1213203 L19,9.12132031"></path>
             <path d="M15.5,0.621320312 C16.3284271,-0.207106783 17.6715729,-0.207106769 18.5,0.621320344 C19.3284271,1.44974746 19.3284271,2.79289318 18.5,3.62132031 L11,11.1213203 L7,12.1213203 L8,8.12132031 L15.5,0.621320312 Z"></path>
           </g>

kitsune/products/jinja2/products/documents.html

@@ -35,21 +35,20 @@
             <a href="{{ prod_url }}"><img src="{{ product.image_alternate_url }}" height="48" width="48" alt="" /></a>
           </div>
 
-          <h1 class="text-display-lg topic-title">
-            {% if subtopic %}
-              <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}">
-            {% endif %}
-            {{ pgettext('DB: products.Topic.title', topic.title) }}
-            {% if subtopic %}
-              </a>
-            {% endif %}
-          </h1>
-
-        {% if subtopic %}
-          <h1 class="topic-title is-subtopic cf">
+          {% if subtopic %}
+          <p class="text-display-xs mb-0">
+            <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}">
+              {{ pgettext('DB: products.Topic.title', topic.title) }}
+            </a>
+          </p>
+          <h1 class="topic-title is-subtopic text-display-lg">
             {{ pgettext('DB: products.Topic.title', subtopic.title) }}
           </h1>
-        {% endif %}
+          {% else %}
+          <h1 class="topic-title text-display-lg">
+            {{ pgettext('DB: products.Topic.title', topic.title) }}
+          </h1>
+          {% endif %}
 
         {# Show the description if it is different than the title. Otherwise, don't bother. #}
         {% if (subtopic and subtopic.title != subtopic.description) or (not subtopic and topic.title != topic.description) %}
@@ -132,6 +131,11 @@ <h3 class="text-display-xxs">
     <section id="get-involved-button" class="sumo-page-section document-get-involved">
       {% include "landings/includes/volunteer-callout.html" %}
     </section>
+
+    <section class="sumo-page-section">
+      {{ ff_alert(text=_('Unlock more from every Firefox product. Get a Firefox account.'), modifier_class="has-abs-close-button", id="ff_alert_doc_page") }}
+    </section>
+
 {% endblock %}
 
 {% block below_main %}

kitsune/products/jinja2/products/includes/topic_macros.html

@@ -23,8 +23,6 @@ <h3 class="card--title">
 
 
   <section class="support-callouts">
-    {% set listed_product=product.slug|capitalize %}
-
     {% if show_community_support %}
     <div class="card card--ribbon is-inverse has-moz-headings heading-is-one-line">
       <div class="card--details">
@@ -38,9 +36,9 @@ <h3 class="card--title">
             </g>
           </svg>
 
-          {{ _('Need more help?') }}
+          {{ _('Still need help?') }}
         </h3>
-        <p class="card--desc">{{ _('Our support forums are a great place to ask a question, learn and discover new ways to use {}.'.format(listed_product)) }}</p>
+        <p class="card--desc">{{ _('We’re here for you. Post a question to our support forums and get answers from our community of experts.') }}</p>
         <a
           class="sumo-button primary-button button-lg"
           href="{{ url('wiki.document', 'get-community-support') }}"
@@ -86,19 +84,20 @@ <h3 class="sidebar-subheading hide-on-mobile">{{ _('All') }} {{ product }} {{ _(
 {%- endmacro %}
 
 
-{% macro topic_tabs(topics, subtopics, product, selected_topic=None, selected_subtopic=None) -%}
+{% macro topic_tabs(topics, subtopics, product, topic, selected_subtopic=None) -%}
 <nav class="tabs">
   <ul class="tabs--list subtopics">
+    {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
     <li class="tabs--item">
-      <a class="tabs--link {% if selected_subtopic == None %}is-active{% endif %}" href="{{ topic_url }}">
+      <a class="tabs--link {% if not selected_subtopic %}is-active{% endif %}" href="{{ topic_url }}">
         <span class="mobile-only">{{ _('All') }}</span>
         <span class="hide-on-mobile">{{ _('All articles and threads') }}</span>
       </a>
     </li>
     {% for subtopic in subtopics %}
       {% set subtopic_url = url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) %}
       <li class="tabs--item">
-        <a class="tabs--link {% if selected_subtopic == subtopic %}is-active{% endif %}" href="{{ subtopic_url }}" data-event-category="link click" data-event-action="subtopic sidebar" data-event-label="{{subtopic.title}}">
+        <a class="tabs--link {% if subtopic == selected_subtopic %}is-active{% endif %}" href="{{ subtopic_url }}" data-event-category="link click" data-event-action="subtopic sidebar" data-event-label="{{subtopic.title}}">
           <span>{{ pgettext('DB: products.Topic.title', subtopic.title) }}</span>
         </a>
       </li>

kitsune/questions/jinja2/questions/question_list.html

@@ -32,9 +32,16 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block masthead %}
-<section class="sumo-page-section shade-bg">
+<section class="sumo-page-section hide-when-search-is-active shade-bg">
   <div class="mzp-l-content">
-    {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
+    <div class="sumo-l-two-col sidebar-on-right align-center cols-on-medium">
+      <div class="sumo-l-two-col--main">
+        {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
+      </div>
+      <div class="sumo-l-two-col--sidebar hide-on-mobile">
+        {{ search_box(settings, id='support-search-sidebar', params=search_params, placeholder=_('Search Support')) }}
+      </div>
+    </div>
   </div>
   <div class="mzp-l-content">
     {% if logo %}
@@ -121,6 +128,11 @@ <h1 class="text-display-lg {% if not logo %}no-logo{% endif %}">
 
 <nav id="owner-tabs" class="tabs">
     <ul class="tabs--list subtopics">
+      <li class="tabs--item">
+        <a href="{{ questions_url(show='all', filter=None, page=None) }}" {{ show|class_selected('all') }}>
+          <span>{{ _('All') }}</span>
+        </a>
+      </li>
       <li class="tabs--item">
         <a href="{{ questions_url(show='needs-attention', filter=None, page=None) }}" {{ show|class_selected('needs-attention') }}>
           <span>{{ _('Attention needed') }}</span>
@@ -136,11 +148,6 @@ <h1 class="text-display-lg {% if not logo %}no-logo{% endif %}">
           <span>{{ _('Done') }}</span>
         </a>
       </li>
-      <li class="tabs--item">
-        <a href="{{ questions_url(show='all', filter=None, page=None) }}" {{ show|class_selected('all') }}>
-          <span>{{ _('All questions') }}</span>
-        </a>
-      </li>
     </ul>
   </nav>
 

kitsune/search/jinja2/search/basic-form.html

@@ -1,9 +1,9 @@
 {% macro form(q='') -%}
   <div id="basic-search" class="search-empty">
   {{ _('Enter your terms in the form below and click <strong>Search</strong>')|safe }}
-    <form role="search" method="get" action="{{ url('search') }}">
-      <input type="text" class="search-query search-empty-query" value="{{ q }}" name="q">
-      <input type="submit" class="search-empty-submit btn-large btn btn-submit" value="{{ pgettext('button', 'Search') }}">
+    <form data-instant-search="form" role="search" method="get" action="{{ url('search') }}" class="simple-search-form">
+      <input type="text" class="searchbox search-query search-empty-query" id="search-q" value="{{ q }}" name="q">
+      <button type="submit" class="search-empty-submit search-button">{{ pgettext('button', 'Search') }}</button>
     </form>
   </div>
 {%- endmacro %}

kitsune/search/jinja2/search/down.html

@@ -1,13 +1,13 @@
 {% extends "search/base.html" %}
 
 {% block content %}
-<article id="search-down" class="main">
-  <h1>{{ _('Search Unavailable') }}</h1>
+<article id="search-down" class="main sumo-page-section">
+  <h1 class="text-display-lg">{{ _('Search Unavailable') }}</h1>
 
   <p>{{ _('Search is temporarily unavailable. Please try again in a few minutes.') }}</p>
 
   <p>
-    <a class="btn" href="{{ request.get_full_path() }}">
+    <a class="sumo-button" href="{{ request.get_full_path() }}">
       Try your search again
     </a>
   </p>

kitsune/search/jinja2/search/form.html

@@ -5,6 +5,26 @@
   {% set classes = 'advanced_search' %}
 {% endif %}
 
+{% block breadcrumbs %}{% endblock %}
+
+{% block masthead %}
+{% if not advanced %}
+<div class="search-results-visible">
+  <section class="home-search-section sumo-page-section--lg shade-bg ">
+    <div class="mzp-l-content">
+      <div class="home-search-section--content">
+        <h1 class="text-display-lg">{{ _('Search Support') }}</h1>
+          {% from "search/includes/macros.html" import basic_search_form with context %}
+          {{ basic_search_form(True) }}
+
+          <p><a href="{{ url('search.advanced')|urlparams(q=search_form.q.data) }}">{{ _('Use advanced search') }}</a></p>
+      </div>
+    </div>
+  </section>
+</div>
+{% endif %}
+{% endblock %}
+
 {% block content %}
   <section class="sumo-page-section">
     <div class="content-box cf" id="advanced-search">
@@ -233,10 +253,6 @@ <h2 class="text-body-lg">{{ search_form.thread_type.label_tag() }}</h2>
             </form>{# discussion #}
           </div>{# tab-wrapper #}
         </div>{# search-tabs #}
-      {% else %}
-        {% from "search/includes/macros.html" import basic_search_form with context %}
-        {{ basic_search_form(True) }}
-        <a href="{{ url('search.advanced')|urlparams(q=search_form.q.data) }}">{{ _('Use advanced search') }}</a>
       {% endif %}
     </div>
   </section>

kitsune/search/jinja2/search/includes/macros.html

@@ -9,7 +9,7 @@
         {% endfor %}
       {% endfor %}
       <input type="text" class="searchbox" value="{{ q }}" name="q">
-      <button type="submit" class="button">{{ _('Search Mozilla Support') }}</button>
+      <button type="submit" class="search-button">{{ _('Search Mozilla Support') }}</button>
     </form>
   </div>
 {%- endmacro %}

kitsune/search/jinja2/search/includes/result.html

@@ -1,7 +1,7 @@
 {% macro search_result(result) %}
   <div class="result {{ result.type }}">
     {% set url =  result.url %}
-    <h3 class="text-display-xs"><a class="title" href="{{ url }}" {% if as == 'aaq' %}target="_blank"{% endif %}>{{ result.title }}</a></h3>
+    <h3 class="text-body-lg"><a class="title" href="{{ url }}" {% if as == 'aaq' %}target="_blank"{% endif %}>{{ result.title }}</a></h3>
     <p>{{ result.search_summary }}</p>
 
     {% if result.type == 'question' %}

kitsune/search/jinja2/search/results.html

@@ -9,19 +9,32 @@
   {% set crumbs = [(url('search.advanced'), _('Advanced Search')), (None, _('Results'))] %}
 {% endif %}
 
+{% block masthead %}
+{% if not advanced %}
+<div class="search-results-visible">
+  <section class="home-search-section sumo-page-section--lg shade-bg">
+    <div class="mzp-l-content">
+      <div class="home-search-section--content">
+        <h1 class="text-display-lg">{{ _('Search Support') }}</h1>
+        {{ basic_search_form(True) }}
+        <p><a href="{{ url('search.advanced')|urlparams(q=search_form.q.data) }}">{{ _('Use advanced search') }}</a></p>
+      </div>
+    </div>
+  </section>
+</div>
+{% endif %}
+{% endblock %}
+
+
 {% block content %}
   <div id="search-results" class="sumo-page-section" >
-    {% if not advanced %}
-      {{ basic_search_form(True) }}
-    {% endif %}
-
       {% if num_results > 0 %}
-        <h2 class="text-display-md">
+        <p class="text-body-lg">
           {# L10n: {n} is the number of search results, {q} is the search query, {product} is the product. #}
           {{ ngettext('Found <strong>{n}</strong> result for <strong>{q}</strong> for <strong>{product}</strong>',
                       'Found <strong>{n}</strong> results for <strong>{q}</strong> for <strong>{product}</strong>',
                       num_results)|fe(n=num_results, q=q, product=product_titles) }}
-        </h2>
+        </p>
 
         <div class="content-box">
           {% for doc in results %}
@@ -31,10 +44,10 @@ <h2 class="text-display-md">
 
         {{ pages|paginator }}
       {% else %}
-        <h2 class="text-display-md">
+        <p class="text-body-lg">
           {# L10n: {q} is the search query, {l} is the language searched. #}
           {{ _("Sorry! 0 results found for ‘{q}’ in ‘{l}’")|fe(q=q, l=lang_name) }}
-        </h2>
+        </p>
 
         <p>{{ _("Try searching again with a different keyword, or browse our featured articles and threads below instead.") }}</p>