BreadCrumbs for course-detail page.

Ecom-6074

course_discovery/apps/publisher/tests/test_views.py

@@ -811,6 +811,7 @@ class CourseRunDetailTests(TestCase):
         page_url = reverse('publisher:publisher_course_run_detail', args=[course_run.id])
         response = self.client.get(page_url)
         self.assertEqual(response.status_code, 200)
+        self._assert_breadcrumbs(response, course_run)
 
     def test_page_with_invalid_id(self):
         """ Verify that invalid course run id return 404. """
@@ -839,6 +840,7 @@ class CourseRunDetailTests(TestCase):
         self._assert_cat(response)
         self._assert_drupal(response)
         self._assert_subjects(response)
+        self._assert_breadcrumbs(response, self.course_run)
 
     def _assert_credits_seats(self, response, seat):
         """ Helper method to test to all credit seats. """
@@ -954,6 +956,7 @@ class CourseRunDetailTests(TestCase):
         self._assert_subjects(response)
         self.assertContains(response, 'Total Comments 1')
         self.assertContains(response, comment.comment)
+        self._assert_breadcrumbs(response, self.course_run)
 
     def test_get_course_return_none(self):
         """ Verify that `PublisherPermissionMixin.get_course` return none
@@ -1043,6 +1046,20 @@ class CourseRunDetailTests(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertEqual(response.context['can_edit'], can_edit)
 
+    def _assert_breadcrumbs(self, response, course_run):
+        """ Assert breadcrumbs are present in the response. """
+        self.assertContains(response, '<li class="breadcrumb-item ">')
+        self.assertContains(response, '<a href="/publisher/courses/">Courses</a>')
+        page_url = reverse('publisher:publisher_course_detail', kwargs={'pk': course_run.course.id})
+        self.assertContains(response, '<a href="{url}">{slug}</a>'.format(url=page_url, slug=course_run.course.title))
+        self.assertContains(response, '<li class="breadcrumb-item active">')
+        self.assertContains(
+            response, '{type}: {start}'.format(
+                type=course_run.get_pacing_type_display(),
+                start=course_run.start.strftime("%B %d, %Y")
+            )
+        )
+
     def _create_user_and_login(self, permission):
         """ Create user and login, also assign view permission for course
          and return the user.

course_discovery/apps/publisher/views.py

@@ -145,6 +145,21 @@ class CourseRunDetailView(mixins.LoginRequiredMixin, mixins.PublisherPermissionM
             context['role_widgets'] = self.get_role_widgets_data(course_roles)
             context['user_list'] = get_internal_users()
 
+        context['breadcrumbs'] = [
+            {
+                'url': reverse('publisher:publisher_courses'), 'slug': 'Courses'
+            },
+            {
+                'url': reverse('publisher:publisher_course_detail', kwargs={'pk': course_run.course.id}),
+                'slug': course_run.course.title
+            },
+            {
+                'url': None,
+                'slug': '{type}: {start}'.format(
+                    type=course_run.get_pacing_type_display(), start=course_run.start.strftime("%B %d, %Y")
+                )
+            }
+        ]
         return context
 
 
@@ -270,6 +285,16 @@ class CourseDetailView(mixins.LoginRequiredMixin, mixins.PublisherPermissionMixi
             self.request.user, self.object, OrganizationExtension.EDIT_COURSE
         )
 
+        context['breadcrumbs'] = [
+            {
+                'url': reverse('publisher:publisher_courses'), 'slug': 'Courses'
+            },
+            {
+                'url': None,
+                'slug': self.object.title
+            }
+        ]
+
         return context
 
 

course_discovery/static/sass/publisher/publisher.scss

@@ -541,7 +541,7 @@ select {
 .breadcrumb {
   @include padding-left(0);
   @include padding(8px, 15px, 8px, 15px);
-  @include margin(0, 0, 1.25rem, 0);
+  @include margin(0, 0, 0, 0);
   list-style: none;
   background: white;
   border-radius: 3px;
@@ -561,12 +561,9 @@ select {
 
     + li:before {
       @include padding(0px, 5px, 0px, 5px);
-      content: " / ";
-      color: #ccc;
-    }
-
-    &.active {
-      color: #777777;
+      content: "\f054";
+      color: #666;
+      font-family: fontawesome;
     }
   }
 }

course_discovery/templates/publisher/_breadcrumbs.html

+{% if breadcrumbs %}
+    <ol class="breadcrumb">
+      {% for breadcrumb in breadcrumbs %}
+        <li class="breadcrumb-item {% if forloop.last %}active{% endif %}">
+            {% if forloop.last %}
+                {{ breadcrumb.slug }}
+            {% else %}
+                <a href="{{ breadcrumb.url }}">{{ breadcrumb.slug }}</a>
+            {% endif %}
+        </li>
+      {% endfor %}
+    </ol>
+{% endif %}

course_discovery/templates/publisher/base.html

@@ -35,6 +35,9 @@
             </main>
 
             <aside class="layout-col layout-col-b border-left layout-col-container">
+                {% block breadcrumbs %}
+                    {% include 'publisher/_breadcrumbs.html' %}
+                {% endblock %}
                 {% block page_content %}{% endblock %}
             </aside>
 

course_discovery/templates/publisher/view_course_form.html

@@ -5,11 +5,7 @@
 {% endblock title %}
 
 {% block page_content %}
-    {% include 'alert_messages.html' %}
-
-<div class="course-breadcrumb">
-  <a href="{% url 'publisher:publisher_courses' %}">{% trans "Courses" %}</a> > <span>{{ object.title }}</span>
-</div>
+{% include 'alert_messages.html' %}
 
 <div class="approval-widget">
     {% if can_edit %}