Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Course home page styling with bootstrap.

Browse Source 
Updates the new bootstrap course home page to match the old course home page.
This commit is contained in:
Harry Rein
2017-10-25 10:12:10 -04:00
parent c3216acd55
commit d4e93fc655
13 changed files with 84 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/test/acceptance/pages/lms/course_home.py
View File

@@ -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)

3
lms/static/sass/_header.scss
View File

@@ -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;

13
lms/static/sass/bootstrap/_layouts.scss
View File

@@ -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;

2
lms/static/sass/bootstrap/_legacy.scss
View File

@@ -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

3
lms/static/sass/course/layout/_courseware_preview.scss
View File

@@ -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 {

13
lms/static/sass/features/_course-experience.scss
View File

@@ -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 {

2
lms/static/sass/features/_course-search.scss
View File

@@ -1,6 +1,8 @@
// Styles for course search results
.search-results {
flex-grow: 1;
.search-result-list {
list-style: none;
margin: 0;

21
lms/static/sass/features/_course-sock.scss
View File

@@ -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;

51
lms/static/sass/features/_course-upgrade-message.scss
View File

@@ -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) {

8
openedx/features/course_experience/templates/course_experience/course-home-fragment.html
View File

@@ -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>

2
openedx/features/course_experience/tests/views/test_course_home.py
View File

@@ -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)

2
openedx/features/course_experience/views/course_home_messages.py
View File

@@ -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,

2
openedx/features/course_search/templates/course_search/course-search-fragment.html
View File

@@ -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">