feature flag based drop down display for topics and languages

mitodl · Jan 24, 2025 · cf0e8a4 · cf0e8a4
1 parent f5630e1
commit cf0e8a4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/cms/models.py b/cms/models.py
@@ -663,7 +663,8 @@ def get_context(self, request, *args, **kwargs):  # noqa: ARG002
                 }
                 for sorting_option in CatalogSorting
             ],
-            selected_language=request.GET.get("language", ALL_LANGUAGES),
+            is_language_filter_enabled=is_language_filter_enabled,
+            selected_language=language_filter,
             language_options=[ALL_LANGUAGES]
             + [
                 course_language.name

diff --git a/cms/templates/catalog_page.html b/cms/templates/catalog_page.html
@@ -21,6 +21,7 @@ <h1>{{ site_name }}—Professional Development, the MIT Way</h1>
   {% endblock %}
   <div class="catalog-content">
     <div class="topics">
+      {% if is_language_filter_enabled %}
       <div class="catalog-filter-dropdown dropdown" id="topicSortDropdown">
         <span>Topic</span>
         <div
@@ -93,6 +94,20 @@ <h1>{{ site_name }}—Professional Development, the MIT Way</h1>
             </div>
           </div>
         </div>
+        {% else %}
+        {% for topic in topics %}
+        {% if selected_topic == topic %}
+        <div class="topic selected">
+          {% else %}
+          <div class="topic">
+            {% endif %}
+            <a href="{% pageurl page %}?topic={{ topic | urlencode }}"
+              >{{ topic }}</a
+            >
+          </div>
+          {% endfor %}
+        </div>
+        {% endif %}
         <div class="courseware">
           <div class="tab-block">
             <div class="container">

diff --git a/static/scss/catalog/tabs.scss b/static/scss/catalog/tabs.scss
@@ -216,12 +216,6 @@
     border: none;
   }
 
-  // span {
-  //   color: #626a73;
-  //   font-size: 16px;
-  //   font-weight: 600;
-  // }
-
   .dropdown-toggle {
     border: 1px solid #dde1ec;
     padding: 16px;
@@ -231,10 +225,13 @@
     &::after {
       float: right;
     }
+  }
 
-    // color: #212326;
-    // font-size: 18px;
-    // font-weight: 600;
+  .dropdown-menu {
+    .dropdown-item {
+      text-wrap-mode: wrap;
+      line-height: 20px;
+    }
   }
 
   .col-2 {