Revert "Improved topic cards now show three articles, with new design (…

…#6408)" (#6466) This reverts commit d2f0741.
mozilla · Jan 21, 2025 · 737cb9c · 737cb9c
1 parent 391a031
commit 737cb9c
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 154 deletions.
diff --git a/kitsune/products/jinja2/products/includes/topic_macros.html b/kitsune/products/jinja2/products/includes/topic_macros.html
@@ -1,45 +1,32 @@
 {% macro help_topics(topics, product_slug=None, new_tab=False) -%}
-{# topics: List of topic_data dicts containing:
-    - topic: Topic model instance
-    - topic_url: URL to topic page
-    - title: Topic title
-    - total_articles: Number of articles
-    - image_url: URL to topic icon
-    - documents: three documents for the topic
-#}
-<div class="topics-section">
-  <div class="topics-grid">
-    {% for topic_data in topics %}
-    <div class="card--topic">
-      <div class="topic-header">
+  <div class="sumo-card-grid">
+    <div class="scroll-wrap">
+      {% for topic in topics %}
+      {% set topic_url = url('products.documents', product_slug=product_slug or product.slug, topic_slug=topic.slug) %}
+      <div class="card card--topic">
         <img
           class="card--icon"
-          src="{{ topic_data.image_url }}"
-          alt="{{ pgettext('DB: products.Topic.title', topic_data.title) }} icon"
+          src="{{ topic.image_url }}"
+          alt="{{ pgettext('DB: products.Topic.title', topic.title) }} icon"
         />
+        <div class="card--details">
           <h3 class="card--title">
-            <a href="{{ topic_data.topic_url }}">
-              {{ pgettext('DB: products.Topic.title', topic_data.title) }}
+            <a class="expand-this-link" href="{{ topic_url }}" data-on-hover="{{ _('See all') }}" {% if new_tab %} target="_blank" {% endif %}
+              data-event-name="link_click"
+              data-event-parameters='{
+                "link_name": "product-and-topic-home",
+                "link_detail": "{{ (product_slug or product.slug) + '/' + topic.slug }}"
+              }'>
+              {{ pgettext('DB: products.Topic.title', topic.title) }}
             </a>
           </h3>
+        </div>
       </div>
-      <ul class="article-list">
-        {% for document in topic_data.documents %}
-        <li>
-          <a href="{{ document.url }}">      
-            {{ document.document_title }}</a>
-        </li>
-        {% endfor %}
-      </ul>
-      <a class="view-all-link" href="{{ topic_data.topic_url }}">View All {{ topic_data.total_articles }} Articles</a>
+      {% endfor %}
     </div>
-    {% endfor %}
   </div>
-</div>
 {%- endmacro %}
 
-
-
 {% macro topic_metadata(topics, product=None) %}
 {% if product and has_aaq_config and not settings.READ_ONLY %}
   <section class="support-callouts mzp-l-content sumo-page-section--inner">

diff --git a/kitsune/products/jinja2/products/product.html b/kitsune/products/jinja2/products/product.html
@@ -123,7 +123,7 @@ <h1 class="sumo-page-heading-xl">
     <div class="sumo-page-subheader">
       <div class="sumo-page-subheader--text">
         <div class="text-center-to-left-on-large">
-          <h2 class="sumo-page-subheading">{{ _('Topics') }}</h2>
+          <h2 class="sumo-page-subheading">{{ _('Frequent Topics') }}</h2>
           <p class="sumo-page-intro">{{ _('Explore the knowledge base.') }}</p>
         </div>
       </div>

diff --git a/kitsune/products/views.py b/kitsune/products/views.py
@@ -4,7 +4,6 @@
 from django.db.models import Exists, OuterRef, Q
 from django.http import Http404, HttpResponse
 from django.shortcuts import get_object_or_404, redirect, render
-from django.urls import reverse
 from product_details import product_details
 
 from kitsune.products.models import Product, Topic, TopicSlugHistory
@@ -24,19 +23,8 @@ def product_list(request):
 
 
 @check_simple_wiki_locale
-def product_landing(request, slug: str) -> HttpResponse:
-    """The product landing page.
-
-    Args:
-        request: The HTTP request
-        slug: Product slug identifier
-
-    Returns:
-        Rendered product landing page
-
-    Raises:
-        Http404: If product not found
-    """
+def product_landing(request, slug):
+    """The product landing page."""
     if slug == "firefox-accounts":
         return redirect(product_landing, slug="mozilla-account", permanent=True)
 
@@ -57,35 +45,14 @@ def product_landing(request, slug: str) -> HttpResponse:
             latest_version = versions[0].min_version
         else:
             latest_version = 0
-    topics = topics_for(request.user, product=product, parent=None)
-    # Create a dictionary of topics and three documents
-    topics_with_urls = []
-    for topic in topics:
-        docs, _ = documents_for(
-            request.user, request.LANGUAGE_CODE, topics=[topic], products=[product]
-        )
-        total_articles = len(docs)
-        # Leverage get_featured_articles to get active articles
-        docs = get_featured_articles(product, locale=request.LANGUAGE_CODE, topic=topic)
-
-        # Create a dict with topic data including the URL
-        topic_data = {
-            "topic": topic,
-            "topic_url": reverse("products.documents", args=[product.slug, topic.slug]),
-            "title": topic.title,
-            "total_articles": total_articles,
-            "image_url": topic.image_url,
-            "documents": docs[:3],
-        }
-        topics_with_urls.append(topic_data)
 
     return render(
         request,
         "products/product.html",
         {
             "product": product,
             "products": Product.active.filter(visible=True),
-            "topics": topics_with_urls,  # Use the new list with URLs
+            "topics": topics_for(request.user, product=product, parent=None),
             "search_params": {"product": slug},
             "latest_version": latest_version,
             "featured": get_featured_articles(product, locale=request.LANGUAGE_CODE),

diff --git a/kitsune/sumo/static/sumo/scss/components/_card.scss b/kitsune/sumo/static/sumo/scss/components/_card.scss
@@ -181,74 +181,21 @@
   }
 
   &--topic {
+    @include c.elevation-01;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 16px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-
-    .topic-header {
-      display: flex;
-      align-items: flex-start;
-      gap: 10px;
-      margin-bottom: 16px;
-    }
-
-    .card--icon {
-      flex-shrink: 0;
-      width: 18px;
-      height: 18px;
-    }
+    align-items: center;
 
-    .card--title {
-      font-family: Inter;
-      font-size: 16px;
-      font-weight: 700;
+    .card-title {
       margin: 0;
-      line-height: 1.2;
-      flex-grow: 1;
     }
 
-    .article-list {
-      flex-grow: 1;
-      margin: 0 0 16px;
-      padding: 0;
-      list-style: none;
-
-      li {
-        margin-bottom: 8px;
-        line-height: 1.5;
-
-        a {
-          color: black;
-          font-size: 14px;
-          text-decoration: underline;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-
-    .view-all-link {
-      border-top: 1px solid #ddd;
-      padding-top: 10px;
-      margin-top: 16px;
-      display: inline-block;
-      font-size: 14px;
-      color: #000000;
-      text-decoration: underline;
-      font-weight: normal;
-
-      &:hover {
-        text-decoration: underline;
-      }
+    .card--icon {
+      width: p.$spacing-lg;
+      height: p.$spacing-lg;
+      object-fit: contain;
+      font-size: 9px;
+      line-height: 1;
+      flex: 0 0 auto;
     }
   }
 

diff --git a/kitsune/sumo/static/sumo/scss/layout/_products.scss b/kitsune/sumo/static/sumo/scss/layout/_products.scss
@@ -32,21 +32,3 @@
     margin: 0 p.$spacing-xs;
   }
 }
-
-
-// SCSS for Topics Section Layout
-
-.topics-section {
-  padding: 40px 20px;
-  h2 {
-    font-size: 24px;
-    margin-bottom: 0px;
-    color: #333;
-  }
-}
-
-.topics-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
diff --git a/kitsune/wiki/utils.py b/kitsune/wiki/utils.py
@@ -103,11 +103,10 @@ def _active_contributors_id(from_date, to_date, locale, product):
     return set(list(editors) + list(reviewers))
 
 
-def get_featured_articles(product=None, locale=settings.WIKI_DEFAULT_LANGUAGE, topic=None):
+def get_featured_articles(product=None, locale=settings.WIKI_DEFAULT_LANGUAGE):
     """Returns 4 random articles from the most visited.
 
-    If a product is passed, it returns 4 random highly visited articles from that product.
-    If a topic is passed, it returns 4 random highly visited articles from that topic.
+    If a product is passed, it returns 4 random highly visited articles.
     """
     visits = (
         WikiDocumentVisits.objects.filter(period=LAST_7_DAYS)
@@ -125,9 +124,6 @@ def get_featured_articles(product=None, locale=settings.WIKI_DEFAULT_LANGUAGE, t
     if product:
         visits = visits.filter(document__products__in=[product.id])
 
-    if topic:
-        visits = visits.filter(document__topics__in=[topic.id])
-
     visits = visits[:10]
     documents = []