AAQ work

kitsune/questions/jinja2/questions/includes/aaq_macros.html

@@ -19,8 +19,8 @@
 {%- endmacro  %}
 
 {% macro select_product(products) -%}
-  <h1 class="sumo-page-heading">{{ _('Choose a product') }}</h1>
-  <p class="sumo-page-intro">{{ _('Which product would you like to post a question about?') }}</p>
+  <h1 class="sumo-page-heading">{{ _('Ask the Community') }}</h1>
+  <h2 class="sumo-page-subheading">{{ _('Which product do you need help with?') }}</h2>
   <div class="sumo-page-section--inner">
     <div id="product-picker" class="sumo-card-grid stack-on-mobile" style="--cg-count: {{ products|length }};">
       <div class="scroll-wrap">
@@ -71,20 +71,84 @@
   </div>
 {%- endmacro %}
 
-{% macro select_category(product) -%}
-  <div class="highlight-box">
-    <h2 class="sumo-page-subheading">{{ _('Which category best describes your problem?') }}</h2>
-    <ul class="select-one sumo-page-intro">
-      {% for key, category in product.categories.iteritems() %}
-        <li>
-          <a href="{{ url('questions.aaq_step3', product_key=product.key, category_key=key) }}"
-          data-event-category="link click"
-          data-event-action="category"
-          data-event-label="{{ category.name }}">{{ category.name }}</a>
-        </li>
-      {% endfor %}
-    </ul>
+{% macro select_category(product, search_box) -%}
+<section class="sumo-page-section hide-when-search-is-active shade-bg">
+  <div class="mzp-l-content">
+    <div class="sumo-l-two-col sidebar-on-right align-center cols-on-medium">
+      <div class="sumo-l-two-col--main">
+
+        <div class="breadcrumbs">
+          <ol class="breadcrumbs--list">
+            <li><a href="#TODO">{{ _('Select Product')}}</a></li>
+            <li>{{ product.name }} (TODO - needs proper breadcrumb config)</li>
+          </ol>
+        </div>
+
+
+        <img class="page-heading--logo" src="{{ product.image }}" alt="{{ product.name }} logo #TODO">
+        <h1 class="sumo-page-heading ">
+          <span class="product-title-text">{{ product.name }} {{ _('Solutions') }}</span>
+        </h1>
+        {{ search_box(settings, id='question-search-masthead', params=search_params) }}
+
+        <p class="page-heading--intro-text">
+            {{ _('Search your question or keywords to find solutions in the knowledge base or forums') }}
+        </p>
+      </div>
+      <div class="sumo-l-two-col--sidebar">
+        <div class="card elevation-01 text-center radius-md">
+          <h2 class="card--title has-bottom-margin">{{ _('Ask the Community') }}</h2>
+          <p>{{ _('Sign in/up to post your question and get help.') }}</p>
+          <a class="sumo-button primary-button feature-box" href="#TODO">Ask a Question</a>
+        </div>
+      </div>
+    </div>
   </div>
+</section>
+<div class="wrap">
+<section class="mzp-l-content sumo-page-section--inner">
+  <div class="text-center-to-left-on-large">
+    <h2 class="sumo-page-subheading">{{ _('Popular Threads') }}</h2>
+  </div>
+  {% include "landings/includes/featured_articles.html" %}
+</section>
+<section class="sumo-page-section--inner hide-when-search-is-active highlight-box">
+    <div class="mzp-l-content">
+      <div class="sumo-page-subheader">
+        <div class="sumo-page-subheader--text">
+          <h2 class="sumo-page-subheading">{{ _('Popular Topics') }}</h2>
+        </div>
+      </div>
+      <div class="sumo-card-grid" style="--cg-count: {{ category|length }};">
+        <div class="scroll-wrap">
+          {% for key, category in product.categories.iteritems() %}
+          {% set category_url = url('questions.aaq_step3', product_key=product.key, category_key=key) %}
+          <div class="card card--topic">
+            <img
+              class="card--icon"
+              src="{{ category.image }}"
+              alt="{{ category.name }} icon"
+            />
+            <div class="card--details">
+              <h3 class="card--title">
+                <a class="expand-this-link"
+                  href="{{ category_url }}"
+                  data-on-hover="{{ _('See all') }}"
+                  data-event-category="link click"
+                  data-event-action="topic"
+                  data-event-label="{{ category.name }}"
+                  >
+                  {{ category.name }}
+                </a>
+              </h3>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+</section>
+</div>
 {%- endmacro %}
 
 {% macro selected_category(category, product, can_change) -%}

kitsune/questions/jinja2/questions/includes/question_editing_frame.html

@@ -10,7 +10,7 @@ we can compute the edit-title URL.
 #}
 {% extends "questions/base.html" %}
 {% from "layout/errorlist.html" import errorlist %}
-{% from "includes/common_macros.html" import content_editor with context %}
+{% from "includes/common_macros.html" import search_box, content_editor with context %}
 {% from "questions/includes/aaq_macros.html" import selected_category, aaq_progress %}
 {% from "questions/includes/aaq_macros.html" import selected_product with context%}
 {% from "questions/includes/aaq_macros.html" import troubleshooting_instructions with context %}
@@ -20,10 +20,16 @@ we can compute the edit-title URL.
 
 {% block contentwrap %}
 <div id="main-content">
+  {% block category %}
+  {% endblock %}
+
   <article class="main mzp-l-content sumo-page-section--inner">
     {% block product %}
     {% endblock %}
 
+    {% block articles_and_search_results %}
+    {% endblock %}
+
     <div class="sumo-l-two-col" id="ask-question">
       <aside class="sumo-l-two-col--sidebar"></aside>
       <article class="sumo-l-two-col--main">
@@ -36,13 +42,8 @@ we can compute the edit-title URL.
             {% if current_step %}
               {# removing steps for now – may revisit during AAQ project, 3/20 {{ aaq_progress(step=current_step) }} #}
             {% endif %}
-            {% block category %}
-            {% endblock %}
           </div>
 
-        {% block articles_and_search_results %}
-        {% endblock %}
-
         {% if form %}
           <div class="highlight-box">
             <form id="question-form" method="post">
@@ -132,16 +133,6 @@ we can compute the edit-title URL.
             </form>
           </div>
         {% endif %}
-
-        <div id="product-topic-changer" class="cf">
-          {% if current_product %}
-            {{ selected_product(current_product, can_edit_product) }}
-
-            {% if current_category %}
-              {{ selected_category(current_category, current_product, can_edit_category) }}
-            {% endif %}
-          {% endif %}
-        </div>
       </article>
     </div>
   </article>

kitsune/questions/jinja2/questions/new_question.html

@@ -23,7 +23,7 @@
 
 {% block category %}
   {% if current_product and not current_category and current_product.categories %}
-    {{ select_category(current_product) }}
+    {{ select_category(current_product, search_box) }}
   {% else %}
     {{ super() }}
   {% endif %}

kitsune/sumo/static/sumo/scss/components/_card.scss

@@ -78,6 +78,12 @@
     margin-bottom: p.$spacing-xl;
   }
 
+  &--title {
+    &.has-bottom-margin {
+      margin-bottom: p.$spacing-sm;
+    }
+  }
+
   &.is-inverse {
     background: var(--color-inverse-bg);