Dashboard styling cleanup/changes, including:

- reversing the positions of the sidebar and course listing
- html for new social icons (not currently wired up)
- new actions dropdown for unenrollment and email settings
- partial reorganization of dashboard.scss styles
- text fix for unenrollment
- added missing endif, p/hgroup closures
- reverted la.course-item
- removed extra operator
- fixed broken bok choy test

common/test/acceptance/pages/lms/dashboard.py

@@ -46,10 +46,10 @@ class DashboardPage(PageObject):
         """
         def _get_course_name(el):
             # The first component in the link text is the course number
-            _, course_name = el.text.split(' ', 1)
+            course_name = el.text
             return course_name
 
-        return self.q(css='section.info > hgroup > h3 > a').map(_get_course_name).results
+        return self.q(css='h3.course-title > a').map(_get_course_name).results
 
     @property
     def full_name(self):

lms/static/js/dashboard/legacy.js

@@ -41,6 +41,7 @@
         }
 
         $('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
+        $('.action-more').bind('click', toggleCourseActionsDropdown);
 
         // Track clicks of the upgrade button. The `trackLink` method is a helper that makes
         // a `track` call whenever a bound link is clicked. Usually the page would change before
@@ -95,6 +96,17 @@
             });
         }
 
+        function toggleCourseActionsDropdown(event) {
+            var dropdown = $(event.target).closest('.action-more').find('.actions-dropdown-list')
+
+            event.preventDefault();
+
+            $(this).toggleClass('is-visible');
+
+            // add BI event here
+
+        }
+
         $("#failed-verification-button-dismiss").click(function() {
             $.ajax({
                 url: urls.verifyToggleBannerFailedOff,

lms/static/sass/_shame.scss

@@ -258,13 +258,6 @@ footer .references {
 
 // ====================
 
-// poor cascade made worse by CSS splitting requires us to redefine the dashboard views' visual top padding
-.dashboard {
-  padding-top: 60px;
-}
-
-// ====================
-
 // poor definition/scope on ul elements inside .vert-mod element in courseware - override needed for inline discussion editing
 .course-content .discussion-post.edit-post-form .topic-menu {
   padding-left: 0;

lms/static/sass/base/_base.scss

@@ -128,7 +128,7 @@ a:focus {
   @include clearfix();
   @include box-sizing(border-box);
   margin: 0 auto 0;
-  padding: 0 ($baseline*1.5);
+  padding: ($baseline*2) 0;
   max-width: grid-width(12);
   min-width: 760px;
   width: flex-grid(12);

lms/static/sass/base/_extends.scss

@@ -120,3 +120,11 @@
   padding: ($baseline/5) ($baseline/2);
   color: shade($warning-color, 45%);
 }
+
+// extends - content - text overflow by ellipsis
+%cont-truncated {
+  @include box-sizing(border-box);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

lms/static/sass/elements/_typography.scss

@@ -41,6 +41,7 @@
 }
 
 %t-title3 {
+  @extend %t-title;
   @include font-size(36);
   @include line-height(36);
 }

lms/templates/dashboard.html

@@ -74,7 +74,56 @@
 </div>
 
 <section class="container dashboard" id="dashboard-main">
+  <section class="my-courses" id="my-courses">
+    <header class="wrapper-header-courses">
+      <h2 class="header-courses">${_("Current Courses")}</h2>
+    </header>
+
+    % if len(course_enrollment_pairs) > 0:
+      <ul class="listing-courses">
+        % for course, enrollment in course_enrollment_pairs:
+            <% show_courseware_link = (course.id in show_courseware_links_for) %>
+            <% cert_status = cert_statuses.get(course.id) %>
+            <% show_email_settings = (course.id in show_email_settings_for) %>
+            <% course_mode_info = all_course_modes.get(course.id) %>
+            <% show_refund_option = (course.id in show_refund_option_for) %>
+            <% is_paid_course = (course.id in enrolled_courses_either_paid) %>
+            <% is_course_blocked = (course.id in block_courses) %>
+            <% course_verification_status = verification_status_by_course.get(course.id, {}) %>
+            <% course_requirements = courses_requirements_not_met.get(course.id) %>
+            <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements" />
+      % endfor
+
+      </ul>
+    % else:
+      <section class="empty-dashboard-message">
+        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+          <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
+          <a href="${marketing_link('COURSES')}">
+            ${_("Find courses now!")}
+          </a>
+        % else:
+          <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
+        %endif
+      </section>
+    % endif
+
+    % if staff_access and len(errored_courses) > 0:
+      <div id="course-errors">
+        <h2>${_("Course-loading errors")}</h2>
 
+      % for course_dir, errors in errored_courses.items():
+         <h3>${course_dir | h}</h3>
+             <ul>
+           % for (msg, err) in errors:
+               <li>${msg}
+                 <ul><li><pre>${err}</pre></li></ul>
+               </li>
+           % endfor
+             </ul>
+      % endfor
+    % endif
+  </section>
   <section class="profile-sidebar">
     <header class="profile">
       <h2><span class="sr">${_("Username")}: </span><span class="user-name">${ user.username }</span></h2>
@@ -171,6 +220,7 @@
 
       </ul>
     </section>
+<<<<<<< HEAD
 
   </section>
 
@@ -223,6 +273,8 @@
              </ul>
       % endfor
     % endif
+=======
+>>>>>>> dashboard styling cleanup changes, including reversing the positions of the sidebar and course listing, html for new social icons (not currently wired up), new actions dropdown for unenrollment and email settings, partial reorganization of dashboard.scss styles as well
   </section>
 </section>