Skip to content

E
edx-platform
Commit d4e93fc6 by Harry Rein
Options

Course home page styling with bootstrap. 

Updates the new bootstrap course home page to match the old course home page.
parent c3216acd
Showing with 84 additions and 40 deletions
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)
......
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;
......
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;
......
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
......
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 {
......
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 {
......
lms/static/sass/features/_course-search.scss
// Styles for course search results
.search-results {
flex-grow: 1;
.search-result-list {
list-style: none;
margin: 0;
......
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;
......
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) {
......
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
<div class="page-header-secondary">
% if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
<div class="page-header-search">
<form class="search-form" role="search" action="${reverse('openedx.course_search.course_search_results', args=[course_key])}">
<form class="search-form input-group" role="search" action="${reverse('openedx.course_search.course_search_results', args=[course_key])}">
<label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
<input
class="field-input input-text search-input form-control"
......@@ -37,7 +37,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
id="search"
placeholder="${_('Search the course')}"
/>
<button class="btn btn-outline-primary search-button" type="submit">${_('Search')}</button>
<span class="input-group-btn">
<button class="btn btn-outline-primary search-button" type="submit">${_('Search')}</button>
</span>
</form>
</div>
% endif
......@@ -81,7 +83,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
</ul>
<div class="vc-cta vc-fade vc-polite-only">
<a class="btn-upgrade"
<a class="btn btn-upgrade"
href="${ upgrade_url }"
data-creative="hero_matthew_smith"
data-position="hero">${_("Upgrade ({price})").format(price=upgrade_price)}</a>
......
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('<a class="btn-upgrade"', response.content)
self.assertIn('<a class="btn btn-upgrade"', response.content)
self.assertIn(url, response.content)
self.assertIn('Upgrade (${price})</a>'.format(price=self.verified_mode.min_price), response.content)
......
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(
'<button tabindex="0" aria-label="{aria_label_choice}" class="goal-option btn" '
'<button tabindex="0" aria-label="{aria_label_choice}" class="goal-option btn-outline-primary" '
'data-choice="{goal_key}">'
).format(
goal_key=goal_key,
......
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">
<div class="course-view pzge-content-container" id="course-container">
<div class="course-view page-content-container" id="course-container">
<header class="page-header has-secondary">
<div class="page-header-main">
<nav aria-label="${_('Search Results')}" class="sr-is-focusable" tabindex="-1">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment