Merge pull request #102 from wikimedia/ahmed-arb/study-next-feature

Add study next button and styling

edx-platform/wikilearn/lms/static/sass/features/_catalog.scss

@@ -0,0 +1,21 @@
+.prerequisits-button {
+    @extend %ui-depth2;
+    @extend %t-icon3;
+    @extend %t-strong;
+
+    border: 2px solid $m-blue-d6;
+    border-radius: ($baseline*0.1);
+    padding: 0 ($baseline*0.7);
+    background: $blue;
+    box-shadow: none;
+    color: $white;
+    text-shadow: none;
+    float: right;
+    margin-bottom: 1rem;
+
+    //STATE: hover, focus
+    &:hover,
+    &:focus {
+      background: $theme-blue;
+    }
+  }

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

@@ -19,3 +19,4 @@
 @import '../../../components/header';
 @import '../../../components/footer';
 @import '../../../components/course';
+@import '../../../features/catalog';

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

@@ -7,6 +7,7 @@
 $header-logo-width: 60px !default;
 $header-logo-height: 36px;
 $header-user-image-size: 40px !default;
+$baseline: 20px !default;
 
 // ----------------------------
 // #COLORS
@@ -16,13 +17,20 @@ $cornflower-blue:           #447ff5;
 $butterfly-bush:            #6b4ba1;
 $base-font-color:           #000;
 $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;
 $primary:                   $theme-blue;
 $action-primary-bg:         $theme-blue;
 
 $link-color:                $theme-blue;
 $link-hover:                $cornflower-blue;
 $link-visited:              $butterfly-bush;
 
+// Course Discover
+$course-card-height: ($baseline*18) !default;
+
 
 $font-family-sans-serif: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
 

edx-platform/wikilearn/lms/templates/courseware/courses.html

@@ -0,0 +1,98 @@
+<%page expression_filter="h"/>
+<%!
+  import json
+  from django.utils.translation import ugettext as _
+  from django.urls import reverse
+
+  from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_json
+%>
+<%inherit file="../main.html" />
+<%
+  course_discovery_enabled = settings.FEATURES.get('ENABLE_COURSE_DISCOVERY')
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+% if course_discovery_enabled:
+<%block name="header_extras">
+  % for template_name in ["course_card", "filter_bar", "filter", "facet", "facet_option"]:
+  <script type="text/template" id="${template_name}-tpl">
+      <%static:include path="discovery/${template_name}.underscore" />
+  </script>
+  % endfor
+  <%static:require_module module_name="js/discovery/discovery_factory" class_name="DiscoveryFactory">
+    DiscoveryFactory(
+      ${course_discovery_meanings | n, dump_js_escaped_json},
+      getParameterByName('search_query'),
+      "${user_language | n, js_escaped_string}",
+      "${user_timezone | n, js_escaped_string}"
+    );
+  </%static:require_module>
+  <script src="${static.url('js/courses.js')}"></script>
+</%block>
+% endif
+
+<%block name="pagetitle">${_("Courses")}</%block>
+
+<main id="main" aria-label="Content" tabindex="-1">
+    <section class="find-courses">
+      <section class="courses-container">
+        %if follow_up_courses:
+        <button onclick="prerequisitsHandler()" class="button postfix prerequisits-button" id="study-next-btn">
+            What to study next?
+        </button>
+        % endif
+        % if course_discovery_enabled:
+        <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context all-courses">
+          <div id="discovery-message" class="search-status-label"></div>
+          <form class="wrapper-search-input">
+            <label for="discovery-input" class="sr">${_('Search for a course')}</label>
+            <input id="discovery-input" class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
+            <button type="submit" class="button postfix discovery-submit" title="${_('Search')}">
+              <span class="icon fa fa-search" aria-hidden="true"></span>
+              <div aria-live="polite" aria-relevant="all">
+                <div id="loading-indicator" class="loading-spinner hidden">
+                  <span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
+                  <span class="sr">${_('Loading')}</span>
+                </div>
+              </div>
+            </button>
+          </form>
+        </div>
+
+        <div id="filter-bar" class="filters hide-phone is-collapsed">
+        </div>
+        % endif
+
+        <div class="courses${'' if course_discovery_enabled else ' no-course-discovery'} all-courses" role="region" aria-label="${_('List of Courses')}">
+          <ul class="courses-listing courses-list">
+            %for course in courses:
+            <li class="courses-listing-item">
+              <%include file="../course.html" args="course=course" />
+            </li>
+            %endfor
+          </ul>
+        </div>
+
+        <div class="courses no-course-discovery follow-up-courses hidden" role="region" aria-label="${_('List of Courses')}">
+          <ul class="courses-listing courses-list">
+            %for course in follow_up_courses:
+            <li class="courses-listing-item">
+              <%include file="../course.html" args="course=course" />
+            </li>
+            %endfor
+          </ul>
+        </div>
+
+
+        % if course_discovery_enabled:
+        <aside aria-label="${_('Refine Your Search')}" class="search-facets phone-menu all-courses">
+          <h2 class="header-search-facets">${_('Refine Your Search')}</h2>
+          <section class="search-facets-lists">
+          </section>
+        </aside>
+        % endif
+
+      </section>
+    </section>
+</main>