Merge pull request #103 from wikimedia/ahmed-arb/search-languages

Add: search input elem in facets

edx-platform/wikilearn/lms/static/sass/components/_refine-sidebar.scss

@@ -0,0 +1,19 @@
+.facet-header-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    border-top: 1px solid $gray-l4;
+
+    .lng-srch-facet-input {
+        margin: ($baseline/4) !important;
+    }
+}
+
+.facet-list{
+    ul{
+        max-height: ($baseline*1.5)*5;
+        overflow: hidden;
+        overflow-y:scroll;
+    }
+}

edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_extras.scss

@@ -20,3 +20,4 @@
 @import '../../../components/footer';
 @import '../../../components/course';
 @import '../../../features/catalog';
+@import "../../../components/refine-sidebar"

edx-platform/wikilearn/lms/static/sass/partials/lms/theme/_variables.scss

@@ -16,11 +16,13 @@ $theme-blue:                #36c;
 $cornflower-blue:           #447ff5;
 $butterfly-bush:            #6b4ba1;
 $base-font-color:           #000;
+$gray:                      rgb(127,127,127);
 $footer-bg:                 #f6f6f6;
 $m-blue-d6:                 #256a97 !default;
 $blue:                      rgb(0, 159, 230) !default;
 $white:                     rgb(255, 255, 255) !default;
 $m-blue-d5:                 rgb(0, 158, 231) !default;
+$gray-l4:                   tint($gray,80%);
 $primary:                   $theme-blue;
 $action-primary-bg:         $theme-blue;
 

edx-platform/wikilearn/lms/templates/discovery/facet.underscore

@@ -0,0 +1,23 @@
+<div class=".facet-container">
+    <div class="facet-header-container">
+        <h3 class="header-facet">
+            <%- displayName %>
+        </h3>
+        <% if (listIsHuge) { %>
+            <input type="text" id="lng-srch-facet-input", class="lng-srch-facet-input" placeholder="Search..." />
+        <% } %>
+    </div>
+    <ul data-facet="<%- name %>" class="facet-list collapse">
+        <%= HtmlUtils.ensureHtml(optionsHtml) %>
+    </ul>
+</div>
+<% if (listIsHuge) { %>
+    <div class="toggle ">
+        <button class="show-more discovery-button">
+            <%- gettext("More") %>
+        </button>
+        <button class="show-less hidden discovery-button">
+            <%- gettext("Less") %>
+        </button>
+    </div>
+<% } %>