Skip to content

E
edx-platform
Commit 5ae2bee1 by Andy Armstrong Committed by GitHub
Options

Merge pull request #16119 from edx/hackathon/bootstrap-courseware 

Convert course home page to Bootstrap
parents c0d74f19 374cdb0a
Showing with 541 additions and 412 deletions
common/static/sass/edx-pattern-library-shims/_buttons.scss
...@@ -86,9 +86,9 @@ ...@@ -86,9 +86,9 @@
} }
// ---------------------------- // ----------------------------
// #BRAND // #PRIMARY
// ---------------------------- // ----------------------------
.btn-brand { .btn-primary {
@extend %btn-shims; @extend %btn-shims;
border-color: $btn-brand-border-color; border-color: $btn-brand-border-color;
...@@ -150,3 +150,10 @@ ...@@ -150,3 +150,10 @@
color: $btn-upgrade-color; color: $btn-upgrade-color;
} }
} }
// ----------------------------
// #BRAND
// ----------------------------
.btn-brand {
@extend .btn-primary;
}
lms/djangoapps/courseware/testutils.py
...@@ -32,7 +32,7 @@ class RenderXBlockTestMixin(object): ...@@ -32,7 +32,7 @@ class RenderXBlockTestMixin(object):
'<ol class="tabs course-tabs"', '<ol class="tabs course-tabs"',
'<footer id="footer-openedx"', '<footer id="footer-openedx"',
'<div class="window-wrap"', '<div class="window-wrap"',
'<div class="preview-menu"', '<div class="preview-menu container"',
'<div class="container"', '<div class="container"',
] ]
......
lms/djangoapps/courseware/views/views.py
...@@ -554,12 +554,19 @@ class CourseTabView(EdxFragmentView): ...@@ -554,12 +554,19 @@ class CourseTabView(EdxFragmentView):
log.exception("Error while rendering courseware-error page") log.exception("Error while rendering courseware-error page")
raise raise
def uses_bootstrap(self, request, course):
"""
Returns true if this view uses Bootstrap.
"""
return False
def create_page_context(self, request, course=None, tab=None, **kwargs): def create_page_context(self, request, course=None, tab=None, **kwargs):
""" """
Creates the context for the fragment's template. Creates the context for the fragment's template.
""" """
staff_access = has_access(request.user, 'staff', course) staff_access = has_access(request.user, 'staff', course)
supports_preview_menu = tab.get('supports_preview_menu', False) supports_preview_menu = tab.get('supports_preview_menu', False)
uses_bootstrap = self.uses_bootstrap(request, course)
if supports_preview_menu: if supports_preview_menu:
masquerade, masquerade_user = setup_masquerade(request, course.id, staff_access, reset_masquerade_data=True) masquerade, masquerade_user = setup_masquerade(request, course.id, staff_access, reset_masquerade_data=True)
request.user = masquerade_user request.user = masquerade_user
...@@ -578,7 +585,8 @@ class CourseTabView(EdxFragmentView): ...@@ -578,7 +585,8 @@ class CourseTabView(EdxFragmentView):
'staff_access': staff_access, 'staff_access': staff_access,
'masquerade': masquerade, 'masquerade': masquerade,
'supports_preview_menu': supports_preview_menu, 'supports_preview_menu': supports_preview_menu,
'uses_pattern_library': True, 'uses_bootstrap': uses_bootstrap,
'uses_pattern_library': not uses_bootstrap,
'disable_courseware_js': True, 'disable_courseware_js': True,
} }
context.update( context.update(
...@@ -603,7 +611,10 @@ class CourseTabView(EdxFragmentView): ...@@ -603,7 +611,10 @@ class CourseTabView(EdxFragmentView):
if not page_context: if not page_context:
page_context = self.create_page_context(request, course=course, tab=tab, **kwargs) page_context = self.create_page_context(request, course=course, tab=tab, **kwargs)
page_context['fragment'] = fragment page_context['fragment'] = fragment
if self.uses_bootstrap(request, course):
return render_to_response('courseware/tab-view.html', page_context) return render_to_response('courseware/tab-view.html', page_context)
else:
return render_to_response('courseware/tab-view-v2.html', page_context)
@ensure_csrf_cookie @ensure_csrf_cookie
......
lms/static/sass/_build-course.scss
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
// About: Sass compile for the LMS Courseware Elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the lms-course-*.scss files. // About: Sass compile for the LMS Courseware Elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the lms-course-*.scss files.
// Bootstrap support for use with shared partials
@import 'bootstrap/theme';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import "bootstrap/scss/mixins/breakpoints";
// Base
@import 'base/base'; @import 'base/base';
@import 'base/headings'; @import 'base/headings';
@import 'base/extends'; @import 'base/extends';
......
lms/static/sass/_build-lms-v1.scss
...@@ -3,6 +3,12 @@ ...@@ -3,6 +3,12 @@
// About: Sass compile for the LMS Elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the lms-main-*.scss files. // About: Sass compile for the LMS Elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the lms-main-*.scss files.
// Bootstrap support for use with shared partials
@import 'bootstrap/theme';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import "bootstrap/scss/mixins/breakpoints";
// base - assets // base - assets
@import 'base/font_face'; @import 'base/font_face';
@import 'base/extends'; @import 'base/extends';
......
lms/static/sass/_build-lms-v2.scss
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
// LMS: Shared Build Compile // LMS: Shared Build Compile
// Version 2 - introduces the Pattern Library // Version 2 - introduces the Pattern Library
// Bootstrap support for use with shared partials
@import 'bootstrap/theme';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import "bootstrap/scss/mixins/breakpoints";
// Configuration // Configuration
@import 'config'; @import 'config';
@import 'base/variables'; @import 'base/variables';
......
lms/static/sass/_developer.scss
...@@ -225,64 +225,3 @@ ...@@ -225,64 +225,3 @@
border: 0; border: 0;
} }
} }
// pfogg - ECOM-2604
// styling for date summary blocks on the course info page
.date-summary-container {
.date-summary {
@include clearfix;
padding: 10px;
@include border-left(3px solid $gray-l3);
.heading {
@extend %t-title7;
color: $gray-d2;
}
.description {
margin-top: $baseline/2;
margin-bottom: $baseline/2;
display: inline-block;
color: $gray-d1;
@extend %t-title8;
}
.date-summary-link {
@extend %t-title8;
font-weight: $font-semibold;
a {
color: $link-color;
font-weight: normal;
}
}
.date {
color: $gray-d1;
@extend %t-title9;
}
&-todays-date {
@include border-left(3px solid $blue);
.heading {
@extend %t-title8;
}
}
&-verified-upgrade-deadline {
@include border-left(3px solid $green);
}
&-verification-deadline-passed {
@include border-left(3px solid $red);
}
&-verification-deadline-retry {
@include border-left(3px solid $red);
}
&-verification-deadline-upcoming {
@include border-left(3px solid $orange);
}
}
}
lms/static/sass/bootstrap/_footer.scss
...@@ -43,12 +43,12 @@ ...@@ -43,12 +43,12 @@
} }
} }
li:not(:first-child) a:before { li:not(:first-child) a::before {
content: "- "; content: "- ";
} }
} }
footer-language-selector { .footer-language-selector {
margin: $baseline 0; margin: $baseline 0;
} }
......
lms/static/sass/bootstrap/_header.scss 0 → 100644
// Open edX: LMS header
// ====================
.header-global {
.logo-header {
margin: 0;
padding: 0;
.logo-image {
height: 30px;
}
}
}
lms/static/sass/bootstrap/_layouts.scss
...@@ -2,23 +2,19 @@ ...@@ -2,23 +2,19 @@
.content-wrapper { .content-wrapper {
margin-top: $baseline; margin-top: $baseline;
padding-bottom: $baseline*2;
.course-tabs { .course-tabs {
padding-bottom: 0; padding: 0;
font-size: $font-size-sm;
.nav-item { .nav-item {
&.active, &:hover{
.nav-link {
border-bottom-color: theme-color("primary");
color: theme-color("primary");
}
}
.nav-link { .nav-link {
padding: $baseline/2 $baseline*3/4 $baseline*13/20; padding: $baseline/2 $baseline*3/4 $baseline*13/20;
border-style: solid; border-style: solid;
border-width: 0 0 $baseline/5 0; border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent; border-bottom-color: transparent;
color: theme-color("secondary");
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
border: none; border: none;
...@@ -26,24 +22,64 @@ ...@@ -26,24 +22,64 @@
padding: 0 0 $baseline/2 0; padding: 0 0 $baseline/2 0;
} }
} }
&.active,
&:hover {
.nav-link {
border-bottom-color: theme-color("primary");
color: theme-color("primary");
}
}
} }
} }
.main-container { &.container-fluid {
border: 1px solid $border-color; max-width: map-get($container-max-widths, xl);
background-color: $body-bg; }
}
.page-header { .page-header {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
padding: 20px; padding: 20px;
.page-header-main {
flex-grow: 1; // This column should consume all the available space
} }
.page-content { .page-header-secondary {
padding: 20px; display: flex;
@include media-breakpoint-up(md) {
margin-left: $baseline;
&:not(:last-child) {
margin-right: $baseline;
}
} }
} }
}
&.container-fluid { .page-content-container {
max-width: map-get($container-max-widths, xl); border: 1px solid $border-color;
background-color: $body-bg;
}
.page-content {
padding: $baseline;
@include media-breakpoint-up(md) {
display: flex;
.page-content-main {
flex-grow: 1; // This column should consume all the available space
}
.page-content-secondary {
min-width: 350px; // Note: setting width only is not obeyed
max-width: 350px; // Note: setting width only is not obeyed
margin-left: $baseline*2;
}
} }
} }
lms/static/sass/bootstrap/_legacy.scss 0 → 100644
// ------------------------------------
// LMS support for legacy Sass partials
//
// The intention is that this makes it
// easier to reuse existing partials
// that were not built with Bootstrap
// in mind.
// ------------------------------------
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
@mixin font-size($sizeValue: 16) {
font-size: ($sizeValue/10) + rem;
}
// Support .sr as a synonym for .sr-only
.sr {
@extend .sr-only;
}
// ----------------------------
// #LEGACY VARIABLES
// ----------------------------
// ----------------------------
// #GRID
// ----------------------------
$lms-max-width: 1180px !default;
$grid-breakpoints-sm: 576px !default;
$grid-breakpoints-md: 768px !default;
$grid-breakpoints-lg: 992px !default;
// ----------------------------
// #FONTS
// ----------------------------
$body-font-size: $font-size-base !default;
$font-light: 300 !default;
$font-regular: 400 !default;
$font-semibold: 600 !default;
$font-bold: 700 !default;
// ----------------------------
// #COLORS
// ----------------------------
$lms-gray: theme-color("secondary") !default;
$lms-background-color: $gray-100 !default;
$lms-container-background-color: theme-color("inverse") !default;
$lms-border-color: $gray-300 !default;
$lms-label-color: theme-color("secondary") !default;
$lms-active-color: theme-color("primary") !default;
$lms-preview-menu-color: $gray-400 !default;
$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;
// Blacks
$black: rgb(0, 0, 0) !default;
$black-t0: rgba($black, 0.125) !default;
$black-t1: rgba($black, 0.25) !default;
$black-t2: rgba($black, 0.5) !default;
$black-t3: rgba($black, 0.75) !default;
// Shadows
$shadow: rgba(0, 0, 0, 0.2) !default;
$shadow-l1: rgba(0, 0, 0, 0.1) !default;
$shadow-l2: rgba(0, 0, 0, 0.05) !default;
$shadow-d1: rgba(0, 0, 0, 0.4) !default;
$shadow-d2: rgba($black, 0.6) !default;
lms/static/sass/bootstrap/_navigation.scss
...@@ -13,25 +13,35 @@ ...@@ -13,25 +13,35 @@
margin: 0 auto; margin: 0 auto;
max-width: map-get($container-max-widths, xl); max-width: map-get($container-max-widths, xl);
.logo-header {
display: flex;
align-items: center;
}
.logo.slim a { .logo.slim a {
height: $baseline*3/2; height: $baseline*3/2;
margin-top: $baseline/5; margin-top: $baseline/5;
} }
.course-header { .course-header {
font-size: $font-size-lg; display: none;
margin: $baseline/2 $baseline/2 0 0;
@include media-breakpoint-up(md) {
display: block;
font-size: $font-size-base;
font-weight: $font-weight-light;
.provider { .provider {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
} }
}
.nav-item { .nav-item {
margin: 0 $baseline 0 0; margin: 0 $baseline 0 0;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
font-family: $font-family-base; font-family: $font-family-base;
text-transform: uppercase;
list-style: none; list-style: none;
.nav-link { .nav-link {
...@@ -49,7 +59,8 @@ ...@@ -49,7 +59,8 @@
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only { &.nav-item-open-collapsed,
&.nav-item-open-collapsed-only {
display: initial; display: initial;
margin: $baseline/4 $baseline/2; margin: $baseline/4 $baseline/2;
...@@ -63,13 +74,14 @@ ...@@ -63,13 +74,14 @@
} }
} }
} }
&.nav-item-hidden-collapsed { &.nav-item-hidden-collapsed {
display: none; display: none;
} }
} }
} }
.btn-shopping-cart{ .btn-shopping-cart {
padding-top: 0.7rem; // $btn-padding-y-lg once themed padding-top: 0.7rem; // $btn-padding-y-lg once themed
} }
......
lms/static/sass/bootstrap/_variables.scss
// lms - bootstrap utilities - variables // lms - bootstrap utilities - variables
// ==================== // ====================
// #Units: Unit variables
// #GRID: Grid and layout variables
// #COLORS: Base, palette and theme color definitions + application
// #TYPOGRAPHY: Font definitions and scales
// #ICONS: Icon specific colors + other styling
// ---------------------------- // ----------------------------
// #UNITS // #UNITS
// ---------------------------- // ----------------------------
......
lms/static/sass/bootstrap/lms-main.scss
...@@ -5,13 +5,24 @@ ...@@ -5,13 +5,24 @@
// Bootstrap theme // Bootstrap theme
@import 'bootstrap/theme'; @import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap'; @import 'bootstrap/scss/bootstrap';
@import 'bootstrap/scss/mixins';
// Legacy support
@import 'legacy';
// Variables // Variables
@import 'variables'; @import 'variables';
// Elements // Elements
@import 'header';
@import 'footer'; @import 'footer';
@import 'navigation'; @import 'navigation';
@import 'layouts'; @import 'layouts';
@import 'components'; @import 'components';
@import 'course/layout/courseware_preview';
// Features
@import 'features/bookmarks';
@import 'features/course-experience';
@import 'features/course-search';
@import 'features/course-sock';
@import 'features/course-upgrade-message';
lms/static/sass/course/layout/_courseware_preview.scss
.wrapper-preview-menu { .wrapper-preview-menu {
@include clearfix(); @include clearfix();
@include box-sizing(border-box);
margin: 0 auto 0; margin: 0 auto 0;
padding: ($baseline*0.75); padding: ($baseline*0.75);
background-color: $gray-l3; background-color: $lms-preview-menu-color;
box-sizing: border-box;
@media print { @media print {
display: none; display: none;
...@@ -11,17 +12,22 @@ ...@@ -11,17 +12,22 @@
.preview-menu { .preview-menu {
@extend %inner-wrapper; @extend %inner-wrapper;
width: auto; width: auto;
} }
.preview-actions { .preview-actions {
@include padding-left(0);
display: inline-block; display: inline-block;
margin-bottom: 0;
.action-preview { .action-preview {
display: inline-block; display: inline-block;
.action-preview-label { .action-preview-label {
@include margin-right($baseline/2); @include margin-right($baseline/2);
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
...@@ -47,6 +53,7 @@ ...@@ -47,6 +53,7 @@
font-size: 90%; font-size: 90%;
} }
} }
.proctored_exam_status { .proctored_exam_status {
// STATE: Fixed to viewport (used for scrolling) // STATE: Fixed to viewport (used for scrolling)
&.is-fixed { &.is-fixed {
...@@ -56,70 +63,85 @@ ...@@ -56,70 +63,85 @@
top: 0; top: 0;
width: 100%; width: 100%;
} }
.exam-timer { .exam-timer {
@include font-size(14);
background-color: rgb(229, 234, 236); background-color: rgb(229, 234, 236);
padding: $baseline ($baseline*2); padding: $baseline ($baseline*2);
border-left: 4px solid $m-blue-l1; border-left: 4px solid theme-color("primary");
margin: 0 auto; margin: 0 auto;
color: $gray-d2; color: theme-color("secondary");
@include font-size(14);
.exam-text { .exam-text {
display: inline-block; display: inline-block;
width: calc(100% - 250px); width: calc(100% - 250px);
} }
a { a {
color: rgb(9, 121, 186); color: rgb(9, 121, 186);
} }
.pull-right { .pull-right {
color: $gray-d1; color: theme-color("secondary");
b { b {
color: $gray-d3; color: theme-color("dark");
} }
} }
.turn_in_exam { .turn_in_exam {
margin-top: -6px; margin-top: -6px;
} }
&.low-time { &.low-time {
color: $gray-l3; color: theme-color("light");
background-color: rgb(79, 88, 92); background-color: rgb(79, 88, 92);
a { a {
color: $white; color: $white;
text-decoration: underline; text-decoration: underline;
} }
.pull-right { .pull-right {
color: $gray-l3; color: theme-color("light");
b { b {
color: $white; color: theme-color("inverse");
} }
.exam-button-turn-in-exam { .exam-button-turn-in-exam {
background-color: transparent; background-color: transparent;
border: 1px solid $white; border: 1px solid theme-color("inverse");
color: $white; color: theme-color("inverse");
&:hover { &:hover {
border: 1px solid $white; border: 1px solid theme-color("inverse");
background-color: $white; background-color: theme-color("inverse");
color: $action-primary-bg; color: theme-color("brand");
} }
} }
} }
} }
&.warning { &.warning {
border-left-color: $warning-color; border-left-color: theme-color("warning");
} }
&.critical { &.critical {
border-left-color: $alert-color; border-left-color: theme-color("danger");
color: $white; color: theme-color("inverse");
} }
.exam-button-turn-in-exam { .exam-button-turn-in-exam {
@extend %btn-pl-primary-base; @extend %btn-pl-primary-base;
@extend %t-action3; @extend %t-action3;
@extend %t-weight4; @extend %t-weight4;
margin-right: $baseline; margin-right: $baseline;
border: 0; border: 0;
background-image: none; background-image: none;
padding: ($baseline/5) ($baseline*.75); padding: ($baseline/5) ($baseline*0.75);
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
......
lms/static/sass/elements-v2/_buttons.scss
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
$upgrade-color: #009b00 !default; $upgrade-color: #009b00 !default;
$upgrade-dark-color: #008100 !default; $upgrade-dark-color: #008100 !default;
.btn-primary {
@extend .btn-brand;
}
.btn-upgrade { .btn-upgrade {
@extend %btn; @extend %btn;
......
lms/static/sass/features/_course-experience.scss
// ------------------------------ // ------------------------------
// Styling for files located in the openedx/features repository. // Styling for files located in the openedx/features repository.
// Course sidebar sections
.course-sidebar {
.section {
h3 {
font-size: $font-size-base;
font-weight: $font-weight-bold;
}
.icon {
width: 20px;
text-align: center;
}
&:not(:first-child) {
margin-top: $baseline;
}
}
}
// Course call to action message // Course call to action message
.course-message { .course-message {
display: flex;
.message-author { .message-author {
display: inline-block; display: inline-block;
width: 70px; width: 70px;
height: 70px;
border-radius: $baseline*7/4; border-radius: $baseline*7/4;
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
...@@ -17,11 +39,11 @@ ...@@ -17,11 +39,11 @@
.message-content { .message-content {
@include margin(0, 0, $baseline, $baseline); @include margin(0, 0, $baseline, $baseline);
flex-grow: 1;
position: relative; position: relative;
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
padding: $baseline; padding: $baseline;
border-radius: $baseline/4; border-radius: $baseline/4;
width: calc(100% - 90px);
@media (max-width: $grid-breakpoints-md) { @media (max-width: $grid-breakpoints-md) {
width: 100%; width: 100%;
...@@ -59,9 +81,10 @@ ...@@ -59,9 +81,10 @@
} }
.message-header { .message-header {
@include margin-right($baseline*2);
font-weight: $font-semibold; font-weight: $font-semibold;
margin-bottom: $baseline/2; margin-bottom: $baseline/2;
width: calc(100% - 40px);
} }
a:not(.btn) { a:not(.btn) {
...@@ -101,7 +124,7 @@ ...@@ -101,7 +124,7 @@
position: absolute; position: absolute;
top: $baseline/2; top: $baseline/2;
font-size: font-size(small); font-size: font-size(small);
color: $uxpl-blue-base; color: theme-color("primary");
cursor: pointer; cursor: pointer;
&:hover { &:hover {
...@@ -162,6 +185,7 @@ ...@@ -162,6 +185,7 @@
// Course Goal Updates // Course Goal Updates
.section-goals { .section-goals {
@include float(left); @include float(left);
border: 1px solid $lms-border-color; 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.25;
border-radius: 5px; border-radius: 5px;
...@@ -181,6 +205,7 @@ ...@@ -181,6 +205,7 @@
.edit-icon { .edit-icon {
@include right($baseline/4); @include right($baseline/4);
position: absolute; position: absolute;
top: $baseline*0.6; top: $baseline*0.6;
cursor: pointer; cursor: pointer;
...@@ -193,7 +218,7 @@ ...@@ -193,7 +218,7 @@
} }
.current-goal-container { .current-goal-container {
.title{ .title {
@include float(left); @include float(left);
@include margin-right($baseline/4); @include margin-right($baseline/4);
} }
...@@ -207,18 +232,20 @@ ...@@ -207,18 +232,20 @@
@include padding-left($baseline*0.4); @include padding-left($baseline*0.4);
} }
.response-icon { .response-icon {
@include margin-left($baseline/4); @include margin-left($baseline/4);
@include right(-1*$baseline); @include right(-1*$baseline);
top: $baseline*0.75; top: $baseline*0.75;
position: absolute; position: absolute;
&.fa-check { &.fa-check {
color: $success-color; color: theme-color("success");
} }
&.fa-close { &.fa-close {
color: $error-color; color: theme-color("error");
} }
} }
} }
...@@ -231,10 +258,9 @@ ...@@ -231,10 +258,9 @@
// Course outline // Course outline
.course-outline { .course-outline {
color: $lms-gray;
.block-tree { .block-tree {
margin: 0; margin: 0;
padding: 0;
list-style-type: none; list-style-type: none;
.section { .section {
...@@ -253,7 +279,7 @@ ...@@ -253,7 +279,7 @@
padding: 0; padding: 0;
h3 { .section-title {
font-weight: $font-bold; font-weight: $font-bold;
font-size: 1.1rem; font-size: 1.1rem;
margin: 0; margin: 0;
...@@ -266,7 +292,7 @@ ...@@ -266,7 +292,7 @@
ol.outline-item { ol.outline-item {
padding-bottom: $baseline; padding-bottom: $baseline;
border-bottom: 1px solid $light-grey-solid; border-bottom: 1px solid $lms-border-color;
margin: 0 0 ($baseline / 2) 0; margin: 0 0 ($baseline / 2) 0;
.subsection { .subsection {
...@@ -294,7 +320,7 @@ ...@@ -294,7 +320,7 @@
.subsection-text { .subsection-text {
.details { .details {
font-size: $body-font-size; font-size: $body-font-size;
color: $lms-gray; color: theme-color("secondary");
} }
} }
...@@ -332,22 +358,21 @@ ...@@ -332,22 +358,21 @@
.date-summary-container { .date-summary-container {
.date-summary { .date-summary {
@include clearfix; @include clearfix;
@include border-left(3px solid $gray-l3); @include border-left(3px solid $gray-300);
padding: $baseline/2; padding: $baseline/2;
.heading { .heading {
font-size: 1.1rem; font-size: 0.9rem;
line-height: 1; line-height: 1;
font-weight: $font-bold; font-weight: $font-bold;
color: $lms-gray; color: theme-color("dark");
} }
.description { .description {
margin-top: $baseline/2; margin-top: $baseline/2;
margin-bottom: $baseline/2; margin-bottom: $baseline/2;
display: inline-block; display: inline-block;
color: $gray-d1;
} }
.date-summary-link { .date-summary-link {
...@@ -360,7 +385,7 @@ ...@@ -360,7 +385,7 @@
} }
.date { .date {
color: $gray-d1; color: theme-color("dark");
} }
&-todays-date { &-todays-date {
......
lms/static/sass/features/_course-sock.scss
...@@ -17,23 +17,23 @@ ...@@ -17,23 +17,23 @@
position: absolute; position: absolute;
top: (-1 * $baseline); top: (-1 * $baseline);
width: ($baseline * 15); width: ($baseline * 15);
color: $button-bg-hover-color; color: theme-color("inverse");
background-color: $success-color; background-color: theme-color("success");
border-color: $success-color; border-color: theme-color("success");
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
-webkit-transition: background-color 0.5s; -webkit-transition: background-color 0.5s;
transition: background-color 0.5s; transition: background-color 0.5s;
&.active { &.active {
color: $success-color; color: theme-color("success");
background-color: $button-bg-hover-color; background-color: theme-color("inverse");
border-color: $success-color; border-color: theme-color("success");
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
&:hover { &:hover {
color: $button-bg-hover-color; color: theme-color("inverse");
background-color: $success-color-hover; background-color: $success-color-hover;
border-color: $success-color-hover; border-color: $success-color-hover;
background-image: none; background-image: none;
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
} }
&:hover { &:hover {
color: $button-bg-hover-color; color: theme-color("inverse");
background-color: $success-color-hover; background-color: $success-color-hover;
border-color: $success-color-hover; border-color: $success-color-hover;
background-image: none; background-image: none;
...@@ -111,6 +111,10 @@ ...@@ -111,6 +111,10 @@
.action-upgrade-certificate { .action-upgrade-certificate {
position: absolute; position: absolute;
right: $baseline; right: $baseline;
background-color: theme-color("success");
border-color: theme-color("success");
background-image: none;
box-shadow: none;
@media (max-width: 960px) { @media (max-width: 960px) {
& { & {
...@@ -154,10 +158,10 @@ ...@@ -154,10 +158,10 @@
top: (-1 * $baseline * 5/4); top: (-1 * $baseline * 5/4);
&:not(.active) { &:not(.active) {
color: $button-bg-hover-color; color: theme-color("inverse");
background-color: $success-color; background-color: theme-color("success");
box-shadow: none; box-shadow: none;
border: 1px solid $success-color; border: 1px solid theme-color("success");
&:hover { &:hover {
background-color: $success-color-hover; background-color: $success-color-hover;
......
lms/static/sass/features/_course-upgrade-message.scss
...@@ -3,11 +3,10 @@ ...@@ -3,11 +3,10 @@
the creative property. This will allow us to better track individual performance of each style of the message. the creative property. This will allow us to better track individual performance of each style of the message.
Search for the courseware_verified_certificate_upsell promotion ID. Search for the courseware_verified_certificate_upsell promotion ID.
*/ */
$upgrade-message-background-color: $blue-d1;
// Expanded upgrade message // Expanded upgrade message
.vc-message { .vc-message {
background: $blue-d1; background: $lms-hero-color;
color: $white; color: $white;
padding: $baseline; padding: $baseline;
position: relative; position: relative;
...@@ -28,12 +27,9 @@ $upgrade-message-background-color: $blue-d1; ...@@ -28,12 +27,9 @@ $upgrade-message-background-color: $blue-d1;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1rem; margin-bottom: 1rem;
@include float(left);
} }
.vc-selling-points { .vc-selling-points {
@include clear(left);
@include padding-left(0); @include padding-left(0);
font-size: 0.825rem; font-size: 0.825rem;
...@@ -59,15 +55,11 @@ $upgrade-message-background-color: $blue-d1; ...@@ -59,15 +55,11 @@ $upgrade-message-background-color: $blue-d1;
} }
} }
img {
max-width: 100%;
}
// Show/hide button // Show/hide button
.vc-toggle { .vc-toggle {
@include float(right); @include float(right);
color: $white; color: theme-color("inverse");
} }
// Cert image // Cert image
...@@ -76,10 +68,12 @@ $upgrade-message-background-color: $blue-d1; ...@@ -76,10 +68,12 @@ $upgrade-message-background-color: $blue-d1;
@include padding-left(1rem); @include padding-left(1rem);
clear: both; clear: both;
width: 35%;
img { img {
max-width: 100%; @include float(right);
clear: both;
width: 250px;
} }
} }
} }
...@@ -112,15 +106,7 @@ $upgrade-message-background-color: $blue-d1; ...@@ -112,15 +106,7 @@ $upgrade-message-background-color: $blue-d1;
} }
} }
@media (max-width: $bp-screen-md) { @media (max-width: $grid-breakpoints-sm) {
.vc-message.polite .vc-title {
clear: both;
width: 100%;
margin-bottom: 1rem;
}
}
@media (max-width: $bp-screen-sm) {
.vc-message .vc-hero { .vc-message .vc-hero {
display: none !important; display: none !important;
} }
......
lms/static/sass/partials/base/_variables.scss
...@@ -252,7 +252,8 @@ $micromasters-color: #005585 !default; ...@@ -252,7 +252,8 @@ $micromasters-color: #005585 !default;
$xseries-color: #424242 !default; $xseries-color: #424242 !default;
$professional-certificate-color: #9a1f60 !default; $professional-certificate-color: #9a1f60 !default;
$zebra-stripe-color: rgb(249, 250, 252) !default; $zebra-stripe-color: rgb(249, 250, 252) !default;
$divider-color: rgb(226,231,236) !default; $divider-color: rgb(226, 231, 236) !default;
$lms-preview-menu-color: #c8c8c8 !default;
// old color variables // old color variables
// DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above. // DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
......
lms/static/sass/shared-v2/_components.scss
...@@ -202,14 +202,3 @@ ...@@ -202,14 +202,3 @@
} }
} }
} }
.section {
.icon {
width: 20px;
text-align: center;
}
}
.section:not(:first-child) {
margin-top: $baseline;
}
lms/static/sass/shared-v2/_layouts.scss
...@@ -4,19 +4,22 @@ ...@@ -4,19 +4,22 @@
max-width: $lms-max-width; max-width: $lms-max-width;
padding-bottom: $baseline*2; padding-bottom: $baseline*2;
.container { .page-content-container {
@include clearfix(); @include clearfix();
border: 1px solid $lms-border-color; border: 1px solid $lms-border-color;
background-color: $lms-container-background-color; background-color: $lms-container-background-color;
} }
.page-header { .page-header {
@include clearfix(); @include clearfix();
border-bottom: 1px solid $lms-border-color; border-bottom: 1px solid $lms-border-color;
padding: $baseline; padding: $baseline;
.page-title { .page-title {
@extend %t-title4; @extend %t-title4;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
text-transform: none; text-transform: none;
color: $black; color: $black;
...@@ -24,6 +27,7 @@ ...@@ -24,6 +27,7 @@
.page-description { .page-description {
@extend %t-copy-sub1; @extend %t-copy-sub1;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
color: $gray; color: $gray;
} }
...@@ -36,11 +40,13 @@ ...@@ -36,11 +40,13 @@
.page-header-secondary { .page-header-secondary {
@include float(right); @include float(right);
@include text-align(right); @include text-align(right);
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
.form-actions { .form-actions {
@include margin-left($baseline/2); @include margin-left($baseline/2);
display: inline-block; display: inline-block;
} }
...@@ -53,5 +59,19 @@ ...@@ -53,5 +59,19 @@
.page-content { .page-content {
padding: $baseline; padding: $baseline;
@media (min-width: $grid-breakpoints-md) {
display: flex;
.page-content-main {
flex-grow: 1; // This column should consume all the available space
}
.page-content-secondary {
min-width: 350px; // Note: setting width only is not obeyed
max-width: 350px; // Note: setting width only is not obeyed
margin-left: $baseline*2;
}
}
} }
} }
lms/static/sass/shared-v2/_variables.scss
...@@ -29,6 +29,9 @@ $lms-preview-menu-color: #c8c8c8 !default; ...@@ -29,6 +29,9 @@ $lms-preview-menu-color: #c8c8c8 !default;
$lms-inactive-color: rgb(94,94,94) !default; $lms-inactive-color: rgb(94,94,94) !default;
$success-color: rgb(0, 155, 0) !default; $success-color: rgb(0, 155, 0) !default;
$success-color-hover: palette(success, text) !default; $success-color-hover: palette(success, text) !default;
$lms-hero-color: #005e90 !default;
$lms-purchase-color: $success-color !default;
$lms-purchase-color-hover: $success-color-hover !default;
$button-bg-hover-color: $white !default; $button-bg-hover-color: $white !default;
......
lms/templates/courseware/course_navigation.html
...@@ -4,9 +4,10 @@ ...@@ -4,9 +4,10 @@
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
<%! <%!
from django.utils.translation import ugettext as _
from courseware.tabs import get_course_tab_list from courseware.tabs import get_course_tab_list
from django.conf import settings from django.conf import settings
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
%> %>
<% <%
...@@ -29,10 +30,36 @@ if course is not None: ...@@ -29,10 +30,36 @@ if course is not None:
% endif % endif
% if disable_tabs is UNDEFINED or not disable_tabs: % if disable_tabs is UNDEFINED or not disable_tabs:
<%
tab_list = get_course_tab_list(request, course)
%>
% if uses_bootstrap:
<nav class="navbar course-tabs pb-0 navbar-expand-lg">
<ul class="navbar-nav mr-auto">
% for tab in tab_list:
<%
tab_is_active = tab.tab_id in (active_page, default_tab)
%>
<li class="nav-item ${'active' if tab_is_active else ''}">
<a href="${tab.link_func(course, reverse)}" class="nav-link">
${_(tab.name)}
% if tab_is_active:
<span class="sr-only">, ${_('current location')}</span>
%endif
% if tab_image:
## Translators: 'needs attention' is an alternative string for the
## notification image that indicates the tab "needs attention".
<img src="${tab_image}" alt="${_('needs attention')}" />
%endif
</a>
</li>
% endfor
</ul>
</nav>
% else:
<nav class="${active_page} wrapper-course-material" aria-label="${_('Course Material')}"> <nav class="${active_page} wrapper-course-material" aria-label="${_('Course Material')}">
<div class="course-material"> <div class="course-material">
<% <%
tab_list = get_course_tab_list(request, course)
tabs_tmpl = static.get_template_path('/courseware/tabs.html') tabs_tmpl = static.get_template_path('/courseware/tabs.html')
%> %>
<ol class="tabs course-tabs"> <ol class="tabs course-tabs">
...@@ -41,4 +68,5 @@ if course is not None: ...@@ -41,4 +68,5 @@ if course is not None:
</ol> </ol>
</div> </div>
</nav> </nav>
% endif
%endif %endif
lms/templates/courseware/tab-view-v2.html 0 → 100644
## mako
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/>
<%!
from openedx.core.djangolib.markup import HTML
%>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%block name="bodyclass">${tab['body_class']}</%block>
<%def name="online_help_token()"><% return "${tab['online_help_token']}" %></%def>
<%block name="pagetitle">${tab['name']} | ${course.display_number_with_default}</%block>
<%include file="/courseware/course_navigation.html" args="active_page=active_page" />
<%block name="head_extra">
${HTML(fragment.head_html())}
</%block>
<%block name="footer_extra">
<%include file="/mathjax_include.html" args="disable_fast_preview=True"/>
${HTML(fragment.foot_html())}
</%block>
<%block name="content">
${HTML(fragment.body_html())}
</%block>
lms/templates/courseware/tab-view.html
## mako ## mako
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%!
from openedx.core.djangolib.markup import HTML ## Override the default styles_version to use Bootstrap
%> <%! main_css = "css/bootstrap/lms-main.css" %>
<%inherit file="/main.html" /> <%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
...@@ -18,6 +16,10 @@ from openedx.core.djangolib.markup import HTML ...@@ -18,6 +16,10 @@ from openedx.core.djangolib.markup import HTML
<%include file="/courseware/course_navigation.html" args="active_page=active_page" /> <%include file="/courseware/course_navigation.html" args="active_page=active_page" />
<%!
from openedx.core.djangolib.markup import HTML
%>
<%block name="head_extra"> <%block name="head_extra">
${HTML(fragment.head_html())} ${HTML(fragment.head_html())}
</%block> </%block>
......
lms/templates/footer.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<footer> <footer>
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
<nav class="navbar site-nav navbar-expand-sm navbar-light" aria-label="${_('About')}"> <nav class="navbar site-nav navbar-expand-sm" aria-label="${_('About')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
% for item_num, link in enumerate(footer['navigation_links'], start=1): % for item_num, link in enumerate(footer['navigation_links'], start=1):
<li class="nav-item"> <li class="nav-item">
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear. ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
<p class="copyright">${footer['copyright']} ${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}</p> <p class="copyright">${footer['copyright']} ${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}</p>
<nav class="navbar legal-nav navbar-expand-sm navbar-light" aria-label="${_('Legal')}"> <nav class="navbar legal-nav navbar-expand-sm" aria-label="${_('Legal')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
% for item_num, link in enumerate(footer['legal_links'], start=1): % for item_num, link in enumerate(footer['legal_links'], start=1):
<li class="nav-item"> <li class="nav-item">
......
lms/templates/header/brand.html 0 → 100644
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='/static_content.html'/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
# App that handles subdomain specific branding
from branding import api as branding_api
%>
<h1 class="hd logo-header navbar-brand">
<div class="logo">
<a class="navbar-brand" href="${reverse('dashboard')}" itemprop="url">
<img class="logo-image" src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
</a>
</div>
% if course and not disable_courseware_header:
<div class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<span class="course-name">${course.display_name_with_default}</span>
</div>
% endif
</h1>
lms/templates/navigation/bootstrap/navbar-authenticated.html deleted 100644 → 0
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='../../static_content.html'/>
<%namespace file='../../main.html' import="login_query"/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
%>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
% if course:
<div class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<%
display_name = course.display_name_with_default
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
ccx = get_current_ccx(course.id)
if ccx:
display_name = ccx.display_name
%>
<span class="course-name">${display_name}</span>
</div>
% endif
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="nav-link" href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
</li>
% endif
% if show_dashboard_tabs:
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="nav-link ${'active' if reverse('dashboard') == request.path else ''}" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</li>
% if show_program_listing:
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="nav-link ${'active' if reverse('program_listing_view') in request.path else ''}" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</li>
% endif
<%
self.real_user = getattr(user, 'real_user', user)
is_on_profile_page = data and data.get('profile_user_id') is not None
%>
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="${'active ' if is_on_profile_page else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
</li>
% endif
% if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
<li class="nav-item mt-2 nav-item-open-collapsed">
## Translators: This is short for "System administration".
<a class="nav-link" href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</li>
% endif
</ul>
<ul class="navbar-nav navbar-right">
% if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<a role="button" class="nav-item-open-collapsed btn-shopping-cart btn btn-secondary mr-3" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
</a>
% endif
<li class="nav-item mt-2 nav-item-open-collapsed">
<a href="${get_online_help_info(online_help_token)['doc_url']}"
target="_blank"
class="nav-link">${_("Help")}</a>
</li>
<%include file="../../user_dropdown.html"/>
</ul>
</div>
lms/templates/navigation/bootstrap/navbar-not-authenticated.html deleted 100644 → 0
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='../../static_content.html'/>
<%namespace file='../../main.html' import="login_query"/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
%>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
% if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
<li class="nav-item">
<a class="nav-link mt-2" href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<li class="nav-item">
<a class="nav-link mt-2" href="${marketing_link('COURSES')}">${_("Courses")}</a>
</li>
% endif
<li class="nav-item">
<a class="nav-link mt-2" href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
</li>
% endif
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="nav-item">
<a class="nav-link mt-2" href="/courses">${_('Explore courses')}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-item">
<a class="nav-link mt-2 btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</li>
% elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
<li class="nav-item">
<a class="nav-link mt-2" href="/register${login_query()}">${_("Register")}</a>
</li>
% endif
% endif
</ul>
<ul class="navbar-nav">
<li class="nav-item">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="btn btn-primary mt-2" role="button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">
${_("Sign in")}
</a>
% else:
<a class="btn btn-primary mt-2" role="button" href="/login${login_query()}">
${_("Sign in")}
</a>
% endif
% endif
</li>
</ul>
</div>
lms/templates/navigation/navigation.html
...@@ -51,15 +51,15 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -51,15 +51,15 @@ site_status_msg = get_site_status_msg(course_id)
% if uses_bootstrap: % if uses_bootstrap:
<header class="navigation-container header-global ${'slim' if course else ''}"> <header class="navigation-container header-global ${'slim' if course else ''}">
<nav class="navbar navbar-expand-lg navbar-light"> <nav class="navbar navbar-expand-lg">
<%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/> <%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
<button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
% if user.is_authenticated(): % if user.is_authenticated():
<%include file="bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/> <%include file="navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else: % else:
<%include file="bootstrap/navbar-not-authenticated.html" args="online_help_token=online_help_token"/> <%include file="navbar-not-authenticated.html" args="online_help_token=online_help_token"/>
% endif % endif
</nav> </nav>
</header> </header>
......
lms/templates/preview_menu.html
...@@ -27,7 +27,7 @@ show_preview_menu = course and staff_access and supports_preview_menu ...@@ -27,7 +27,7 @@ show_preview_menu = course and staff_access and supports_preview_menu
student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id) student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id)
%> %>
<nav class="wrapper-preview-menu" aria-label="${_('Course View')}"> <nav class="wrapper-preview-menu" aria-label="${_('Course View')}">
<div class="preview-menu"> <div class="preview-menu container">
<ol class="preview-actions"> <ol class="preview-actions">
<li class="action-preview"> <li class="action-preview">
<form action="#" class="action-preview-form" method="post"> <form action="#" class="action-preview-form" method="post">
...@@ -50,7 +50,7 @@ show_preview_menu = course and staff_access and supports_preview_menu ...@@ -50,7 +50,7 @@ show_preview_menu = course and staff_access and supports_preview_menu
<label for="action-preview-username" class="action-preview-label">${_("Username or email:")}</label> <label for="action-preview-username" class="action-preview-label">${_("Username or email:")}</label>
<input type="text" class="action-preview-username" id="action-preview-username"> <input type="text" class="action-preview-username" id="action-preview-username">
</div> </div>
<button type="submit" class="sr" name="submit" value="submit">${_("Set preview mode")}</button> <button type="submit" class="sr-only" name="submit" value="submit">${_("Set preview mode")}</button>
</form> </form>
</li> </li>
</ol> </ol>
......
lms/templates/user_dropdown.html
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
## This template should not use the target student's details when masquerading, see TNL-4895 ## This template should not use the target student's details when masquerading, see TNL-4895
<% <%
self.real_user = getattr(user, 'real_user', user) 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 _ ...@@ -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 from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%> %>
% if uses_bootstrap: % if uses_bootstrap:
<li class="nav-item nav-item-hidden-collapsed"> <div class="nav-item nav-item-hidden-collapsed container">
<a href="${reverse('dashboard')}" class="menu-title"> <div class="nav align-items-center">
<a class="menu-title mr-2" href="${reverse('dashboard')}">
<span class="sr-only">${_("Dashboard for:")}</span> <span class="sr-only">${_("Dashboard for:")}</span>
<% profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium'] %> <img class="user-image-frame" src="${profile_image_url}" alt="${username}">
<img class="user-image-frame" src="${profile_image_url}" alt="">
</a> </a>
</li> <div class="dropdown">
<li class="nav-item dropdown mt-2 nav-item-hidden-collapsed"> <a class="dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${username}</a>
<% username = self.real_user.username %> <ul role="menu" class="dropdown-menu dropdown-menu-right" id="${_("Usermenu")}" aria-labelledby="dropdownMenuLink" tabindex="-1">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${username}</a> <li role="presentation"><a role="menuitem" class="dropdown-item" href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<ul class="dropdown-menu dropdown-menu-right" id="${_("Usermenu")}" aria-labelledby="dropdownMenuLink" tabindex="-1"> <li role="presentation"><a role="menuitem" class="dropdown-item" href="${reverse('account_settings')}">${_("Account")}</a></li>
<a class="dropdown-item" href="${reverse('dashboard')}">${_("Dashboard")}</a> <li role="presentation"><a role="menuitem" class="dropdown-item" href="${reverse('logout')}">${_("Sign Out")}</a></li>
<a class="dropdown-item" href="${reverse('account_settings')}">${_("Account")}</a> </ul>
<a class="dropdown-item" href="${reverse('logout')}">${_("Sign Out")}</a> </div>
</div>
</div>
<ul role="menu" class="nav flex-column align-items-center">
<li role="presentation" class="nav-item nav-item-open-collapsed-only collapse"><a role="menuitem" href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li role="presentation" class="nav-item nav-item-open-collapsed-only"><a role="menuitem" href="${reverse('account_settings')}">${_("Account")}</a></li>
<li role="presentation" class="nav-item nav-item-open-collapsed-only"><a role="menuitem" href="${reverse('logout')}">${_("Sign Out")}</a></li>
</ul> </ul>
</li>
<li class="nav-item nav-item-open-collapsed-only collapse"><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('account_settings')}">${_("Account")}</a></li>
<li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('logout')}">${_("Sign Out")}</a></li>
% elif uses_pattern_library: % elif uses_pattern_library:
<div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu"> <div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu">
<a href="${reverse('dashboard')}" class="menu-title"> <a href="${reverse('dashboard')}" class="menu-title">
<span class="sr-only">${_("Dashboard for:")}</span> <span class="sr-only">${_("Dashboard for:")}</span>
<% <img class="menu-image" src="${profile_image_url}" alt="${username}">
username = self.real_user.username
profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium']
%>
<img class="menu-image" src="${profile_image_url}" alt="">
${username} ${username}
</a> </a>
<div role="group" aria-label="User menu" class="user-menu"> <div role="group" aria-label="User menu" class="user-menu">
...@@ -63,10 +63,6 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_ ...@@ -63,10 +63,6 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
<li class="primary"> <li class="primary">
<a href="${reverse('dashboard')}" class="user-link"> <a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span> <span class="sr">${_("Dashboard for:")}</span>
<%
username = self.real_user.username
profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt=""> <img class="user-image-frame" src="${profile_image_url}" alt="">
<div class="label-username">${username}</div> <div class="label-username">${username}</div>
</a> </a>
......
lms/templates/ux/reference/bootstrap/course-skeleton.html
...@@ -10,47 +10,50 @@ ...@@ -10,47 +10,50 @@
<%block name="bodyclass">course-skeleton</%block> <%block name="bodyclass">course-skeleton</%block>
<%!
from django.utils.translation import ugettext as _
%>
<%block name="content"> <%block name="content">
<nav class="navbar course-tabs pb-0 navbar-expand-lg navbar-light"> <nav class="navbar course-tabs navbar-expand-lg">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">${_('Course')} <span class="sr-only">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Discussion</a> <a class="nav-link" href="#">${_('Discussion')}</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Wiki</a> <a class="nav-link" href="#">${_('Wiki')}</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Progress</a> <a class="nav-link" href="#">${_('Progress')}</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<section class="main-container"> <div class="course-view page-content-container" id="course-container">
<div class="container-fluid"> <header class="page-header has-secondary">
<div class="row page-header"> <div class="page-header-main">
<div class="col-md-7"> <nav class="sr-is-focusable" tabindex="-1">
<h2 class="hd hd-2 page-title">Skeleton Page</h2> <h2 class="hd hd-3 page-title">${_('Skeleton Page')}</h2>
<p class="page-description">This demonstrates the pieces available to a courseware page.</p> </nav>
</div> </div>
<div class="col-md-5"> <div class="page-header-secondary">
<div class="row"> <div class="page-header-search">
<div class="input-group col"> <form class="search-form" role="search" action="#">
<label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
<input type="text" class="form-control" placeholder="Search" aria-label="Search"/> <input type="text" class="form-control" placeholder="Search" aria-label="Search"/>
<span class="input-group-addon" id="basic-addon2">Search</span> <button class="btn btn-small search-button" type="submit">${_('Search')}</button>
</div> </form>
<a href="#">
<div class="btn btn-primary">Click Me!!</div>
</a>
</div>
</div> </div>
<div class="form-actions">
<button class="btn btn-brand">${_('Start Course')}</button>
</div> </div>
</div> </div>
<div class="container-fluid"> </header>
<div class="row page-content"> <div class="page-content">
<main id="main" aria-label="Content" tabindex="-1" class="col-md-8"> <main id="main" aria-label="Content" tabindex="-1" class="page-content-main">
<article tabindex="-1" aria-label="Main Content"> <article tabindex="-1" aria-label="Main Content">
<h3>Main content goes here.</h3> <h3>Main content goes here.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare, <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare,
...@@ -63,15 +66,14 @@ ...@@ -63,15 +66,14 @@
lorem. Nullam quis tincidunt sapien.</p> lorem. Nullam quis tincidunt sapien.</p>
</article> </article>
</main> </main>
<div class="col-md-4"> <aside class="page-content-secondary">
<h3>Sidebar</h3> <h3>Sidebar</h3>
<ul> <ul>
<li>Item one</li> <li>Item one</li>
<li>Item two</li> <li>Item two</li>
<li>Item three</li> <li>Item three</li>
</ul> </ul>
</aside>
</div> </div>
</div> </div>
</div>
</section>
</%block> </%block>
lms/templates/ux/reference/bootstrap/unit-page.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</%block> </%block>
<%block name="content"> <%block name="content">
<nav class="navbar course-tabs pb-0 navbar-expand-lg navbar-light"> <nav class="navbar course-tabs navbar-expand-lg">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
......
openedx/features/course_bookmarks/templates/course_bookmarks/course-bookmarks.html
...@@ -36,7 +36,7 @@ ${HTML(bookmarks_fragment.foot_html())} ...@@ -36,7 +36,7 @@ ${HTML(bookmarks_fragment.foot_html())}
</%block> </%block>
<%block name="content"> <%block name="content">
<div class="course-view container" id="course-container"> <div class="course-view page-content-container" id="course-container">
<header class="page-header has-secondary"> <header class="page-header has-secondary">
## Breadcrumb navigation ## Breadcrumb navigation
<div class="page-header-main"> <div class="page-header-main">
......
openedx/features/course_experience/__init__.py
...@@ -40,6 +40,9 @@ UPGRADE_DEADLINE_MESSAGE = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'upgrade_dead ...@@ -40,6 +40,9 @@ UPGRADE_DEADLINE_MESSAGE = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'upgrade_dead
# flag even for Superusers. # flag even for Superusers.
LATEST_UPDATE_FLAG = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'latest_update') LATEST_UPDATE_FLAG = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'latest_update')
# Waffle flag to enable the use of Bootstrap for course experience pages
USE_BOOTSTRAP_FLAG = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'use_bootstrap')
def course_home_page_title(course): # pylint: disable=unused-argument def course_home_page_title(course): # pylint: disable=unused-argument
""" """
......
openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
<div class="course-view container" id="course-container"> <div class="course-view page-content-container" id="course-container">
<header class="page-header has-secondary"> <header class="page-header has-secondary">
<div class="page-header-main"> <div class="page-header-main">
<nav aria-label="Course Outline" class="sr-is-focusable" tabindex="-1"> <nav aria-label="Course Outline" class="sr-is-focusable" tabindex="-1">
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</form> </form>
</div> </div>
<div class="form-actions"> <div class="form-actions">
<a class="btn btn-brand action-resume-course" href="/courses/course-v1:edX+DemoX+Demo_Course/courseware/19a30717eff543078a5d94ae9d6c18a5/"> <a class="btn btn-primary action-resume-course" href="/courses/course-v1:edX+DemoX+Demo_Course/courseware/19a30717eff543078a5d94ae9d6c18a5/">
<span data-action-type="start">Start Course</span> <span data-action-type="start">Start Course</span>
</a> </a>
</div> </div>
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</main> </main>
<aside class="course-sidebar layout-col layout-col-a"> <aside class="course-sidebar layout-col layout-col-a">
<div class="section section-tools"> <div class="section section-tools">
<h3 class="hd-6">Course Tools</h3> <h3 class="hd-6 section-title">Course Tools</h3>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li> <li>
<a class="course-tool-link" data-analytics-id="edx.bookmarks" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/"> <a class="course-tool-link" data-analytics-id="edx.bookmarks" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/">
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
</ul> </ul>
</div> </div>
<div class="section section-dates"> <div class="section section-dates">
<h3 class="hd hd-6 handouts-header">Important Course Dates</h3> <h3 class="hd hd-6 section-title handouts-header">Important Course Dates</h3>
<div class="date-summary-container"> <div class="date-summary-container">
<div class="date-summary date-summary-todays-date"> <div class="date-summary date-summary-todays-date">
<span class="hd hd-6 heading localized-datetime" data-datetime="2017-07-13 17:31:27.952061+00:00" data-string="Today is {date}" data-timezone="None" data-language="en">Today is Jul 13, 2017 13:31 EDT</span> <span class="hd hd-6 heading localized-datetime" data-datetime="2017-07-13 17:31:27.952061+00:00" data-string="Today is {date}" data-timezone="None" data-language="en">Today is Jul 13, 2017 13:31 EDT</span>
......
openedx/features/course_experience/templates/course_experience/course-home-fragment.html
...@@ -18,7 +18,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -18,7 +18,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
%> %>
<%block name="content"> <%block name="content">
<div class="course-view container" id="course-container"> <div class="course-view page-content-container" id="course-container">
<header class="page-header has-secondary"> <header class="page-header has-secondary">
<div class="page-header-main"> <div class="page-header-main">
<nav aria-label="${_('Course Outline')}" class="sr-is-focusable" tabindex="-1"> <nav aria-label="${_('Course Outline')}" class="sr-is-focusable" tabindex="-1">
...@@ -43,7 +43,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -43,7 +43,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif % endif
<div class="form-actions"> <div class="form-actions">
% if resume_course_url: % if resume_course_url:
<a class="btn btn-brand action-resume-course" href="${resume_course_url}"> <a class="btn btn-primary action-resume-course" href="${resume_course_url}">
% if has_visited_course: % if has_visited_course:
<span data-action-type="resume">${_("Resume Course")}</span> <span data-action-type="resume">${_("Resume Course")}</span>
% else: % else:
...@@ -55,8 +55,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -55,8 +55,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
</div> </div>
</header> </header>
<div class="page-content"> <div class="page-content">
<div class="layout layout-1t2t"> <main class="page-content-main">
<main class="layout-col layout-col-b">
% if upgrade_url and upgrade_price: % if upgrade_url and upgrade_price:
<div class="section"> <div class="section">
...@@ -105,7 +104,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -105,7 +104,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
${HTML(outline_fragment.body_html())} ${HTML(outline_fragment.body_html())}
% endif % endif
</main> </main>
<aside class="course-sidebar layout-col layout-col-a"> <aside class="page-content-secondary course-sidebar">
% if has_goal_permission: % if has_goal_permission:
<div class="section section-goals ${'' if current_goal else 'hidden'}"> <div class="section section-goals ${'' if current_goal else 'hidden'}">
<div class="current-goal-container"> <div class="current-goal-container">
...@@ -133,7 +132,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -133,7 +132,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif % endif
% if course_tools: % if course_tools:
<div class="section section-tools"> <div class="section section-tools">
<h3 class="hd-6">${_("Course Tools")}</h3> <h3 class="hd-6 section-title">${_("Course Tools")}</h3>
<ul class="list-unstyled"> <ul class="list-unstyled">
% for course_tool in course_tools: % for course_tool in course_tools:
<li class="course-tool"> <li class="course-tool">
...@@ -153,13 +152,12 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV ...@@ -153,13 +152,12 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
% endif % endif
% if handouts_html: % if handouts_html:
<div class="section section-handouts"> <div class="section section-handouts">
<h3 class="hd-6">${_("Course Handouts")}</h3> <h3 class="hd-6 section-title">${_("Course Handouts")}</h3>
${HTML(handouts_html)} ${HTML(handouts_html)}
</div> </div>
% endif % endif
</aside> </aside>
</div> </div>
</div>
% if course_sock_fragment: % if course_sock_fragment:
${HTML(course_sock_fragment.body_html())} ${HTML(course_sock_fragment.body_html())}
% endif % endif
......
openedx/features/course_experience/templates/course_experience/course-messages-fragment.html
...@@ -17,7 +17,7 @@ is_rtl = get_language_bidi() ...@@ -17,7 +17,7 @@ is_rtl = get_language_bidi()
% if course_home_messages: % if course_home_messages:
% for message in course_home_messages: % for message in course_home_messages:
<div class="course-message grid-manual"> <div class="course-message">
% if not is_rtl: % if not is_rtl:
<img class="message-author" alt="" src="${static.url(image_src)}"/> <img class="message-author" alt="" src="${static.url(image_src)}"/>
% endif % endif
......
openedx/features/course_experience/templates/course_experience/course-reviews-fragment.html
...@@ -12,7 +12,7 @@ from openedx.features.course_experience import course_home_page_title ...@@ -12,7 +12,7 @@ from openedx.features.course_experience import course_home_page_title
%> %>
<div class="course-reviews container" tabindex="-1"> <div class="course-reviews page-content-container" tabindex="-1">
<header class="page-header has-secondary"> <header class="page-header has-secondary">
## Breadcrumb navigation ## Breadcrumb navigation
<div class="page-header-main"> <div class="page-header-main">
...@@ -28,7 +28,7 @@ from openedx.features.course_experience import course_home_page_title ...@@ -28,7 +28,7 @@ from openedx.features.course_experience import course_home_page_title
</div> </div>
</nav> </nav>
% if is_enrolled: % if is_enrolled:
<div class="btn toggle-read-write-reviews"></div> <div class="btn btn-secondary toggle-read-write-reviews"></div>
% endif % endif
</div> </div>
</header> </header>
......
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 ...@@ -15,7 +15,7 @@ from openedx.features.course_experience import DISPLAY_COURSE_SOCK_FLAG
style="display: none" style="display: none"
%endif %endif
> >
<button type="button" class="btn btn-brand focusable action-toggle-verification-sock"> <button type="button" class="btn btn-primary focusable action-toggle-verification-sock">
Learn About Verified Certificates Learn About Verified Certificates
</button> </button>
<div class="verification-main-panel"> <div class="verification-main-panel">
......
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 ...@@ -11,7 +11,7 @@ from openedx.features.course_experience import course_home_page_title
%> %>
<%block name="content"> <%block name="content">
<div class="course-updates container" id="course-container"> <div class="course-updates page-content-container" id="course-container">
<header class="page-header has-secondary"> <header class="page-header has-secondary">
## Breadcrumb navigation ## Breadcrumb navigation
<div class="page-header-main"> <div class="page-header-main">
......
openedx/features/course_experience/views/course_home.py
...@@ -27,7 +27,7 @@ from student.models import CourseEnrollment ...@@ -27,7 +27,7 @@ from student.models import CourseEnrollment
from util.views import ensure_valid_course_key from util.views import ensure_valid_course_key
from web_fragments.fragment import Fragment 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 ..utils import get_course_outline_block_tree
from .course_dates import CourseDatesFragmentView from .course_dates import CourseDatesFragmentView
from .course_home_messages import CourseHomeMessageFragmentView from .course_home_messages import CourseHomeMessageFragmentView
...@@ -52,6 +52,9 @@ class CourseHomeView(CourseTabView): ...@@ -52,6 +52,9 @@ class CourseHomeView(CourseTabView):
""" """
return super(CourseHomeView, self).get(request, course_id, 'courseware', **kwargs) 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): def render_to_fragment(self, request, course=None, tab=None, **kwargs):
course_id = unicode(course.id) course_id = unicode(course.id)
home_fragment_view = CourseHomeFragmentView() home_fragment_view = CourseHomeFragmentView()
......
openedx/features/course_experience/views/course_reviews.py
...@@ -16,12 +16,13 @@ from lms.djangoapps.courseware.views.views import CourseTabView ...@@ -16,12 +16,13 @@ from lms.djangoapps.courseware.views.views import CourseTabView
from openedx.core.djangoapps.plugin_api.views import EdxFragmentView from openedx.core.djangoapps.plugin_api.views import EdxFragmentView
from openedx.features.course_experience import default_course_url_name from openedx.features.course_experience import default_course_url_name
from .. import USE_BOOTSTRAP_FLAG
class CourseReviewsView(CourseTabView): class CourseReviewsView(CourseTabView):
""" """
The course reviews page. The course reviews page.
""" """
@method_decorator(login_required) @method_decorator(login_required)
@method_decorator(cache_control(no_cache=True, no_store=True, must_revalidate=True)) @method_decorator(cache_control(no_cache=True, no_store=True, must_revalidate=True))
def get(self, request, course_id, **kwargs): def get(self, request, course_id, **kwargs):
...@@ -30,6 +31,9 @@ class CourseReviewsView(CourseTabView): ...@@ -30,6 +31,9 @@ class CourseReviewsView(CourseTabView):
""" """
return super(CourseReviewsView, self).get(request, course_id, 'courseware', **kwargs) 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): def render_to_fragment(self, request, course=None, tab=None, **kwargs):
course_id = unicode(course.id) course_id = unicode(course.id)
reviews_fragment_view = CourseReviewsFragmentView() reviews_fragment_view = CourseReviewsFragmentView()
......
openedx/features/course_experience/views/course_updates.py
...@@ -17,6 +17,8 @@ from lms.djangoapps.courseware.views.views import CourseTabView ...@@ -17,6 +17,8 @@ from lms.djangoapps.courseware.views.views import CourseTabView
from openedx.core.djangoapps.plugin_api.views import EdxFragmentView from openedx.core.djangoapps.plugin_api.views import EdxFragmentView
from openedx.features.course_experience import default_course_url_name from openedx.features.course_experience import default_course_url_name
from .. import USE_BOOTSTRAP_FLAG
STATUS_VISIBLE = 'visible' STATUS_VISIBLE = 'visible'
STATUS_DELETED = 'deleted' STATUS_DELETED = 'deleted'
...@@ -53,7 +55,6 @@ class CourseUpdatesView(CourseTabView): ...@@ -53,7 +55,6 @@ class CourseUpdatesView(CourseTabView):
""" """
The course updates page. The course updates page.
""" """
@method_decorator(login_required) @method_decorator(login_required)
@method_decorator(cache_control(no_cache=True, no_store=True, must_revalidate=True)) @method_decorator(cache_control(no_cache=True, no_store=True, must_revalidate=True))
def get(self, request, course_id, **kwargs): def get(self, request, course_id, **kwargs):
...@@ -62,6 +63,9 @@ class CourseUpdatesView(CourseTabView): ...@@ -62,6 +63,9 @@ class CourseUpdatesView(CourseTabView):
""" """
return super(CourseUpdatesView, self).get(request, course_id, 'courseware', **kwargs) 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): def render_to_fragment(self, request, course=None, tab=None, **kwargs):
course_id = unicode(course.id) course_id = unicode(course.id)
updates_fragment_view = CourseUpdatesFragmentView() updates_fragment_view = CourseUpdatesFragmentView()
......
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 ...@@ -19,7 +19,7 @@ from openedx.features.course_experience import course_home_page_title
%> %>
<%block name="content"> <%block name="content">
<div class="course-view container" id="course-container"> <div class="course-view pzge-content-container" id="course-container">
<header class="page-header has-secondary"> <header class="page-header has-secondary">
<div class="page-header-main"> <div class="page-header-main">
<nav aria-label="${_('Search Results')}" class="sr-is-focusable" tabindex="-1"> <nav aria-label="${_('Search Results')}" class="sr-is-focusable" tabindex="-1">
......
openedx/features/learner_profile/templates/learner_profile/learner-achievements-fragment.html
...@@ -87,4 +87,3 @@ from openedx.core.djangolib.markup import HTML, Text ...@@ -87,4 +87,3 @@ from openedx.core.djangolib.markup import HTML, Text
<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory"> <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
DateUtilFactory.transform('.localized-datetime'); DateUtilFactory.transform('.localized-datetime');
</%static:require_module_async> </%static:require_module_async>
package.json
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"coffee-loader": "^0.7.3", "coffee-loader": "^0.7.3",
"coffee-script": "1.6.1", "coffee-script": "1.6.1",
"@edx/studio-frontend": "0.1.0", "@edx/studio-frontend": "0.1.0",
"edx-bootstrap": "^0.2.1", "@edx/edx-bootstrap": "0.3.3",
"edx-pattern-library": "0.18.1", "edx-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2", "edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4", "exports-loader": "^0.6.4",
......
pavelib/assets.py
...@@ -43,8 +43,8 @@ SYSTEMS = { ...@@ -43,8 +43,8 @@ SYSTEMS = {
COMMON_LOOKUP_PATHS = [ COMMON_LOOKUP_PATHS = [
path("common/static"), path("common/static"),
path("common/static/sass"), path("common/static/sass"),
path('node_modules/@edx'),
path('node_modules'), path('node_modules'),
path('node_modules/edx-pattern-library/node_modules'),
] ]
# A list of NPM installed libraries that should be copied into the common # A list of NPM installed libraries that should be copied into the common
......
pavelib/paver_tests/test_assets.py
...@@ -151,8 +151,8 @@ class TestPaverWatchAssetTasks(TestCase): ...@@ -151,8 +151,8 @@ class TestPaverWatchAssetTasks(TestCase):
self.expected_sass_directories = [ self.expected_sass_directories = [
path('common/static/sass'), path('common/static/sass'),
path('common/static'), path('common/static'),
path('node_modules/@edx'),
path('node_modules'), path('node_modules'),
path('node_modules/edx-pattern-library/node_modules'),
path('lms/static/sass/partials'), path('lms/static/sass/partials'),
path('lms/static/sass'), path('lms/static/sass'),
path('lms/static/certificates/sass'), path('lms/static/certificates/sass'),
......
themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
...@@ -25,3 +25,7 @@ $theme-colors: map-merge(( ...@@ -25,3 +25,7 @@ $theme-colors: map-merge((
light: $gray-100, light: $gray-100,
dark: $gray-800 dark: $gray-800
), $theme-colors); ), $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;
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