From d4e93fc655f4036c5be79cb2f9496b1658a09246 Mon Sep 17 00:00:00 2001 From: Harry Rein Date: Wed, 25 Oct 2017 10:12:10 -0400 Subject: [PATCH] Course home page styling with bootstrap. Updates the new bootstrap course home page to match the old course home page. --- .../test/acceptance/pages/lms/course_home.py | 2 +- lms/static/sass/_header.scss | 3 +- lms/static/sass/bootstrap/_layouts.scss | 13 +++-- lms/static/sass/bootstrap/_legacy.scss | 2 +- .../course/layout/_courseware_preview.scss | 3 +- .../sass/features/_course-experience.scss | 13 +++-- lms/static/sass/features/_course-search.scss | 2 + lms/static/sass/features/_course-sock.scss | 21 ++------ .../features/_course-upgrade-message.scss | 51 ++++++++++++++++--- .../course-home-fragment.html | 8 +-- .../tests/views/test_course_home.py | 2 +- .../views/course_home_messages.py | 2 +- .../course_search/course-search-fragment.html | 2 +- 13 files changed, 84 insertions(+), 40 deletions(-) diff --git a/common/test/acceptance/pages/lms/course_home.py b/common/test/acceptance/pages/lms/course_home.py index 6271188040..30ebde8ce4 100644 --- a/common/test/acceptance/pages/lms/course_home.py +++ b/common/test/acceptance/pages/lms/course_home.py @@ -69,7 +69,7 @@ class CourseHomePage(CoursePage): Search within a class for a particular term. """ self.q(css='.search-form > .search-input').fill(search_term) - self.q(css='.search-form > .search-button').click() + self.q(css='.search-form .search-button').click() return CourseSearchResultsPage(self.browser, self.course_id) diff --git a/lms/static/sass/_header.scss b/lms/static/sass/_header.scss index 68bfd50fee..70e46d827d 100644 --- a/lms/static/sass/_header.scss +++ b/lms/static/sass/_header.scss @@ -39,7 +39,7 @@ .course-header { @include float(left); - @include margin($baseline, 0, 0, $baseline); + @include margin($baseline*1.25, 0, 0, $baseline); font-size: $font-size-lg; color: theme-color("dark"); @@ -319,6 +319,7 @@ .mobile-nav-link { position: static; transform: none; + padding: 0; a { font-size: $font-size-base; diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss index 428933346a..68fb30575d 100644 --- a/lms/static/sass/bootstrap/_layouts.scss +++ b/lms/static/sass/bootstrap/_layouts.scss @@ -45,21 +45,28 @@ padding: 20px; .page-header-search { - @include media-breakpoint-up(md) { - margin-right: $baseline; - } + @include margin-right($baseline); + + flex-grow: 1; .search-form { display: flex; } } + .form-actions { + @include media-breakpoint-down(xs) { + margin-top: $baseline/2; + } + } + .page-header-main { flex-grow: 1; // This column should consume all the available space } .page-header-secondary { display: flex; + flex-wrap: wrap; @include media-breakpoint-up(md) { margin-left: $baseline; diff --git a/lms/static/sass/bootstrap/_legacy.scss b/lms/static/sass/bootstrap/_legacy.scss index 7cdb7b7a45..7275c6bbbd 100644 --- a/lms/static/sass/bootstrap/_legacy.scss +++ b/lms/static/sass/bootstrap/_legacy.scss @@ -64,7 +64,7 @@ $lms-inactive-color: theme-color("disabled") !default; $success-color: theme-color("success") !default; $success-color-hover: theme-color("success") !default; $lms-hero-color: #005e90 !default; -$lms-purchase-color: theme-color("success") !default; +$lms-purchase-color: rgba(0, 155, 0, 1) !default; $border-color-2: $gray-400 !default; $link-hover: #065683 !default; // wcag2a compliant diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss index 4f2e932c97..4a7fecdb70 100644 --- a/lms/static/sass/course/layout/_courseware_preview.scss +++ b/lms/static/sass/course/layout/_courseware_preview.scss @@ -3,7 +3,7 @@ margin: 0 auto 0; padding: ($baseline*0.75); - background-color: $lms-preview-menu-color; + background-color: theme-color("primary"); box-sizing: border-box; @media print { @@ -31,6 +31,7 @@ display: inline-block; margin-bottom: 0; vertical-align: middle; + color: theme-color("inverse"); } .action-preview-select { diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss index 5d6eb8f714..56ba226a23 100644 --- a/lms/static/sass/features/_course-experience.scss +++ b/lms/static/sass/features/_course-experience.scss @@ -117,7 +117,7 @@ .goal-option { text-decoration: none; - font-size: font-size(x-small); + font-size: $font-size-base; padding: $baseline/2; margin: $baseline/4 $baseline/4 0; flex-grow: 1; @@ -213,12 +213,12 @@ @include float(left); border: 1px solid $lms-border-color; - padding: $baseline*0.75 $baseline*0.75 $baseline*0.25; + padding: $baseline*0.75 $baseline*0.75 $baseline*0.5; border-radius: 5px; position: relative; width: 100%; cursor: pointer; - margin-bottom: $baseline/2; + margin-bottom: $baseline; &.hidden { display: none; @@ -245,8 +245,8 @@ .current-goal-container { .title { + @include margin($baseline/5, $baseline*0.4, 0, 0); @include float(left); - @include margin-right($baseline/4); } .title-label { @@ -324,6 +324,7 @@ list-style-type: none; border: 1px solid transparent; border-radius: 3px; + margin-bottom: $baseline/4; a.outline-item { display: flex; @@ -369,6 +370,10 @@ &:hover { border: 1px solid $lms-active-color; } + + &:last-child { + margin-bottom: 0; + } } &:last-child { diff --git a/lms/static/sass/features/_course-search.scss b/lms/static/sass/features/_course-search.scss index f09987201b..2f1b28ffdc 100644 --- a/lms/static/sass/features/_course-search.scss +++ b/lms/static/sass/features/_course-search.scss @@ -1,6 +1,8 @@ // Styles for course search results .search-results { + flex-grow: 1; + .search-result-list { list-style: none; margin: 0; diff --git a/lms/static/sass/features/_course-sock.scss b/lms/static/sass/features/_course-sock.scss index d83eb7d953..6620917e49 100644 --- a/lms/static/sass/features/_course-sock.scss +++ b/lms/static/sass/features/_course-sock.scss @@ -24,29 +24,15 @@ box-shadow: none; -webkit-transition: background-color 0.5s; transition: background-color 0.5s; + cursor: pointer; - &.active { + &.active, + &:hover { color: theme-color("success"); background-color: theme-color("inverse"); border-color: theme-color("success"); background-image: none; box-shadow: none; - - &:hover { - color: theme-color("inverse"); - background-color: $success-color-hover; - border-color: $success-color-hover; - background-image: none; - box-shadow: none; - } - } - - &:hover { - color: theme-color("inverse"); - background-color: $success-color-hover; - border-color: $success-color-hover; - background-image: none; - box-shadow: none; } } @@ -113,6 +99,7 @@ right: $baseline; background-color: theme-color("success"); border-color: theme-color("success"); + color: theme-color("inverse"); background-image: none; box-shadow: none; diff --git a/lms/static/sass/features/_course-upgrade-message.scss b/lms/static/sass/features/_course-upgrade-message.scss index 6669a519f5..24551e889b 100644 --- a/lms/static/sass/features/_course-upgrade-message.scss +++ b/lms/static/sass/features/_course-upgrade-message.scss @@ -25,8 +25,9 @@ // Message copy .vc-title { font-size: 1.25rem; - font-weight: 700; + font-weight: $font-weight-light; margin-bottom: 1rem; + width: calc(100% - 70px); } .vc-selling-points { @@ -55,11 +56,32 @@ } } + // Upgrade button + .btn-upgrade { + color: theme-color("inverse"); + background-color: $lms-purchase-color; + font-size: $font-size-base; + -webkit-transition: $btn-transition; + transition: $btn-transition; + + &:hover { + background-color: theme-color("success"); + } + } + // Show/hide button .vc-toggle { - @include float(right); + @include right($baseline/2); + top: $baseline/2; + position: absolute; color: theme-color("inverse"); + + &:hover { + cursor: pointer; + text-decoration: none; + color: theme-color("light"); + } } // Cert image @@ -80,30 +102,47 @@ // Collapsed upgrade message .vc-message.polite { + @include padding($baseline/2, 0, $baseline/2, $baseline); padding-top: $baseline/2; padding-bottom: $baseline/2; min-height: 46px; display: flex; - flex-flow: row wrap; align-items: center; .vc-title { - margin: 0; - @include margin-right(auto); + + margin: 0; + flex-grow: 1; } .vc-cta { - @include margin-right(1rem); + flex-grow: 1; } .vc-toggle { + @include right(0); + + margin: 0 $baseline/2; order: 99; + position: relative; + white-space: nowrap; + width: $baseline*6; + top: 0; } .vc-fade:not(.vc-polite-only) { display: none; } + + @include media-breakpoint-down(sm) { + flex-flow: row wrap; + + .vc-title { + width: auto; + margin-bottom: $baseline/2; + } + } } @media (max-width: $grid-breakpoints-sm) { diff --git a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html index 72abb06a50..3a87bca28e 100644 --- a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html +++ b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html @@ -28,7 +28,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
-
% endif @@ -81,7 +83,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
- ${_("Upgrade ({price})").format(price=upgrade_price)} diff --git a/openedx/features/course_experience/tests/views/test_course_home.py b/openedx/features/course_experience/tests/views/test_course_home.py index 9e46e235d6..3954cc21a6 100644 --- a/openedx/features/course_experience/tests/views/test_course_home.py +++ b/openedx/features/course_experience/tests/views/test_course_home.py @@ -517,7 +517,7 @@ class CourseHomeFragmentViewTests(ModuleStoreTestCase): response = self.client.get(self.url) self.assertIn('vc-message', response.content) url = EcommerceService().get_checkout_page_url(self.verified_mode.sku) - self.assertIn(''.format(price=self.verified_mode.min_price), response.content) diff --git a/openedx/features/course_experience/views/course_home_messages.py b/openedx/features/course_experience/views/course_home_messages.py index dbe74db2de..4e0b3064f7 100644 --- a/openedx/features/course_experience/views/course_home_messages.py +++ b/openedx/features/course_experience/views/course_home_messages.py @@ -172,7 +172,7 @@ def _register_course_goal_message(request, course): '{initial_tag}{goal_text}{closing_tag}' ).format( initial_tag=HTML( - '