From 374cdb0a3d63ab290fdba2c041ec31428b5107ec Mon Sep 17 00:00:00 2001 From: Andy Armstrong Date: Wed, 27 Sep 2017 20:33:27 -0400 Subject: [PATCH] Convert course home page to Bootstrap LEARNER-1694 Fix a11y failure Fix header styling Fix layout issues Further layout fixes --- .../edx-pattern-library-shims/_buttons.scss | 11 +- lms/djangoapps/courseware/testutils.py | 2 +- lms/djangoapps/courseware/views/views.py | 15 +- lms/static/sass/_build-course.scss | 7 + lms/static/sass/_build-lms-v1.scss | 6 + lms/static/sass/_build-lms-v2.scss | 6 + lms/static/sass/_developer.scss | 61 ------ lms/static/sass/bootstrap/_footer.scss | 4 +- lms/static/sass/bootstrap/_header.scss | 13 ++ lms/static/sass/bootstrap/_layouts.scss | 110 ++++++---- lms/static/sass/bootstrap/_legacy.scss | 74 +++++++ lms/static/sass/bootstrap/_navigation.scss | 26 ++- lms/static/sass/bootstrap/_variables.scss | 6 - lms/static/sass/bootstrap/lms-main.scss | 13 +- .../course/layout/_courseware_preview.scss | 60 ++++-- lms/static/sass/elements-v2/_buttons.scss | 4 + .../sass/features/_course-experience.scss | 57 ++++-- lms/static/sass/features/_course-sock.scss | 26 ++- .../features/_course-upgrade-message.scss | 28 +-- lms/static/sass/partials/base/_variables.scss | 3 +- lms/static/sass/shared-v2/_components.scss | 11 - lms/static/sass/shared-v2/_layouts.scss | 112 +++++----- lms/static/sass/shared-v2/_variables.scss | 3 + .../courseware/course_navigation.html | 54 +++-- lms/templates/courseware/tab-view-v2.html | 32 +++ lms/templates/courseware/tab-view.html | 12 +- lms/templates/footer.html | 4 +- lms/templates/header/brand.html | 28 +++ .../bootstrap/navbar-authenticated.html | 83 -------- .../bootstrap/navbar-not-authenticated.html | 61 ------ lms/templates/navigation/navigation.html | 6 +- lms/templates/preview_menu.html | 4 +- lms/templates/user_dropdown.html | 52 +++-- .../reference/bootstrap/course-skeleton.html | 96 ++++----- .../ux/reference/bootstrap/unit-page.html | 2 +- .../course_bookmarks/course-bookmarks.html | 2 +- .../features/course_experience/__init__.py | 3 + .../fixtures/course-home-fragment.html | 8 +- .../course-home-fragment.html | 192 +++++++++--------- .../course-messages-fragment.html | 2 +- .../course-reviews-fragment.html | 4 +- .../course-sock-fragment.html | 2 +- .../course-updates-fragment.html | 2 +- .../course_experience/views/course_home.py | 5 +- .../course_experience/views/course_reviews.py | 6 +- .../course_experience/views/course_updates.py | 6 +- .../course_search/course-search-fragment.html | 2 +- .../learner-achievements-fragment.html | 1 - package.json | 2 +- pavelib/assets.py | 2 +- pavelib/paver_tests/test_assets.py | 2 +- themes/edx.org/lms/templates/header.html | 147 ++++++-------- .../sass/partials/bootstrap/_theme.scss | 4 + 53 files changed, 795 insertions(+), 689 deletions(-) create mode 100644 lms/static/sass/bootstrap/_header.scss create mode 100644 lms/static/sass/bootstrap/_legacy.scss create mode 100644 lms/templates/courseware/tab-view-v2.html create mode 100644 lms/templates/header/brand.html delete mode 100644 lms/templates/navigation/bootstrap/navbar-authenticated.html delete mode 100644 lms/templates/navigation/bootstrap/navbar-not-authenticated.html diff --git a/common/static/sass/edx-pattern-library-shims/_buttons.scss b/common/static/sass/edx-pattern-library-shims/_buttons.scss index d0eaf87b92..e17bdc857c 100644 --- a/common/static/sass/edx-pattern-library-shims/_buttons.scss +++ b/common/static/sass/edx-pattern-library-shims/_buttons.scss @@ -86,9 +86,9 @@ } // ---------------------------- -// #BRAND +// #PRIMARY // ---------------------------- -.btn-brand { +.btn-primary { @extend %btn-shims; border-color: $btn-brand-border-color; @@ -150,3 +150,10 @@ color: $btn-upgrade-color; } } + +// ---------------------------- +// #BRAND +// ---------------------------- +.btn-brand { + @extend .btn-primary; +} diff --git a/lms/djangoapps/courseware/testutils.py b/lms/djangoapps/courseware/testutils.py index 91ba8d813a..a9b60f2ed6 100644 --- a/lms/djangoapps/courseware/testutils.py +++ b/lms/djangoapps/courseware/testutils.py @@ -32,7 +32,7 @@ class RenderXBlockTestMixin(object): ' diff --git a/lms/templates/user_dropdown.html b/lms/templates/user_dropdown.html index 80bd8bdea6..66bc256ea0 100644 --- a/lms/templates/user_dropdown.html +++ b/lms/templates/user_dropdown.html @@ -5,6 +5,8 @@ ## This template should not use the target student's details when masquerading, see TNL-4895 <% self.real_user = getattr(user, 'real_user', user) +username = self.real_user.username +profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium'] %> <%! @@ -14,34 +16,32 @@ from django.utils.translation import ugettext as _ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user %> % if uses_bootstrap: -
  • - - ${_("Dashboard for:")} - <% profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium'] %> - - -
    • -
  • - <% username = self.real_user.username %> - - -
    • -
  • ${_("Dashboard")}
    • -
  • ${_("Account")}
    • -
  • ${_("Sign Out")}
    • +
    +
    + + ${_("Dashboard for:")} + ${username} + +
    + + +
    +
    +
    + % elif uses_pattern_library:
    ${_("Dashboard for:")} - <% - username = self.real_user.username - profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium'] - %> - + ${username} ${username}
    @@ -63,10 +63,6 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
  • ${_("Dashboard for:")} - <% - username = self.real_user.username - profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium'] - %>
    ${username}
     diff --git a/lms/templates/ux/reference/bootstrap/course-skeleton.html b/lms/templates/ux/reference/bootstrap/course-skeleton.html index 4230356d0e..095ff23487 100644 --- a/lms/templates/ux/reference/bootstrap/course-skeleton.html +++ b/lms/templates/ux/reference/bootstrap/course-skeleton.html @@ -10,68 +10,70 @@ <%block name="bodyclass">course-skeleton +<%! +from django.utils.translation import ugettext as _ +%> + <%block name="content"> -
    • diff --git a/lms/templates/ux/reference/bootstrap/unit-page.html b/lms/templates/ux/reference/bootstrap/unit-page.html index 313198034e..73df0d1d7e 100644 --- a/lms/templates/ux/reference/bootstrap/unit-page.html +++ b/lms/templates/ux/reference/bootstrap/unit-page.html @@ -18,7 +18,7 @@ <%block name="content"> -
    diff --git a/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html b/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html index 6e881dd8b4..54d61b7ba0 100644 --- a/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html +++ b/openedx/features/course_experience/templates/course_experience/course-sock-fragment.html @@ -15,7 +15,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG style="display: none" %endif > -
    diff --git a/openedx/features/course_experience/templates/course_experience/course-updates-fragment.html b/openedx/features/course_experience/templates/course_experience/course-updates-fragment.html index 76926c3daa..7b7d2dfe57 100644 --- a/openedx/features/course_experience/templates/course_experience/course-updates-fragment.html +++ b/openedx/features/course_experience/templates/course_experience/course-updates-fragment.html @@ -11,7 +11,7 @@ from openedx.features.course_experience import course_home_page_title %> <%block name="content"> -
    +
    ## Breadcrumb navigation
    diff --git a/openedx/features/course_experience/views/course_home.py b/openedx/features/course_experience/views/course_home.py index 2729748e92..42e3c3cb21 100644 --- a/openedx/features/course_experience/views/course_home.py +++ b/openedx/features/course_experience/views/course_home.py @@ -27,7 +27,7 @@ from student.models import CourseEnrollment from util.views import ensure_valid_course_key from web_fragments.fragment import Fragment -from .. import LATEST_UPDATE_FLAG, SHOW_UPGRADE_MSG_ON_COURSE_HOME +from .. import LATEST_UPDATE_FLAG, SHOW_UPGRADE_MSG_ON_COURSE_HOME, USE_BOOTSTRAP_FLAG from ..utils import get_course_outline_block_tree from .course_dates import CourseDatesFragmentView from .course_home_messages import CourseHomeMessageFragmentView @@ -52,6 +52,9 @@ class CourseHomeView(CourseTabView): """ return super(CourseHomeView, self).get(request, course_id, 'courseware', **kwargs) + def uses_bootstrap(self, request, course): + return USE_BOOTSTRAP_FLAG.is_enabled(course.id) + def render_to_fragment(self, request, course=None, tab=None, **kwargs): course_id = unicode(course.id) home_fragment_view = CourseHomeFragmentView() diff --git a/openedx/features/course_experience/views/course_reviews.py b/openedx/features/course_experience/views/course_reviews.py index 08ac07fd88..5c552e06f8 100644 --- a/openedx/features/course_experience/views/course_reviews.py +++ b/openedx/features/course_experience/views/course_reviews.py @@ -16,12 +16,13 @@ from lms.djangoapps.courseware.views.views import CourseTabView from openedx.core.djangoapps.plugin_api.views import EdxFragmentView from openedx.features.course_experience import default_course_url_name +from .. import USE_BOOTSTRAP_FLAG + class CourseReviewsView(CourseTabView): """ The course reviews page. """ - @method_decorator(login_required) @method_decorator(cache_control(no_cache=True, no_store=True, must_revalidate=True)) def get(self, request, course_id, **kwargs): @@ -30,6 +31,9 @@ class CourseReviewsView(CourseTabView): """ return super(CourseReviewsView, self).get(request, course_id, 'courseware', **kwargs) + def uses_bootstrap(self, request, course): + return USE_BOOTSTRAP_FLAG.is_enabled(course.id) + def render_to_fragment(self, request, course=None, tab=None, **kwargs): course_id = unicode(course.id) reviews_fragment_view = CourseReviewsFragmentView() diff --git a/openedx/features/course_experience/views/course_updates.py b/openedx/features/course_experience/views/course_updates.py index b1a99256f0..2a1c965629 100644 --- a/openedx/features/course_experience/views/course_updates.py +++ b/openedx/features/course_experience/views/course_updates.py @@ -17,6 +17,8 @@ from lms.djangoapps.courseware.views.views import CourseTabView from openedx.core.djangoapps.plugin_api.views import EdxFragmentView from openedx.features.course_experience import default_course_url_name +from .. import USE_BOOTSTRAP_FLAG + STATUS_VISIBLE = 'visible' STATUS_DELETED = 'deleted' @@ -53,7 +55,6 @@ class CourseUpdatesView(CourseTabView): """ The course updates page. """ - @method_decorator(login_required) @method_decorator(cache_control(no_cache=True, no_store=True, must_revalidate=True)) def get(self, request, course_id, **kwargs): @@ -62,6 +63,9 @@ class CourseUpdatesView(CourseTabView): """ return super(CourseUpdatesView, self).get(request, course_id, 'courseware', **kwargs) + def uses_bootstrap(self, request, course): + return USE_BOOTSTRAP_FLAG.is_enabled(course.id) + def render_to_fragment(self, request, course=None, tab=None, **kwargs): course_id = unicode(course.id) updates_fragment_view = CourseUpdatesFragmentView() diff --git a/openedx/features/course_search/templates/course_search/course-search-fragment.html b/openedx/features/course_search/templates/course_search/course-search-fragment.html index b211f2d97f..99467cc757 100644 --- a/openedx/features/course_search/templates/course_search/course-search-fragment.html +++ b/openedx/features/course_search/templates/course_search/course-search-fragment.html @@ -19,7 +19,7 @@ from openedx.features.course_experience import course_home_page_title %> <%block name="content"> -
    +
    % else:
    % endif % else:
    -

    - - - % if course and not disable_courseware_header: -
    - ${course.display_org_with_default}: - ${course.display_number_with_default} - ${course.display_name_with_default} -
    - % endif -

    + <%include file="/header/brand.html" /> % if user.is_authenticated(): % if not course or disable_courseware_header: @@ -240,26 +217,26 @@ site_status_msg = get_site_status_msg(course_id) % else: % endif diff --git a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss index 3c857145f1..8ecfca1692 100644 --- a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss +++ b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss @@ -25,3 +25,7 @@ $theme-colors: map-merge(( light: $gray-100, dark: $gray-800 ), $theme-colors); + +// Note: for some reason this doesn't obey the primary color as defined above. +// This shouldn't be necessary but it appears to be. +$link-color: $red;