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

Update to use Bootstrap beta release

Browse Source 
FEDX-375
This commit is contained in:
Andy Armstrong
2017-09-01 14:59:04 -04:00
parent a51b9597e2
commit 6e10d2a556
43 changed files with 1886 additions and 1597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/envs/common.py
View File

@@ -722,7 +722,7 @@ base_vendor_js = [
'edx-ui-toolkit/js/utils/html-utils.js',
# Load Bootstrap and supporting libraries
'common/js/vendor/tether.js',
'common/js/vendor/popper.js',
'common/js/vendor/bootstrap.js',
# Finally load RequireJS

4
cms/static/sass/bootstrap/_base.scss
View File

@@ -9,3 +9,7 @@
.is-hidden {
display: none;
}
.sr {
@include sr-only();
}

22
cms/static/sass/bootstrap/_components.scss
View File

@@ -4,7 +4,7 @@
// Skip nav
.nav-skip,
.transcript-skip {
font-size: 14px;
font-size: $font-size-base;
line-height: 14px;
display: inline-block;
position: absolute;
@@ -12,7 +12,7 @@
top: -($baseline*30);
overflow: hidden;
background: $white;
border-bottom: 1px solid $gray-lightest;
border-bottom: 1px solid $gray-500;
padding: ($baseline*0.75) ($baseline/2);
&:focus,
@@ -47,7 +47,7 @@
@include clearfix();
position: relative;
margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-light;
border-top: 1px solid $gray-500;
width: 100%;
.wrapper-inner {
@@ -70,17 +70,17 @@
.cta-show-sock {
@extend %ui-btn-pill;
@extend %t-action4;
background: $gray-lightest;
background: theme-color("light");
padding: ($baseline/2) $baseline;
color: $gray-light;
color: theme-color("dark");
.icon {
margin-right: $baseline/4;
}
&:hover {
background: $brand-primary;
color: $white;
background: theme-color("primary");
color: theme-color("inverse");
}
}
}
@@ -93,7 +93,7 @@
width: flex-grid(12);
margin: 0 auto;
padding: ($baseline*2) 0;
color: $gray-light;
color: $gray-500;
// support body
header {
@@ -184,11 +184,11 @@
// case: sock content is shown
&.is-shown {
border-color: $gray-dark;
border-color: theme-color("primary");
.list-cta .cta-show-sock {
background: $gray-dark;
border-color: $gray-dark;
background: theme-color("primary");
border-color: theme-color("primary");
color: $white;
}
}

2
cms/static/sass/bootstrap/_footer.scss
View File

@@ -18,7 +18,7 @@
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-light;
color: $gray-500;
.footer-content-primary {
@include clearfix();

105
cms/static/sass/bootstrap/_header.scss
View File

@@ -46,6 +46,7 @@
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
}
.user-language-selector {
@@ -78,7 +79,7 @@
}
.nav-item a {
color: $gray;
color: color("gray");
&:hover {
color: $link-hover-color;
@@ -90,16 +91,8 @@
.nav-dd {
.title {
@extend %t-action2;
@extend %ui-btn-dd-nav-primary;
.label, .fa-caret-down {
}
.label {
}
padding: $baseline/2 $baseline/2;
font-size: $font-size-lg;
.fa-caret-down {
opacity: 0.25;
@@ -144,11 +137,11 @@
// specific elements - course name/info
.info-course {
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;
.course-org, .course-number {
font-size: 12px;
font-size: $font-size-sm;
line-height: 12px;
display: inline-block;
vertical-align: middle;
@@ -157,7 +150,7 @@
white-space: nowrap;
text-overflow: ellipsis;
opacity: 1.0;
color: $gray-dark;
color: theme-color("primary");
}
.course-org {
@@ -177,7 +170,7 @@
// entire link
.course-link {
display: block;
color: $gray-dark;
color: theme-color("primary");
&:hover {
color: $link-hover-color;
@@ -406,7 +399,7 @@
box-shadow: 0 1px 1px $shadow-l1;
position: relative;
width: 100%;
border: 1px solid $gray-light;
border: 1px solid $gray-500;
padding: ($baseline/2) ($baseline*0.75);
background: $white;
@@ -429,7 +422,7 @@
&:before {
border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-light;
border-bottom-color: $gray-500;
border-width: 11px;
}
@@ -438,7 +431,7 @@
@extend %t-regular;
display: block;
margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-lighter;
border-bottom: 1px solid $gray-300;
padding: 0 0($baseline/4) 0;
&:last-child {
@@ -447,11 +440,18 @@
padding-bottom: 0;
}
h3 {
font-size: $font-size-lg;
}
a {
display: block;
color: $body-color;
font-size: $font-size-lg;
font-weight: 600;
&:hover, &:active {
color: $brand-primary;
color: theme-color("primary");
}
}
}
@@ -483,6 +483,10 @@
// CASE: right-hand side arrow/dd
&.ui-right {
> ol {
margin-bottom: 0;
}
.wrapper-nav-sub {
left: none;
right: 0;
@@ -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;
}
}

93
cms/static/sass/bootstrap/_layouts.scss
View File

@@ -15,8 +15,8 @@
.nav-item {
&.active, &:hover{
.nav-link {
border-bottom-color: $brand-primary;
color: $brand-primary;
border-bottom-color: theme-color("primary");
color: theme-color("primary");
}
}
@@ -26,7 +26,7 @@
border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent;
@media (max-width: map-get($grid-breakpoints, md)) {
@include media-breakpoint-down(md) {
border: none;
text-align: left;
padding: 0 0 $baseline/2 0;
@@ -36,11 +36,11 @@
}
.main-container {
border: 1px solid $inverse-color;
border: 1px solid $border-color;
background-color: $body-bg;
.page-header {
border-bottom: 1px solid $inverse-color;
border-bottom: 1px solid $border-color;
padding: 20px;
}
@@ -78,16 +78,22 @@
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto $baseline auto;
color: $gray-dark;
color: $body-color;
}
.mast {
border-bottom: 1px solid $gray-light;
border-bottom: 1px solid $border-color;
padding-bottom: ($baseline/2);
// layout without actions
.page-header {
width: flex-grid(12);
display: flex;
flex-direction: column;
.subtitle {
font-size: $font-size-base;
margin-bottom: $baseline/4;
}
}
// layout with actions
@@ -162,30 +168,30 @@
display: inline-block;
vertical-align: bottom; // correct for extra padding in FF
max-width: 250px;
color: $gray-dark;
color: $body-color;
&.navigation-current {
@extend %ui-disabled;
color: $gray;
color: color("gray");
max-width: 250px;
&:before {
color: $gray;
color: color("gray");
}
}
}
.navigation-link:hover {
color: $brand-primary;
color: theme-color("primary");
}
.navigation-item:before {
content: " / ";
margin: ($baseline/4);
color: $gray;
color: color("gray");
&:hover {
color: $gray;
color: color("gray");
}
}
@@ -201,7 +207,7 @@
.page-header-sub {
@extend %t-title4;
color: $gray;
color: color("gray");
font-weight: 300;
}
@@ -210,7 +216,7 @@
float: left;
width: flex-grid(12,12);
margin-top: ($baseline/2);
border-top: 1px solid $gray-lighter;
border-top: 1px solid $border-color;
padding-top: ($baseline/2);
font-weight: 600;
}
@@ -224,30 +230,37 @@
// layout - basic page content
.wrapper-content {
margin: 0;
padding: 0 $baseline;
position: relative;
@include make-container();
@include make-container-max-widths();
}
// Specify a two column layout for content
.content {
@include clearfix();
@extend %t-copy-base;
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-dark;
@include make-row();
@media (min-width: 576px) {
.content-primary {
flex: 0 0 66.67%;
max-width: 66.67%;
}
.content-supplementary {
flex: 0 0 25%;
max-width: 25%;
}
}
header {
position: relative;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-lighter;
border-bottom: 1px solid $gray-300;
padding-bottom: ($baseline/2);
.title-sub {
@extend %t-copy-sub1;
display: block;
margin: 0;
color: $gray-light;
color: $gray-500;
}
.title-1 {
@@ -255,31 +268,17 @@
@extend %t-strong;
margin: 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
.content-primary {
border: 1px solid theme-color("dark");
background-color: theme-color("inverse");
padding: $baseline ($baseline*1.5);
margin-right: $baseline;
.title-1 {
@extend %t-title3;
@@ -310,7 +309,7 @@
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-dark;
color: theme-color("primary");
}
}
}

14
cms/static/sass/bootstrap/_navigation.scss
View File

@@ -1,11 +1,11 @@
// Local overrides for bootstrap navigation bar theming
.navigation-container {
border-bottom: 2px solid $brand-primary;
border-bottom: 2px solid theme-color("primary");
text-decoration: none;
background-color: $header-bg;
&.slim {
border-bottom: 1px solid $inverse-color;
border-bottom: 1px solid $border-color;
box-shadow: 0 1px 5px 0 $black-t0;
}
@@ -35,7 +35,7 @@
list-style: none;
.nav-link {
color: $brand-primary;
color: theme-color("primary");
}
.user-image-frame {
@@ -48,13 +48,13 @@
display: none;
}
@media (max-width: map-get($grid-breakpoints,md)) {
@include media-breakpoint-down(md) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
display: initial;
margin: $baseline/4 $baseline/2;
a {
color: $brand-primary;
color: theme-color("primary");
padding: 0;
text-decoration: none;
@@ -74,10 +74,10 @@
}
.navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,md)) {
@include media-breakpoint-down(md) {
.nav-link {
text-transform: none;
color: $brand-inverse;
color: $gray-900;
font-weight: $font-weight-bold;
cursor: pointer;
}

4
cms/templates/base.html
View File

@@ -1,3 +1,5 @@
## xss-lint: disable=mako-missing-default
## coding=utf-8
## Pages currently use v1 styling by default. Once the Pattern Library
@@ -102,7 +104,7 @@ from openedx.core.djangolib.markup import HTML
</div>
<main id="main" aria-label="Content" tabindex="-1">
<div id="content" class="content">
<div id="content">
<%block name="content"></%block>
</div>
</main>

14
cms/templates/ux/reference/bootstrap/course-settings.html Normal file
View File

@@ -0,0 +1,14 @@
## 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>

397
cms/templates/ux/reference/bootstrap/test.html
View File

@@ -1,397 +0,0 @@
## 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">
<div class="wrapper-mast wrapper">
<header class="mast has-actions has-subtitle">
<h1 class="page-header">
<small class="subtitle">Content</small>
<span class="sr">&gt; </span>Course Outline
</h1>
<nav class="nav-actions" aria-label="Page Actions">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-default-name="Section" title="Click to add a new section">
<span class="icon fa fa-plus" aria-hidden="true"></span>New Section
</a>
</li>
<li class="nav-item">
<a href="/course/course-v1:AndyA+AA101+1/search_reindex" class="button button-reindex" data-category="reindex" title="Reindex current course">
<span class="icon-arrow-right" aria-hidden="true"></span>Reindex
</a>
</li>
<li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
<span class="collapse-all"><span class="icon fa fa-arrow-up" aria-hidden="true"></span> <span class="label">Collapse All Sections</span></span>
<span class="expand-all"><span class="icon fa fa-arrow-down" aria-hidden="true"></span> <span class="label">Expand All Sections</span></span>
</a>
</li>
<li class="nav-item">
<a href="//localhost:8000/courses/course-v1:AndyA+AA101+1/jump_to/block-v1:AndyA+AA101+1+type@course+block@course" rel="external" class="button view-button view-live-button" title="Click to open the courseware in the LMS in a new tab" target="_blank">View Live</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="course-status">
<div class="status-release">
<h2 class="status-release-label">Course Start Date:</h2>
<p class="status-release-value">Jan 01, 2015 at 00:00 UTC</p>
<ul class="status-actions">
<li class="action-item action-edit">
<a href="/settings/details/course-v1:AndyA+AA101+1" class="edit-button action-button" data-tooltip="Edit Start Date">
<span class="icon fa fa-pencil" aria-hidden="true"></span>
<span class="action-button-text sr">Edit Start Date</span>
</a>
</li>
</ul>
</div>
</div>
<div class="wrapper-dnd" lang="en">
<h2 class="sr">Course Outline</h2>
<article class="outline outline-complex outline-course" data-locator="block-v1:AndyA+AA101+1+type@course+block@course" data-course-key="course-v1:AndyA+AA101+1">
<div class="outline-content course-content">
<ol class="list-sections is-sortable">
<li class="ui-splint ui-splint-indicator">
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
</li>
<li class="outline-item outline-section is-live is-draggable is-collapsible " data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-locator="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" style="position: relative;">
<span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
<div class="section-header">
<h3 class="section-header-details expand-collapse collapse ui-toggle-expansion" title="Collapse/Expand this section">
<span class="icon fa fa-caret-down" aria-hidden="true"></span>
<span class="wrapper-section-title wrapper-xblock-field incontext-editor is-editable" data-field="display_name" data-field-display-name="Display Name">
<span class="section-title item-title xblock-field-value incontext-editor-value">Section</span>
<div class="incontext-editor-action-wrapper">
<a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="Edit the name">
<span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> Edit</span>
</a>
</div>
<div class="xblock-string-field-editor incontext-editor-form">
<form>
<label><span class="sr">Edit Display Name (required)</span>
<input type="text" value="Section" class="xblock-field-input incontext-editor-input" data-metadata-name="display_name" title="Edit the name">
</label>
<button class="sr action action-primary" name="submit" type="submit">Save</button>
<button class="sr action action-secondary" name="cancel" type="button">Cancel</button>
</form>
</div>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<span class="icon fa fa-upload" aria-hidden="true"></span>
<span class="sr action-button-text">Publish</span>
</a>
</li>
<li class="action-item action-configure">
<a href="#" data-tooltip="Configure" class="configure-button action-button">
<span class="icon fa fa-gear" aria-hidden="true"></span>
<span class="sr action-button-text">Configure</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<span class="icon fa fa-copy" aria-hidden="true"></span>
<span class="sr action-button-text">Duplicate</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<span class="icon fa fa-trash-o" aria-hidden="true"></span>
<span class="sr action-button-text">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle section-drag-handle action">
<span class="sr">Drag to reorder</span>
</span>
</li>
</ul>
</div>
</div>
<div class="section-status">
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<span class="icon fa fa-check" aria-hidden="true"></span>
Released:
Jan 01, 2015 at 00:00 UTC
</span>
</p>
</div>
<div class="status-hide-after-due">
<p>
</p>
</div>
</div>
<div class="outline-content section-content">
<ol class="list-subsections is-sortable">
<li class="ui-splint ui-splint-indicator">
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
</li>
<li class="outline-item outline-subsection is-live is-draggable is-collapsible is-collapsed" data-parent="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" data-locator="block-v1:AndyA+AA101+1+type@sequential+block@dc1b2b84c9be4646a404f6425792eb90" style="position: relative;">
<span class="draggable-drop-indicator draggable-drop-indicator-before"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
<div class="subsection-header">
<h3 class="subsection-header-details expand-collapse expand ui-toggle-expansion" title="Collapse/Expand this subsection">
<span class="icon fa fa-caret-down" aria-hidden="true"></span>
<span class="wrapper-subsection-title wrapper-xblock-field incontext-editor is-editable" data-field="display_name" data-field-display-name="Display Name">
<span class="subsection-title item-title xblock-field-value incontext-editor-value">Subsection</span>
<div class="incontext-editor-action-wrapper">
<a href="" class="action-edit action-inline xblock-field-value-edit incontext-editor-open-action" title="Edit the name">
<span class="icon fa fa-pencil" aria-hidden="true"></span><span class="sr"> Edit</span>
</a>
</div>
<div class="xblock-string-field-editor incontext-editor-form">
<form>
<label><span class="sr">Edit Display Name (required)</span>
<input type="text" value="Subsection" class="xblock-field-input incontext-editor-input" data-metadata-name="display_name" title="Edit the name">
</label>
<button class="sr action action-primary" name="submit" type="submit">Save</button>
<button class="sr action action-secondary" name="cancel" type="button">Cancel</button>
</form>
</div>
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<span class="icon fa fa-upload" aria-hidden="true"></span>
<span class="sr action-button-text">Publish</span>
</a>
</li>
<li class="action-item action-configure">
<a href="#" data-tooltip="Configure" class="configure-button action-button">
<span class="icon fa fa-gear" aria-hidden="true"></span>
<span class="sr action-button-text">Configure</span>
</a>
</li>
<li class="action-item action-duplicate">
<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
<span class="icon fa fa-copy" aria-hidden="true"></span>
<span class="sr action-button-text">Duplicate</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<span class="icon fa fa-trash-o" aria-hidden="true"></span>
<span class="sr action-button-text">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle subsection-drag-handle action">
<span class="sr">Drag to reorder</span>
</span>
</li>
</ul>
</div>
</div>
<div class="subsection-status">
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<span class="icon fa fa-check" aria-hidden="true"></span>
Released:
Jan 01, 2015 at 00:00 UTC
</span>
</p>
</div>
<div class="status-hide-after-due">
<p>
</p>
</div>
</div>
<div class="outline-content subsection-content">
<ol class="list-units is-sortable">
<li class="ui-splint ui-splint-indicator">
<span class="draggable-drop-indicator draggable-drop-indicator-initial"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
</li>
</ol>
<div class="add-unit add-item">
<a href="#" class="button button-new" data-category="vertical" data-parent="block-v1:AndyA+AA101+1+type@sequential+block@dc1b2b84c9be4646a404f6425792eb90" data-default-name="Unit" title="Click to add a new Unit">
<span class="icon fa fa-plus" aria-hidden="true"></span>New Unit
</a>
</div>
</div>
<span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
</li></ol>
<div class="add-subsection add-item">
<a href="#" class="button button-new" data-category="sequential" data-parent="block-v1:AndyA+AA101+1+type@chapter+block@3a1a345f6bd94bb4abebe9e144cd03b6" data-default-name="Subsection" title="Click to add a new Subsection">
<span class="icon fa fa-plus" aria-hidden="true"></span>New Subsection
</a>
</div>
</div>
<span class="draggable-drop-indicator draggable-drop-indicator-after"><span class="icon fa fa-caret-right" aria-hidden="true"></span></span>
</li></ol>
<div class="add-section add-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="block-v1:AndyA+AA101+1+type@course+block@course" data-default-name="Section" title="Click to add a new Section">
<span class="icon fa fa-plus" aria-hidden="true"></span>New Section
</a>
</div>
</div>
</article>
</div>
<div class="ui-loading is-hidden">
<p><span class="spin"><span class="icon fa fa-refresh" aria-hidden="true"></span></span> <span class="copy">Loading</span></p>
</div>
</article>
<aside class="content-supplementary" role="complementary">
<div class="bit">
<h3 class="title-3">Creating your course organization</h3>
<p>You add sections, subsections, and units directly in the outline.</p>
<p>Create a section, then add subsections and units. Open a unit to add course components.</p>
</div>
<div class="bit">
<h3 class="title-3">Reorganizing your course</h3>
<p>Drag sections, subsections, and units to new locations in the outline.</p>
<div class="external-help">
<a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_outline.html" target="_blank" class="button external-help-button">Learn more about the course outline</a>
</div>
</div>
<div class="bit">
<h3 class="title-3">Setting release dates and grading policies</h3>
<p>Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.</p>
<div class="external-help">
<a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/grading/index.html" target="_blank" class="button external-help-button">Learn more about grading policy settings</a>
</div>
</div>
<div class="bit">
<h3 class="title-3">Changing the content learners see</h3>
<p>To publish draft content, select the Publish icon for a section, subsection, or unit.</p>
<p>To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate <strong>Hide</strong> option. Grades for hidden sections, subsections, and units are not included in grade calculations.</p>
<p>To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select <strong>Hide content after due date</strong>. Grades for the subsection remain included in grade calculations.</p>
<div class="external-help">
<a href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/controlling_content_visibility.html" target="_blank" class="button external-help-button">Learn more about content visibility settings</a>
</div>
</div>
</aside>
</section>
</div>
</%block>

527
cms/templates/ux/reference/fragments/course-settings.html Normal file
View File

File diff suppressed because one or more lines are too long

28
cms/templates/ux/reference/index.html
View File

@@ -9,17 +9,25 @@
<%block name="bodyclass">ux-reference</%block>
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="main-column">
<article class="window unit-body">
<h2>UX Style Reference</h2>
<div class="wrapper-content wrapper">
<div class="content">
<div class="content-primary">
<h2>UX Style Reference</h2>
<ul>
<a href="bootstrap/test.html">Bootstrap Test Page</a>
<a href="pattern-library/test.html">Pattern Library Test Page</a>
</ul>
</article>
<h3>v1-style Pages</h3>
<ul>
<li><a href="v1/course-settings.html">Course settings page</a></li>
</ul>
<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>

11
cms/templates/ux/reference/v1/course-settings.html Normal file
View File

@@ -0,0 +1,11 @@
## 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>

6
cms/urls.py
View File

@@ -212,6 +212,12 @@ if 'debug_toolbar' in settings.INSTALLED_APPS:
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
# These are used by Django to render these error codes. Do not remove.
# pylint: disable=invalid-name

1
cms/urls_dev.py
View File

@@ -7,5 +7,4 @@ from django.conf.urls import url
urlpatterns = (
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'),
)

7
lms/envs/common.py
View File

@@ -1644,13 +1644,6 @@ PIPELINE_JS = {
'source_filenames': 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': {
'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'),
'output_filename': 'js/lms-module-descriptors.js',

1
lms/static/sass/_build-lms-v2.scss
View File

@@ -2,7 +2,6 @@
// LMS: Shared Build Compile
// Version 2 - introduces the Pattern Library
// Configuration
@import 'config';
@import 'base/variables';

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

@@ -3,7 +3,7 @@
// Page banner
.page-banner {
max-width: $lms-max-width;
max-width: map-get($container-max-widths, xl);
margin: 0 auto;
.user-messages {

14
lms/static/sass/bootstrap/_footer.scss
View File

@@ -2,15 +2,15 @@
// ====================
.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;
background-color: $footer-bg;
background-color: $body-bg;
margin-top: $baseline/2;
padding: $baseline;
font-family: $font-family-sans-serif;
footer {
max-width: $lms-max-width;
max-width: map-get($container-max-widths, xl);
margin: 0 auto;
.site-nav {
@@ -22,10 +22,10 @@
.nav-link {
text-decoration: none;
padding: 0;
color: $brand-inverse;
color: $gray-900;
&:hover {
color: $brand-primary;
color: theme-color("primary");
}
}
}
@@ -54,8 +54,8 @@
.copyright {
margin-top: $baseline;
font-size: $font-size-xs;
color: $gray-dark;
font-size: $font-size-sm;
color: theme-color("primary");
}
.footer-about-openedx {

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

@@ -9,8 +9,8 @@
.nav-item {
&.active, &:hover{
.nav-link {
border-bottom-color: $brand-primary;
color: $brand-primary;
border-bottom-color: theme-color("primary");
color: theme-color("primary");
}
}
@@ -20,7 +20,7 @@
border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent;
@media (max-width: map-get($grid-breakpoints, md)) {
@include media-breakpoint-down(md) {
border: none;
text-align: left;
padding: 0 0 $baseline/2 0;
@@ -30,11 +30,11 @@
}
.main-container {
border: 1px solid $inverse-color;
border: 1px solid $border-color;
background-color: $body-bg;
.page-header {
border-bottom: 1px solid $inverse-color;
border-bottom: 1px solid $border-color;
padding: 20px;
}
@@ -44,6 +44,6 @@
}
&.container-fluid {
max-width: $lms-max-width;
max-width: map-get($container-max-widths, xl);
}
}

18
lms/static/sass/bootstrap/_navigation.scss
View File

@@ -1,12 +1,12 @@
// Local overrides for bootstrap navigation bar theming
.navigation-container {
border-bottom: 1px solid $brand-primary;
border-bottom: 1px solid theme-color("primary");
text-decoration: none;
background-color: $header-bg;
background-color: $body-bg;
&.slim {
border-bottom: 1px solid $inverse-color;
box-shadow: 0 1px 5px 0 $black-t0;
border-bottom: 1px solid $border-color;
box-shadow: 0 1px 5px 0 $gray-900;
}
.navbar {
@@ -35,7 +35,7 @@
list-style: none;
.nav-link {
color: $brand-primary;
color: theme-color("primary");
}
.user-image-frame {
@@ -48,13 +48,13 @@
display: none;
}
@media (max-width: map-get($grid-breakpoints,md)) {
@include media-breakpoint-down(md) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
display: initial;
margin: $baseline/4 $baseline/2;
a {
color: $brand-primary;
color: theme-color("primary");
padding: 0;
text-decoration: none;
@@ -74,10 +74,10 @@
}
.navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,md)) {
@include media-breakpoint-down(md) {
.nav-link {
text-transform: none;
color: $brand-inverse;
color: $gray-900;
font-weight: $font-weight-bold;
cursor: pointer;
}

58
lms/static/sass/bootstrap/_variables.scss
View File

@@ -11,61 +11,3 @@
// #UNITS
// ----------------------------
$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;

1
lms/static/sass/bootstrap/lms-main.scss
View File

@@ -5,6 +5,7 @@
// Bootstrap theme
@import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap/scss/mixins';
// Variables
@import 'variables';

7
lms/static/sass/features/_learner-profile.scss
View File

@@ -140,7 +140,7 @@
height: $profile-image-dimension;
border-radius: ($profile-image-dimension/2);
overflow: hidden;
border: 3px solid $gray-lightest;
border: 3px solid $gray-l6;
margin-top: $baseline*-0.75;
background: $white;
}
@@ -223,7 +223,7 @@
.wrapper-profile {
min-height: 200px;
background-color: $gray-lightest;
background-color: $gray-l6;
.ui-loading-indicator {
margin-top: 100px;
@@ -379,7 +379,7 @@
&:not(:last-child) {
padding-bottom: $baseline/4;
border-bottom: 1px solid $gray-lighter;
border-bottom: 1px solid $border-color;
&:hover.mode-placeholder {
padding-bottom: $baseline/5;
@@ -464,6 +464,7 @@
display: inline-block;
margin-top: 0;
margin-bottom: ($baseline/4);
color: $gray-d3;
width: 100%;
font: $font-semibold 1.4em/1.4em $sans-serif;
}

6
lms/static/sass/partials/base/_variables.scss
View File

@@ -223,10 +223,6 @@ $success-color-hover: rgb(0, 129, 0) !default;
// ----------------------------
// #COLORS- Bootstrap-style
// ----------------------------
$gray-dark: #4e5455 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$state-success-text: $black !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken($state-success-bg, 5%) !default;
@@ -248,7 +244,7 @@ $state-danger-border: darken($state-danger-bg, 5%) !default;
// ----------------------------
// logo colors
$audit-mode-color: $gray-dark !default;
$audit-mode-color: rgb(74,74,74) !default;
$honor-mode-color: $uxpl-blue-base !default;
$verified-mode-color: $uxpl-green-base !default;
$micromasters-color: #005585 !default;

4
lms/templates/footer.html
View File

@@ -14,7 +14,7 @@
<footer>
<div class="row">
<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">
% for item_num, link in enumerate(footer['navigation_links'], start=1):
<li class="nav-item">
@@ -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.
<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">
% for item_num, link in enumerate(footer['legal_links'], start=1):
<li class="nav-item">

14
lms/templates/main.html
View File

@@ -1,3 +1,5 @@
## xss-lint: disable=mako-missing-default
## coding=utf-8
## 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
<link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
<%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" />
% else:
<%static:css group='${self.attr.main_css}'/>
@@ -77,12 +79,14 @@ from pipeline_mako import render_require_js_path_overrides
<%static:js group='application'/>
% endif
% if uses_bootstrap:
<%static:js group='lms_bootstrap'/>
% endif
<%static:webpack entry="commons"/>
% if uses_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
<script>
window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
(function (require) {

4
lms/templates/navigation/navigation.html
View File

@@ -51,11 +51,11 @@ site_status_msg = get_site_status_msg(course_id)
% if uses_bootstrap:
<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">
<span class="navbar-toggler-icon"></span>
</button>
<%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
% if user.is_authenticated():
<%include file="bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:

2
lms/templates/ux/reference/bootstrap/course-skeleton.html
View File

@@ -11,7 +11,7 @@
<%block name="bodyclass">course-skeleton</%block>
<%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">
<li class="nav-item active">
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>

38
lms/templates/ux/reference/bootstrap/unit-page.html Normal file
View File

@@ -0,0 +1,38 @@
## 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>

908
lms/templates/ux/reference/fragments/unit-fragment.html Normal file
View File

File diff suppressed because one or more lines are too long

3
lms/templates/ux/reference/index.html
View File

@@ -23,16 +23,19 @@
<h3>v1-style LMS Pages</h3>
<ul>
<li><a href="v1/course-skeleton.html">Course skeleton page</a></li>
<li><a href="v1/unit-page.html">Unit page</a></li>
</ul>
<h3>Pattern Library</h3>
<ul>
<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>
<h3>Bootstrap</h3>
<ul>
<li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li>
<li><a href="bootstrap/unit-page.html">Unit page</a></li>
</ul>
</section>
</article>

46
lms/templates/ux/reference/pattern-library/unit-page.html Normal file
View File

@@ -0,0 +1,46 @@
## 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>

944
lms/templates/ux/reference/v1/course-skeleton.html
View File

File diff suppressed because one or more lines are too long

43
lms/templates/ux/reference/v1/unit-page.html Normal file
View File

@@ -0,0 +1,43 @@
## 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>

4
lms/urls.py
View File

@@ -998,10 +998,8 @@ if settings.DEBUG:
settings.PROFILE_IMAGE_BACKEND['options']['base_url'],
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'),
if 'debug_toolbar' in settings.INSTALLED_APPS:

1
openedx/core/djangoapps/debug/views.py
View File

@@ -28,7 +28,6 @@ def show_reference_template(request, template):
uses_bootstrap = not uses_pattern_library and not is_v1
context = {
'request': request,
'disable_courseware_js': not is_v1,
'uses_pattern_library': uses_pattern_library,
'uses_bootstrap': uses_bootstrap,
}

3
package.json
View File

@@ -10,7 +10,7 @@
"backbone.paginator": "~2.0.3",
"coffee-loader": "^0.7.3",
"coffee-script": "1.6.1",
"edx-bootstrap": "~0.1.7",
"edx-bootstrap": "^0.2.1",
"edx-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4",
@@ -22,6 +22,7 @@
"moment": "^2.15.1",
"moment-timezone": "~0.5.5",
"picturefill": "~3.0.2",
"popper.js": "~1.12.5",
"prop-types": "^15.5.10",
"raw-loader": "^0.5.1",
"react": "^15.5.4",

56
pavelib/assets.py
View File

@@ -59,8 +59,8 @@ NPM_INSTALLED_LIBRARIES = [
'moment-timezone/builds/moment-timezone-with-data.js',
'moment/min/moment-with-locales.js',
'picturefill/dist/picturefill.js',
'popper.js/dist/umd/popper.js',
'requirejs/require.js',
'tether/dist/js/tether.js',
'underscore.string/dist/underscore.string.js',
'underscore/underscore.js',
]
@@ -73,7 +73,7 @@ NPM_INSTALLED_DEVELOPER_LIBRARIES = [
]
# 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
SASS_LOOKUP_DEPENDENCIES = {
@@ -81,7 +81,10 @@ SASS_LOOKUP_DEPENDENCIES = {
}
# 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):
@@ -707,25 +710,37 @@ def execute_compile_sass(args):
)
def execute_webpack(prod, settings=None):
sh(
cmd(
"NODE_ENV={node_env} STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack"
.format(
node_env="production" if prod 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)
)
)
@task
@cmdopts([
('settings=', 's', "Django settings (defaults to devstack)"),
('watch', 'w', "Watch file system and rebuild on change (defaults to off)"),
])
@timed
def webpack(options):
"""
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):
"""
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(
"STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack --watch --watch-poll=200"
.format(
'STATIC_ROOT_LMS={static_root_lms} STATIC_ROOT_CMS={static_root_cms} $(npm bin)/webpack {options}'.format(
options='--watch --watch-poll=200',
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):
print("Starting asset watcher...")
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
# instead of subclassing from Watchdog like the other watchers do
# Run the Webpack file system watcher too
execute_webpack_watch(settings=Env.DEVSTACK_SETTINGS)
if not getattr(options, 'background', False):
# 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:
while True:
observer.join(2)
@@ -861,7 +875,9 @@ def update_assets(args):
process_xmodule_assets()
process_npm_assets()
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
execute_compile_sass(args)

8
themes/edx.org/lms/templates/header.html
View File

@@ -53,10 +53,7 @@ site_status_msg = get_site_status_msg(course_id)
% endif
% if uses_bootstrap:
<nav class="navbar navbar-toggleable-md 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>
<nav class="navbar navbar-expand-lg navbar-light" aria-label="${_('Main')}">
<h1 class="hd logo-header">
<div class="logo">
<a class="navbar-brand" href="${marketing_link('ROOT')}" itemprop="url">
@@ -71,6 +68,9 @@ site_status_msg = get_site_status_msg(course_id)
</div>
% endif
</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():
<div class="collapse navbar-collapse" id="navbarSupportedContent">
% if not course or disable_courseware_header:

20
themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss
View File

@@ -3,11 +3,25 @@
// Theme colors
//
// Note: define colors needed by your theme first
$red: #d9534f;
$brand-primary: $red;
// Define the primary red color
$red: #d9534f !default;
// Theme fonts
$font-family-sans-serif: cursive;
// Initialize the Open edX bootstrap theme
// Initialize the Open edX Bootstrap 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);

18
themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
View File

@@ -3,11 +3,25 @@
// Theme colors
//
// Note: define colors needed by your theme first
// Define the primary red color
$red: #d9534f !default;
$brand-primary: $red;
// Theme fonts
$font-family-sans-serif: cursive;
// Initialize the Open edX bootstrap theme
// Initialize the Open edX Bootstrap 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);

11
webpack.config.js
View File

@@ -18,15 +18,18 @@ var wpconfig = {
context: __dirname,
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',
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.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',
Import: './cms/static/js/features/import/factories/import.js',
StudioIndex: './cms/static/js/features_jsx/studio/index.jsx'
LatestUpdate: './openedx/features/course_experience/static/course_experience/js/LatestUpdate.js',
WelcomeMessage: './openedx/features/course_experience/static/course_experience/js/WelcomeMessage.js'
},
output: {