Skip to content

E
edx-platform
Commit 6e10d2a5 by Andy Armstrong
Options

Update to use Bootstrap beta release 

FEDX-375
parent a51b9597
Showing with 400 additions and 305 deletions
cms/envs/common.py
...@@ -722,7 +722,7 @@ base_vendor_js = [ ...@@ -722,7 +722,7 @@ base_vendor_js = [
'edx-ui-toolkit/js/utils/html-utils.js', 'edx-ui-toolkit/js/utils/html-utils.js',
# Load Bootstrap and supporting libraries # Load Bootstrap and supporting libraries
'common/js/vendor/tether.js', 'common/js/vendor/popper.js',
'common/js/vendor/bootstrap.js', 'common/js/vendor/bootstrap.js',
# Finally load RequireJS # Finally load RequireJS
......
cms/static/sass/bootstrap/_base.scss
...@@ -9,3 +9,7 @@ ...@@ -9,3 +9,7 @@
.is-hidden { .is-hidden {
display: none; display: none;
} }
.sr {
@include sr-only();
}
cms/static/sass/bootstrap/_components.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Skip nav // Skip nav
.nav-skip, .nav-skip,
.transcript-skip { .transcript-skip {
font-size: 14px; font-size: $font-size-base;
line-height: 14px; line-height: 14px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
top: -($baseline*30); top: -($baseline*30);
overflow: hidden; overflow: hidden;
background: $white; background: $white;
border-bottom: 1px solid $gray-lightest; border-bottom: 1px solid $gray-500;
padding: ($baseline*0.75) ($baseline/2); padding: ($baseline*0.75) ($baseline/2);
&:focus, &:focus,
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
@include clearfix(); @include clearfix();
position: relative; position: relative;
margin: ($baseline*2) 0 0 0; margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-light; border-top: 1px solid $gray-500;
width: 100%; width: 100%;
.wrapper-inner { .wrapper-inner {
...@@ -70,17 +70,17 @@ ...@@ -70,17 +70,17 @@
.cta-show-sock { .cta-show-sock {
@extend %ui-btn-pill; @extend %ui-btn-pill;
@extend %t-action4; @extend %t-action4;
background: $gray-lightest; background: theme-color("light");
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
color: $gray-light; color: theme-color("dark");
.icon { .icon {
margin-right: $baseline/4; margin-right: $baseline/4;
} }
&:hover { &:hover {
background: $brand-primary; background: theme-color("primary");
color: $white; color: theme-color("inverse");
} }
} }
} }
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
padding: ($baseline*2) 0; padding: ($baseline*2) 0;
color: $gray-light; color: $gray-500;
// support body // support body
header { header {
...@@ -184,11 +184,11 @@ ...@@ -184,11 +184,11 @@
// case: sock content is shown // case: sock content is shown
&.is-shown { &.is-shown {
border-color: $gray-dark; border-color: theme-color("primary");
.list-cta .cta-show-sock { .list-cta .cta-show-sock {
background: $gray-dark; background: theme-color("primary");
border-color: $gray-dark; border-color: theme-color("primary");
color: $white; color: $white;
} }
} }
......
cms/static/sass/bootstrap/_footer.scss
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
max-width: $studio-max-width; max-width: $studio-max-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
color: $gray-light; color: $gray-500;
.footer-content-primary { .footer-content-primary {
@include clearfix(); @include clearfix();
......
cms/static/sass/bootstrap/_header.scss
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
.branding, .info-course, .nav-course, .nav-account, .nav-pitch { .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-bottom: 0;
} }
.user-language-selector { .user-language-selector {
...@@ -78,7 +79,7 @@ ...@@ -78,7 +79,7 @@
} }
.nav-item a { .nav-item a {
color: $gray; color: color("gray");
&:hover { &:hover {
color: $link-hover-color; color: $link-hover-color;
...@@ -90,16 +91,8 @@ ...@@ -90,16 +91,8 @@
.nav-dd { .nav-dd {
.title { .title {
@extend %t-action2; padding: $baseline/2 $baseline/2;
@extend %ui-btn-dd-nav-primary; font-size: $font-size-lg;
.label, .fa-caret-down {
}
.label {
}
.fa-caret-down { .fa-caret-down {
opacity: 0.25; opacity: 0.25;
...@@ -144,11 +137,11 @@ ...@@ -144,11 +137,11 @@
// specific elements - course name/info // specific elements - course name/info
.info-course { .info-course {
margin-right: flex-gutter(); margin-right: flex-gutter();
border-right: 1px solid $gray-lighter; border-right: 1px solid $gray-300;
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org, .course-number {
font-size: 12px; font-size: $font-size-sm;
line-height: 12px; line-height: 12px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -157,7 +150,7 @@ ...@@ -157,7 +150,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 1.0; opacity: 1.0;
color: $gray-dark; color: theme-color("primary");
} }
.course-org { .course-org {
...@@ -177,7 +170,7 @@ ...@@ -177,7 +170,7 @@
// entire link // entire link
.course-link { .course-link {
display: block; display: block;
color: $gray-dark; color: theme-color("primary");
&:hover { &:hover {
color: $link-hover-color; color: $link-hover-color;
...@@ -406,7 +399,7 @@ ...@@ -406,7 +399,7 @@
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l1;
position: relative; position: relative;
width: 100%; width: 100%;
border: 1px solid $gray-light; border: 1px solid $gray-500;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
background: $white; background: $white;
...@@ -429,7 +422,7 @@ ...@@ -429,7 +422,7 @@
&:before { &:before {
border-color: rgba(178, 178, 178, 0); border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-light; border-bottom-color: $gray-500;
border-width: 11px; border-width: 11px;
} }
...@@ -438,7 +431,7 @@ ...@@ -438,7 +431,7 @@
@extend %t-regular; @extend %t-regular;
display: block; display: block;
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $gray-300;
padding: 0 0($baseline/4) 0; padding: 0 0($baseline/4) 0;
&:last-child { &:last-child {
...@@ -447,11 +440,18 @@ ...@@ -447,11 +440,18 @@
padding-bottom: 0; padding-bottom: 0;
} }
h3 {
font-size: $font-size-lg;
}
a { a {
display: block; display: block;
color: $body-color;
font-size: $font-size-lg;
font-weight: 600;
&:hover, &:active { &:hover, &:active {
color: $brand-primary; color: theme-color("primary");
} }
} }
} }
...@@ -483,6 +483,10 @@ ...@@ -483,6 +483,10 @@
// CASE: right-hand side arrow/dd // CASE: right-hand side arrow/dd
&.ui-right { &.ui-right {
> ol {
margin-bottom: 0;
}
.wrapper-nav-sub { .wrapper-nav-sub {
left: none; left: none;
right: 0; right: 0;
...@@ -503,66 +507,3 @@ ...@@ -503,66 +507,3 @@
} }
} }
} }
// ====================
// STATE: active/current nav states
.nav-item.is-current,
body.howitworks .nav-not-signedin-hiw,
// dashboard
body.dashboard .nav-account-dashboard,
// course content
body.course.view-outline .nav-course-courseware .title,
body.course.view-updates .nav-course-courseware .title,
body.course.view-static-pages .nav-course-courseware .title,
body.course.view-uploads .nav-course-courseware .title,
body.course.view-textbooks .nav-course-courseware .title,
body.course.view-video-uploads .nav-course-courseware .title,
body.course.view-outline .nav-course-courseware-outline,
body.course.view-updates .nav-course-courseware-updates,
body.course.view-static-pages .nav-course-courseware-pages,
body.course.view-uploads .nav-course-courseware-uploads,
body.course.view-textbooks .nav-course-courseware-textbooks,
body.course.view-video-uploads .nav-course-courseware-videos,
// course settings
body.course.schedule .nav-course-settings .title,
body.course.grading .nav-course-settings .title,
body.course.view-team .nav-course-settings .title,
body.course.view-group-configurations .nav-course-settings .title,
body.course.advanced .nav-course-settings .title,
body.course.view-certificates .nav-course-settings .title,
body.course.schedule .nav-course-settings-schedule,
body.course.grading .nav-course-settings-grading,
body.course.view-team .nav-course-settings-team,
body.course.view-group-configurations .nav-course-settings-group-configurations,
body.course.advanced .nav-course-settings-advanced,
body.course.view-certificates .nav-course-settings-certificates,
// course tools
body.course.view-import .nav-course-tools .title,
body.course.view-export .nav-course-tools .title,
body.course.view-export-git .nav-course-tools .title,
body.course.view-import .nav-course-tools-import,
body.course.view-export .nav-course-tools-export,
body.course.view-export-git .nav-course-tools-export-git,
// content library settings
body.course.view-team .nav-library-settings .title,
body.course.view-team .nav-library-settings-team
{
color: $brand-primary;
a {
color: $brand-primary;
pointer-events: none;
}
}
cms/static/sass/bootstrap/_layouts.scss
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
.nav-item { .nav-item {
&.active, &:hover{ &.active, &:hover{
.nav-link { .nav-link {
border-bottom-color: $brand-primary; border-bottom-color: theme-color("primary");
color: $brand-primary; color: theme-color("primary");
} }
} }
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
border-width: 0 0 $baseline/5 0; border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent; border-bottom-color: transparent;
@media (max-width: map-get($grid-breakpoints, md)) { @include media-breakpoint-down(md) {
border: none; border: none;
text-align: left; text-align: left;
padding: 0 0 $baseline/2 0; padding: 0 0 $baseline/2 0;
...@@ -36,11 +36,11 @@ ...@@ -36,11 +36,11 @@
} }
.main-container { .main-container {
border: 1px solid $inverse-color; border: 1px solid $border-color;
background-color: $body-bg; background-color: $body-bg;
.page-header { .page-header {
border-bottom: 1px solid $inverse-color; border-bottom: 1px solid $border-color;
padding: 20px; padding: 20px;
} }
...@@ -78,16 +78,22 @@ ...@@ -78,16 +78,22 @@
max-width: $studio-max-width; max-width: $studio-max-width;
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto $baseline auto; margin: 0 auto $baseline auto;
color: $gray-dark; color: $body-color;
} }
.mast { .mast {
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $border-color;
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
// layout without actions // layout without actions
.page-header { .page-header {
width: flex-grid(12); display: flex;
flex-direction: column;
.subtitle {
font-size: $font-size-base;
margin-bottom: $baseline/4;
}
} }
// layout with actions // layout with actions
...@@ -162,30 +168,30 @@ ...@@ -162,30 +168,30 @@
display: inline-block; display: inline-block;
vertical-align: bottom; // correct for extra padding in FF vertical-align: bottom; // correct for extra padding in FF
max-width: 250px; max-width: 250px;
color: $gray-dark; color: $body-color;
&.navigation-current { &.navigation-current {
@extend %ui-disabled; @extend %ui-disabled;
color: $gray; color: color("gray");
max-width: 250px; max-width: 250px;
&:before { &:before {
color: $gray; color: color("gray");
} }
} }
} }
.navigation-link:hover { .navigation-link:hover {
color: $brand-primary; color: theme-color("primary");
} }
.navigation-item:before { .navigation-item:before {
content: " / "; content: " / ";
margin: ($baseline/4); margin: ($baseline/4);
color: $gray; color: color("gray");
&:hover { &:hover {
color: $gray; color: color("gray");
} }
} }
...@@ -201,7 +207,7 @@ ...@@ -201,7 +207,7 @@
.page-header-sub { .page-header-sub {
@extend %t-title4; @extend %t-title4;
color: $gray; color: color("gray");
font-weight: 300; font-weight: 300;
} }
...@@ -210,7 +216,7 @@ ...@@ -210,7 +216,7 @@
float: left; float: left;
width: flex-grid(12,12); width: flex-grid(12,12);
margin-top: ($baseline/2); margin-top: ($baseline/2);
border-top: 1px solid $gray-lighter; border-top: 1px solid $border-color;
padding-top: ($baseline/2); padding-top: ($baseline/2);
font-weight: 600; font-weight: 600;
} }
...@@ -224,30 +230,37 @@ ...@@ -224,30 +230,37 @@
// layout - basic page content // layout - basic page content
.wrapper-content { .wrapper-content {
margin: 0; @include make-container();
padding: 0 $baseline; @include make-container-max-widths();
position: relative;
} }
// Specify a two column layout for content
.content { .content {
@include clearfix(); @include make-row();
@extend %t-copy-base;
max-width: $studio-max-width; @media (min-width: 576px) {
width: flex-grid(12); .content-primary {
margin: 0 auto; flex: 0 0 66.67%;
color: $gray-dark; max-width: 66.67%;
}
.content-supplementary {
flex: 0 0 25%;
max-width: 25%;
}
}
header { header {
position: relative; position: relative;
margin-bottom: $baseline; margin-bottom: $baseline;
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $gray-300;
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
.title-sub { .title-sub {
@extend %t-copy-sub1; @extend %t-copy-sub1;
display: block; display: block;
margin: 0; margin: 0;
color: $gray-light; color: $gray-500;
} }
.title-1 { .title-1 {
...@@ -255,31 +268,17 @@ ...@@ -255,31 +268,17 @@
@extend %t-strong; @extend %t-strong;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $gray-dark; color: theme-color("primary");
} }
} }
} }
// 3/4 - 1/4 two col layout
%two-col-1 {
.content-primary {
float: left;
margin-right: flex-gutter();
width: flex-grid(9,12);
box-shadow: none;
border: 0;
background-color: $white;
}
.content-supplementary {
float: left;
width: flex-grid(3,12);
}
}
// layout - primary content // layout - primary content
.content-primary { .content-primary {
border: 1px solid theme-color("dark");
background-color: theme-color("inverse");
padding: $baseline ($baseline*1.5);
margin-right: $baseline;
.title-1 { .title-1 {
@extend %t-title3; @extend %t-title3;
...@@ -310,7 +309,7 @@ ...@@ -310,7 +309,7 @@
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: right;
color: $gray-dark; color: theme-color("primary");
} }
} }
} }
......
cms/static/sass/bootstrap/_navigation.scss
// Local overrides for bootstrap navigation bar theming // Local overrides for bootstrap navigation bar theming
.navigation-container { .navigation-container {
border-bottom: 2px solid $brand-primary; border-bottom: 2px solid theme-color("primary");
text-decoration: none; text-decoration: none;
background-color: $header-bg; background-color: $header-bg;
&.slim { &.slim {
border-bottom: 1px solid $inverse-color; border-bottom: 1px solid $border-color;
box-shadow: 0 1px 5px 0 $black-t0; box-shadow: 0 1px 5px 0 $black-t0;
} }
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
list-style: none; list-style: none;
.nav-link { .nav-link {
color: $brand-primary; color: theme-color("primary");
} }
.user-image-frame { .user-image-frame {
...@@ -48,13 +48,13 @@ ...@@ -48,13 +48,13 @@
display: none; display: none;
} }
@media (max-width: map-get($grid-breakpoints,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;
a { a {
color: $brand-primary; color: theme-color("primary");
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
...@@ -74,10 +74,10 @@ ...@@ -74,10 +74,10 @@
} }
.navbar-right .nav-item { .navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,md)) { @include media-breakpoint-down(md) {
.nav-link { .nav-link {
text-transform: none; text-transform: none;
color: $brand-inverse; color: $gray-900;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
cursor: pointer; cursor: pointer;
} }
......
cms/templates/base.html
## xss-lint: disable=mako-missing-default
## coding=utf-8 ## coding=utf-8
## Pages currently use v1 styling by default. Once the Pattern Library ## Pages currently use v1 styling by default. Once the Pattern Library
...@@ -102,7 +104,7 @@ from openedx.core.djangolib.markup import HTML ...@@ -102,7 +104,7 @@ from openedx.core.djangolib.markup import HTML
</div> </div>
<main id="main" aria-label="Content" tabindex="-1"> <main id="main" aria-label="Content" tabindex="-1">
<div id="content" class="content"> <div id="content">
<%block name="content"></%block> <%block name="content"></%block>
</div> </div>
</main> </main>
......
cms/templates/ux/reference/bootstrap/course-settings.html 0 → 100644
## mako
<%page expression_filter="h"/>
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/studio-main.css" %>
<%inherit file="/base.html" />
<%block name="title">Bootstrap Test Page</%block>
<%block name="bodyclass">bootstrap-test</%block>
<%block name="content">
<%include file="../fragments/course-settings.html"/>
</%block>
cms/templates/ux/reference/index.html
...@@ -9,17 +9,25 @@ ...@@ -9,17 +9,25 @@
<%block name="bodyclass">ux-reference</%block> <%block name="bodyclass">ux-reference</%block>
<%block name="content"> <%block name="content">
<div class="main-wrapper"> <div class="wrapper-content wrapper">
<div class="inner-wrapper"> <div class="content">
<div class="main-column"> <div class="content-primary">
<article class="window unit-body"> <h2>UX Style Reference</h2>
<h2>UX Style Reference</h2>
<ul> <h3>v1-style Pages</h3>
<a href="bootstrap/test.html">Bootstrap Test Page</a> <ul>
<a href="pattern-library/test.html">Pattern Library Test Page</a> <li><a href="v1/course-settings.html">Course settings page</a></li>
</ul> </ul>
</article>
<h3>Pattern Library</h3>
<ul>
<li><a href="pattern-library/test.html">Test page</a></li>
</ul>
<h3>Bootstrap</h3>
<ul>
<li><a href="bootstrap/course-settings.html">Course settings page</a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>
......
cms/templates/ux/reference/v1/course-settings.html 0 → 100644
## mako
<%page expression_filter="h"/>
<%inherit file="/base.html" />
<%block name="title">Studio Test Page</%block>
<%block name="bodyclass">view-settings</%block>
<%block name="content">
<%include file="../fragments/course-settings.html"/>
</%block>
cms/urls.py
...@@ -212,6 +212,12 @@ if 'debug_toolbar' in settings.INSTALLED_APPS: ...@@ -212,6 +212,12 @@ if 'debug_toolbar' in settings.INSTALLED_APPS:
url(r'^__debug__/', include(debug_toolbar.urls)), url(r'^__debug__/', include(debug_toolbar.urls)),
) )
# UX reference templates
urlpatterns += patterns(
'',
url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
)
# Custom error pages # Custom error pages
# These are used by Django to render these error codes. Do not remove. # These are used by Django to render these error codes. Do not remove.
# pylint: disable=invalid-name # pylint: disable=invalid-name
......
cms/urls_dev.py
...@@ -7,5 +7,4 @@ from django.conf.urls import url ...@@ -7,5 +7,4 @@ from django.conf.urls import url
urlpatterns = ( urlpatterns = (
url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'), url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'),
url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
) )
lms/envs/common.py
...@@ -1644,13 +1644,6 @@ PIPELINE_JS = { ...@@ -1644,13 +1644,6 @@ PIPELINE_JS = {
'source_filenames': main_vendor_js, 'source_filenames': main_vendor_js,
'output_filename': 'js/lms-main_vendor.js', 'output_filename': 'js/lms-main_vendor.js',
}, },
'lms_bootstrap': {
'source_filenames': [
'common/js/vendor/tether.js',
'common/js/vendor/bootstrap.js',
],
'output_filename': 'js/lms-bootstrap.js',
},
'module-descriptor-js': { 'module-descriptor-js': {
'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'), 'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'),
'output_filename': 'js/lms-module-descriptors.js', 'output_filename': 'js/lms-module-descriptors.js',
......
lms/static/sass/_build-lms-v2.scss
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
// LMS: Shared Build Compile // LMS: Shared Build Compile
// Version 2 - introduces the Pattern Library // Version 2 - introduces the Pattern Library
// Configuration // Configuration
@import 'config'; @import 'config';
@import 'base/variables'; @import 'base/variables';
......
lms/static/sass/bootstrap/_components.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// Page banner // Page banner
.page-banner { .page-banner {
max-width: $lms-max-width; max-width: map-get($container-max-widths, xl);
margin: 0 auto; margin: 0 auto;
.user-messages { .user-messages {
......
lms/static/sass/bootstrap/_footer.scss
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
// ==================== // ====================
.wrapper-footer { .wrapper-footer {
box-shadow: 0 -1px 5px 0 $black-t0; box-shadow: 0 -1px 5px 0 $gray-900;
border-top: 1px solid $navbar-light-disabled-color; border-top: 1px solid $navbar-light-disabled-color;
background-color: $footer-bg; background-color: $body-bg;
margin-top: $baseline/2; margin-top: $baseline/2;
padding: $baseline; padding: $baseline;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
footer { footer {
max-width: $lms-max-width; max-width: map-get($container-max-widths, xl);
margin: 0 auto; margin: 0 auto;
.site-nav { .site-nav {
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
.nav-link { .nav-link {
text-decoration: none; text-decoration: none;
padding: 0; padding: 0;
color: $brand-inverse; color: $gray-900;
&:hover { &:hover {
color: $brand-primary; color: theme-color("primary");
} }
} }
} }
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
.copyright { .copyright {
margin-top: $baseline; margin-top: $baseline;
font-size: $font-size-xs; font-size: $font-size-sm;
color: $gray-dark; color: theme-color("primary");
} }
.footer-about-openedx { .footer-about-openedx {
......
lms/static/sass/bootstrap/_layouts.scss
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
.nav-item { .nav-item {
&.active, &:hover{ &.active, &:hover{
.nav-link { .nav-link {
border-bottom-color: $brand-primary; border-bottom-color: theme-color("primary");
color: $brand-primary; color: theme-color("primary");
} }
} }
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
border-width: 0 0 $baseline/5 0; border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent; border-bottom-color: transparent;
@media (max-width: map-get($grid-breakpoints, md)) { @include media-breakpoint-down(md) {
border: none; border: none;
text-align: left; text-align: left;
padding: 0 0 $baseline/2 0; padding: 0 0 $baseline/2 0;
...@@ -30,11 +30,11 @@ ...@@ -30,11 +30,11 @@
} }
.main-container { .main-container {
border: 1px solid $inverse-color; border: 1px solid $border-color;
background-color: $body-bg; background-color: $body-bg;
.page-header { .page-header {
border-bottom: 1px solid $inverse-color; border-bottom: 1px solid $border-color;
padding: 20px; padding: 20px;
} }
...@@ -44,6 +44,6 @@ ...@@ -44,6 +44,6 @@
} }
&.container-fluid { &.container-fluid {
max-width: $lms-max-width; max-width: map-get($container-max-widths, xl);
} }
} }
lms/static/sass/bootstrap/_navigation.scss
// Local overrides for bootstrap navigation bar theming // Local overrides for bootstrap navigation bar theming
.navigation-container { .navigation-container {
border-bottom: 1px solid $brand-primary; border-bottom: 1px solid theme-color("primary");
text-decoration: none; text-decoration: none;
background-color: $header-bg; background-color: $body-bg;
&.slim { &.slim {
border-bottom: 1px solid $inverse-color; border-bottom: 1px solid $border-color;
box-shadow: 0 1px 5px 0 $black-t0; box-shadow: 0 1px 5px 0 $gray-900;
} }
.navbar { .navbar {
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
list-style: none; list-style: none;
.nav-link { .nav-link {
color: $brand-primary; color: theme-color("primary");
} }
.user-image-frame { .user-image-frame {
...@@ -48,13 +48,13 @@ ...@@ -48,13 +48,13 @@
display: none; display: none;
} }
@media (max-width: map-get($grid-breakpoints,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;
a { a {
color: $brand-primary; color: theme-color("primary");
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
...@@ -74,10 +74,10 @@ ...@@ -74,10 +74,10 @@
} }
.navbar-right .nav-item { .navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,md)) { @include media-breakpoint-down(md) {
.nav-link { .nav-link {
text-transform: none; text-transform: none;
color: $brand-inverse; color: $gray-900;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
cursor: pointer; cursor: pointer;
} }
......
lms/static/sass/bootstrap/_variables.scss
...@@ -11,61 +11,3 @@ ...@@ -11,61 +11,3 @@
// #UNITS // #UNITS
// ---------------------------- // ----------------------------
$baseline: 20px !default; $baseline: 20px !default;
// ----------------------------
// #GRID
// ----------------------------
$lms-max-width: 1180px !default;
// ----------------------------
// #COLORS
// ----------------------------
$lms-gray: palette(grayscale, base) !default;
$lms-background-color: palette(grayscale, x-back) !default;
$lms-container-background-color: $white !default;
$lms-border-color: palette(grayscale, back) !default;
$lms-label-color: palette(grayscale, black) !default;
$lms-active-color: palette(primary, base) !default;
$lms-preview-menu-color: #c8c8c8 !default;
$success-color: palette(success, accent) !default;
$success-color-hover: palette(success, text) !default;
$button-bg-hover-color: $white !default;
$white-transparent: rgba(255, 255, 255, 0) !default;
$white-opacity-40: rgba(255, 255, 255, 0.4) !default;
$white-opacity-60: rgba(255, 255, 255, 0.6) !default;
$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
$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;
$light-grey-transparent: rgba(200,200,200, 0) !default;
$light-grey-solid: rgba(200,200,200, 1) !default;
$header-bg: $white !default;
$footer-bg: $white !default;
// ----------------------------
// #TYPOGRAPHY
// ----------------------------
$font-light: 300 !default;
$font-regular: 400 !default;
$font-semibold: 600 !default;
$font-bold: 700 !default;
// ----------------------------
// #ICONS
// ----------------------------
// Icons
$lms-dark-icon-color: $white !default;
$lms-dark-icon-background-color: palette(grayscale, black) !default;
$site-status-color: rgb(182,37,103) !default;
$shadow-l1: rgba(0,0,0,0.1) !default;
lms/static/sass/bootstrap/lms-main.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
// Bootstrap theme // Bootstrap theme
@import 'bootstrap/theme'; @import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap'; @import 'bootstrap/scss/bootstrap';
@import 'bootstrap/scss/mixins';
// Variables // Variables
@import 'variables'; @import 'variables';
......
lms/static/sass/features/_learner-profile.scss
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
height: $profile-image-dimension; height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2); border-radius: ($profile-image-dimension/2);
overflow: hidden; overflow: hidden;
border: 3px solid $gray-lightest; border: 3px solid $gray-l6;
margin-top: $baseline*-0.75; margin-top: $baseline*-0.75;
background: $white; background: $white;
} }
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
.wrapper-profile { .wrapper-profile {
min-height: 200px; min-height: 200px;
background-color: $gray-lightest; background-color: $gray-l6;
.ui-loading-indicator { .ui-loading-indicator {
margin-top: 100px; margin-top: 100px;
...@@ -379,7 +379,7 @@ ...@@ -379,7 +379,7 @@
&:not(:last-child) { &:not(:last-child) {
padding-bottom: $baseline/4; padding-bottom: $baseline/4;
border-bottom: 1px solid $gray-lighter; border-bottom: 1px solid $border-color;
&:hover.mode-placeholder { &:hover.mode-placeholder {
padding-bottom: $baseline/5; padding-bottom: $baseline/5;
...@@ -464,6 +464,7 @@ ...@@ -464,6 +464,7 @@
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
color: $gray-d3;
width: 100%; width: 100%;
font: $font-semibold 1.4em/1.4em $sans-serif; font: $font-semibold 1.4em/1.4em $sans-serif;
} }
......
lms/static/sass/partials/base/_variables.scss
...@@ -223,10 +223,6 @@ $success-color-hover: rgb(0, 129, 0) !default; ...@@ -223,10 +223,6 @@ $success-color-hover: rgb(0, 129, 0) !default;
// ---------------------------- // ----------------------------
// #COLORS- Bootstrap-style // #COLORS- Bootstrap-style
// ---------------------------- // ----------------------------
$gray-dark: #4e5455 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$state-success-text: $black !default; $state-success-text: $black !default;
$state-success-bg: #dff0d8 !default; $state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default; $state-success-border: darken($state-success-bg, 5%) !default;
...@@ -248,7 +244,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default; ...@@ -248,7 +244,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default;
// ---------------------------- // ----------------------------
// logo colors // logo colors
$audit-mode-color: $gray-dark !default; $audit-mode-color: rgb(74,74,74) !default;
$honor-mode-color: $uxpl-blue-base !default; $honor-mode-color: $uxpl-blue-base !default;
$verified-mode-color: $uxpl-green-base !default; $verified-mode-color: $uxpl-green-base !default;
$micromasters-color: #005585 !default; $micromasters-color: #005585 !default;
......
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-toggleable-sm navbar-light" aria-label="${_('About')}"> <nav class="navbar site-nav navbar-expand-sm navbar-light" 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-toggleable-sm navbar-light" aria-label="${_('Legal')}"> <nav class="navbar legal-nav navbar-expand-sm navbar-light" 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/main.html
## xss-lint: disable=mako-missing-default
## coding=utf-8 ## coding=utf-8
## This is the main Mako template that all page templates should include. ## This is the main Mako template that all page templates should include.
...@@ -63,7 +65,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -63,7 +65,7 @@ from pipeline_mako import render_require_js_path_overrides
<link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" /> <link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
<%static:css group='style-vendor'/> <%static:css group='style-vendor'/>
% if uses_bootstrap: % if uses_bootstrap or '/' in self.attr.main_css:
<link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" /> <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
% else: % else:
<%static:css group='${self.attr.main_css}'/> <%static:css group='${self.attr.main_css}'/>
...@@ -77,12 +79,14 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -77,12 +79,14 @@ from pipeline_mako import render_require_js_path_overrides
<%static:js group='application'/> <%static:js group='application'/>
% endif % endif
<%static:webpack entry="commons"/>
% if uses_bootstrap: % if uses_bootstrap:
<%static:js group='lms_bootstrap'/> ## xss-lint: disable=mako-invalid-js-filter
<script type="text/javascript" src="${static.url('common/js/vendor/popper.js')}"></script>
<script type="text/javascript" src="${static.url('common/js/vendor/bootstrap.js')}"></script>
% endif % endif
<%static:webpack entry="commons"/>
<script> <script>
window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}"; window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
(function (require) { (function (require) {
......
lms/templates/navigation/navigation.html
...@@ -51,11 +51,11 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -51,11 +51,11 @@ 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-toggleable-sm navbar-light"> <nav class="navbar navbar-expand-lg navbar-light">
<%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>
<%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
% if user.is_authenticated(): % if user.is_authenticated():
<%include file="bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/> <%include file="bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else: % else:
......
lms/templates/ux/reference/bootstrap/course-skeleton.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<%block name="bodyclass">course-skeleton</%block> <%block name="bodyclass">course-skeleton</%block>
<%block name="content"> <%block name="content">
<nav class="navbar course-tabs pb-0 navbar-toggleable-sm navbar-light"> <nav class="navbar course-tabs pb-0 navbar-expand-lg navbar-light">
<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>
......
lms/templates/ux/reference/bootstrap/unit-page.html 0 → 100644
## mako
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/lms-main.css" %>
<%page expression_filter="h"/>
<%namespace name='static' file='/static_content.html'/>
<%inherit file="/main.html" />
<%block name="pagetitle">Course Skeleton</%block>
<%block name="bodyclass">view-in-course view-courseware courseware</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
</%block>
<%block name="content">
<nav class="navbar course-tabs pb-0 navbar-expand-lg navbar-light">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Discussion</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Wiki</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Progress</a>
</li>
</ul>
</nav>
<%include file="../fragments/unit-fragment.html"/>
</%block>
lms/templates/ux/reference/index.html
...@@ -23,16 +23,19 @@ ...@@ -23,16 +23,19 @@
<h3>v1-style LMS Pages</h3> <h3>v1-style LMS Pages</h3>
<ul> <ul>
<li><a href="v1/course-skeleton.html">Course skeleton page</a></li> <li><a href="v1/course-skeleton.html">Course skeleton page</a></li>
<li><a href="v1/unit-page.html">Unit page</a></li>
</ul> </ul>
<h3>Pattern Library</h3> <h3>Pattern Library</h3>
<ul> <ul>
<li><a href="pattern-library/course-skeleton.html">Course skeleton page</a></li> <li><a href="pattern-library/course-skeleton.html">Course skeleton page</a></li>
<li><a href="pattern-library/unit-page.html">Unit page</a></li>
</ul> </ul>
<h3>Bootstrap</h3> <h3>Bootstrap</h3>
<ul> <ul>
<li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li> <li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li>
<li><a href="bootstrap/unit-page.html">Unit page</a></li>
</ul> </ul>
</section> </section>
</article> </article>
......
lms/templates/ux/reference/pattern-library/unit-page.html 0 → 100644
## mako
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/>
<%namespace name='static' file='/static_content.html'/>
<%inherit file="/main.html" />
<%block name="pagetitle">Course Skeleton</%block>
<%block name="bodyclass">view-in-course view-courseware courseware</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
</%block>
<%block name="content">
<nav class="wrapper-course-material">
<div class="course-material">
<ol class="tabs course-tabs">
<li class="tab">
<a href="index.html">
Home
</a>
</li>
<li class="tab">
<a href="#">
Course
</a>
</li>
<li class="tab">
<a href="#" class="active">
Skeleton
<span class="sr-only">, current location</span>
</a>
</li>
</ol>
</div>
</nav>
<%include file="../fragments/unit-fragment.html"/>
</%block>
lms/templates/ux/reference/v1/unit-page.html 0 → 100644
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='/static_content.html'/>
<%inherit file="/main.html" />
<%block name="pagetitle">Course Skeleton</%block>
<%block name="bodyclass">view-in-course view-courseware courseware</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
</%block>
<%block name="content">
<nav class="wrapper-course-material">
<div class="course-material">
<ol class="tabs course-tabs">
<li class="tab">
<a href="index.html">
Home
</a>
</li>
<li class="tab">
<a href="#">
Course
</a>
</li>
<li class="tab">
<a href="#" class="active">
Skeleton
<span class="sr-only">, current location</span>
</a>
</li>
</ol>
</div>
</nav>
<%include file="../fragments/unit-fragment.html"/>
</%block>
lms/urls.py
...@@ -998,10 +998,8 @@ if settings.DEBUG: ...@@ -998,10 +998,8 @@ if settings.DEBUG:
settings.PROFILE_IMAGE_BACKEND['options']['base_url'], settings.PROFILE_IMAGE_BACKEND['options']['base_url'],
document_root=settings.PROFILE_IMAGE_BACKEND['options']['location'] document_root=settings.PROFILE_IMAGE_BACKEND['options']['location']
) )
# TODO: re-enable this after removing the URL below
# urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template')
# TODO: DO NOT MERGE # UX reference templates
urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'), urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
if 'debug_toolbar' in settings.INSTALLED_APPS: if 'debug_toolbar' in settings.INSTALLED_APPS:
......
openedx/core/djangoapps/debug/views.py
...@@ -28,7 +28,6 @@ def show_reference_template(request, template): ...@@ -28,7 +28,6 @@ def show_reference_template(request, template):
uses_bootstrap = not uses_pattern_library and not is_v1 uses_bootstrap = not uses_pattern_library and not is_v1
context = { context = {
'request': request, 'request': request,
'disable_courseware_js': not is_v1,
'uses_pattern_library': uses_pattern_library, 'uses_pattern_library': uses_pattern_library,
'uses_bootstrap': uses_bootstrap, 'uses_bootstrap': uses_bootstrap,
} }
......
package.json
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
"backbone.paginator": "~2.0.3", "backbone.paginator": "~2.0.3",
"coffee-loader": "^0.7.3", "coffee-loader": "^0.7.3",
"coffee-script": "1.6.1", "coffee-script": "1.6.1",
"edx-bootstrap": "~0.1.7", "edx-bootstrap": "^0.2.1",
"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",
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"moment": "^2.15.1", "moment": "^2.15.1",
"moment-timezone": "~0.5.5", "moment-timezone": "~0.5.5",
"picturefill": "~3.0.2", "picturefill": "~3.0.2",
"popper.js": "~1.12.5",
"prop-types": "^15.5.10", "prop-types": "^15.5.10",
"raw-loader": "^0.5.1", "raw-loader": "^0.5.1",
"react": "^15.5.4", "react": "^15.5.4",
......
pavelib/assets.py
...@@ -59,8 +59,8 @@ NPM_INSTALLED_LIBRARIES = [ ...@@ -59,8 +59,8 @@ NPM_INSTALLED_LIBRARIES = [
'moment-timezone/builds/moment-timezone-with-data.js', 'moment-timezone/builds/moment-timezone-with-data.js',
'moment/min/moment-with-locales.js', 'moment/min/moment-with-locales.js',
'picturefill/dist/picturefill.js', 'picturefill/dist/picturefill.js',
'popper.js/dist/umd/popper.js',
'requirejs/require.js', 'requirejs/require.js',
'tether/dist/js/tether.js',
'underscore.string/dist/underscore.string.js', 'underscore.string/dist/underscore.string.js',
'underscore/underscore.js', 'underscore/underscore.js',
] ]
...@@ -73,7 +73,7 @@ NPM_INSTALLED_DEVELOPER_LIBRARIES = [ ...@@ -73,7 +73,7 @@ NPM_INSTALLED_DEVELOPER_LIBRARIES = [
] ]
# Directory to install static vendor files # Directory to install static vendor files
NPM_VENDOR_DIRECTORY = path("common/static/common/js/vendor") NPM_VENDOR_DIRECTORY = path('common/static/common/js/vendor')
# system specific lookup path additions, add sass dirs if one system depends on the sass files for other systems # system specific lookup path additions, add sass dirs if one system depends on the sass files for other systems
SASS_LOOKUP_DEPENDENCIES = { SASS_LOOKUP_DEPENDENCIES = {
...@@ -81,7 +81,10 @@ SASS_LOOKUP_DEPENDENCIES = { ...@@ -81,7 +81,10 @@ SASS_LOOKUP_DEPENDENCIES = {
} }
# Collectstatic log directory setting # Collectstatic log directory setting
COLLECTSTATIC_LOG_DIR_ARG = "collect_log_dir" COLLECTSTATIC_LOG_DIR_ARG = 'collect_log_dir'
# Webpack command
WEBPACK_COMMAND = 'STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack {options}'
def get_sass_directories(system, theme_dir=None): def get_sass_directories(system, theme_dir=None):
...@@ -707,25 +710,37 @@ def execute_compile_sass(args): ...@@ -707,25 +710,37 @@ def execute_compile_sass(args):
) )
def execute_webpack(prod, settings=None): @task
sh( @cmdopts([
cmd( ('settings=', 's', "Django settings (defaults to devstack)"),
"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack" ('watch', 'w', "Watch file system and rebuild on change (defaults to off)"),
.format( ])
node_env="production" if prod else "development", @timed
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings), def webpack(options):
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings) """
) Run a Webpack build.
) """
settings = getattr(options, 'settings', Env.DEVSTACK_SETTINGS)
environment = 'NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms}'.format(
node_env="production" if settings != Env.DEVSTACK_SETTINGS else "development",
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings),
) )
sh(cmd('{environment} $(npm bin)/webpack'.format(environment=environment)))
def execute_webpack_watch(settings=None): def execute_webpack_watch(settings=None):
"""
Run the Webpack file system watcher.
"""
# We only want Webpack to re-run on changes to its own entry points,
# not all JS files, so we use its own watcher instead of subclassing
# from Watchdog like the other watchers do.
run_background_process( run_background_process(
"STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack --watch --watch-poll=200" 'STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack {options}'.format(
.format( options='--watch --watch-poll=200',
static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings), static_root_lms=Env.get_django_setting("STATIC_ROOT", "lms", settings=settings),
static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings) static_root_cms=Env.get_django_setting("STATIC_ROOT", "cms", settings=settings),
) )
) )
...@@ -797,13 +812,12 @@ def watch_assets(options): ...@@ -797,13 +812,12 @@ def watch_assets(options):
print("Starting asset watcher...") print("Starting asset watcher...")
observer.start() observer.start()
# We only want Webpack to re-run on changes to its own entry points, not all JS files, so we use its own watcher # Run the Webpack file system watcher too
# instead of subclassing from Watchdog like the other watchers do
execute_webpack_watch(settings=Env.DEVSTACK_SETTINGS) execute_webpack_watch(settings=Env.DEVSTACK_SETTINGS)
if not getattr(options, 'background', False): if not getattr(options, 'background', False):
# when running as a separate process, the main thread needs to loop # when running as a separate process, the main thread needs to loop
# in order to allow for shutdown by contrl-c # in order to allow for shutdown by control-c
try: try:
while True: while True:
observer.join(2) observer.join(2)
...@@ -861,7 +875,9 @@ def update_assets(args): ...@@ -861,7 +875,9 @@ def update_assets(args):
process_xmodule_assets() process_xmodule_assets()
process_npm_assets() process_npm_assets()
compile_coffeescript() compile_coffeescript()
execute_webpack(prod=(args.settings != Env.DEVSTACK_SETTINGS), settings=args.settings)
# Build Webpack
call_task('pavelib.assets.webpack', options={'settings': args.settings})
# Compile sass for themes and system # Compile sass for themes and system
execute_compile_sass(args) execute_compile_sass(args)
......
themes/edx.org/lms/templates/header.html
...@@ -53,10 +53,7 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -53,10 +53,7 @@ site_status_msg = get_site_status_msg(course_id)
% endif % endif
% if uses_bootstrap: % if uses_bootstrap:
<nav class="navbar navbar-toggleable-md navbar-light" aria-label="${_('Main')}"> <nav class="navbar navbar-expand-lg navbar-light" aria-label="${_('Main')}">
<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>
</button>
<h1 class="hd logo-header"> <h1 class="hd logo-header">
<div class="logo"> <div class="logo">
<a class="navbar-brand" href="${marketing_link('ROOT')}" itemprop="url"> <a class="navbar-brand" href="${marketing_link('ROOT')}" itemprop="url">
...@@ -71,6 +68,9 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -71,6 +68,9 @@ site_status_msg = get_site_status_msg(course_id)
</div> </div>
% endif % endif
</h1> </h1>
<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>
</button>
% if user.is_authenticated(): % if user.is_authenticated():
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
% if not course or disable_courseware_header: % if not course or disable_courseware_header:
......
themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss
...@@ -3,11 +3,25 @@ ...@@ -3,11 +3,25 @@
// Theme colors // Theme colors
// //
// Note: define colors needed by your theme first // Note: define colors needed by your theme first
$red: #d9534f;
$brand-primary: $red; // Define the primary red color
$red: #d9534f !default;
// Theme fonts // Theme fonts
$font-family-sans-serif: cursive; $font-family-sans-serif: cursive;
// Initialize the Open edX bootstrap theme // Initialize the Open edX Bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme'; @import 'edx-bootstrap/sass/open-edx/theme';
// Override the theme to use red as primary
$theme-colors: ();
$theme-colors: map-merge((
primary: $red,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
), $theme-colors);
themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
...@@ -3,11 +3,25 @@ ...@@ -3,11 +3,25 @@
// Theme colors // Theme colors
// //
// Note: define colors needed by your theme first // Note: define colors needed by your theme first
// Define the primary red color
$red: #d9534f !default; $red: #d9534f !default;
$brand-primary: $red;
// Theme fonts // Theme fonts
$font-family-sans-serif: cursive; $font-family-sans-serif: cursive;
// Initialize the Open edX bootstrap theme // Initialize the Open edX Bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme'; @import 'edx-bootstrap/sass/open-edx/theme';
// Override the theme to use red as primary
$theme-colors: ();
$theme-colors: map-merge((
primary: $red,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
), $theme-colors);
webpack.config.js
...@@ -18,15 +18,18 @@ var wpconfig = { ...@@ -18,15 +18,18 @@ var wpconfig = {
context: __dirname, context: __dirname,
entry: { entry: {
// Studio
Import: './cms/static/js/features/import/factories/import.js',
StudioIndex: './cms/static/js/features_jsx/studio/index.jsx',
// Features
CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js', CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js',
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js', CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js', CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js', CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',
LatestUpdate: './openedx/features/course_experience/static/course_experience/js/LatestUpdate.js',
WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js',
Enrollment: './openedx/features/course_experience/static/course_experience/js/Enrollment.js', Enrollment: './openedx/features/course_experience/static/course_experience/js/Enrollment.js',
Import: './cms/static/js/features/import/factories/import.js', LatestUpdate: './openedx/features/course_experience/static/course_experience/js/LatestUpdate.js',
StudioIndex: './cms/static/js/features_jsx/studio/index.jsx' WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js'
}, },
output: { output: {
......
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