Skip to content

E
edx-platform
Commit c9f75f6b by Harry Rein Committed by GitHub
Options

Merge pull request #15926 from edx/HarryRein/FEDX-375-bootstrap-beta 

Harry rein/fedx 375 bootstrap beta
parents 5ac5149b 6e10d2a5
Showing with 400 additions and 305 deletions
cms/envs/common.py
......@@ -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
......
cms/static/sass/bootstrap/_base.scss
......@@ -9,3 +9,7 @@
.is-hidden {
display: none;
}
.sr {
@include sr-only();
}
cms/static/sass/bootstrap/_components.scss
......@@ -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;
}
}
......
cms/static/sass/bootstrap/_footer.scss
......@@ -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();
......
cms/static/sass/bootstrap/_header.scss
......@@ -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;
}
}
cms/static/sass/bootstrap/_layouts.scss
......@@ -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");
}
}
}
......
cms/static/sass/bootstrap/_navigation.scss
// 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;
}
......
cms/templates/base.html
## 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>
......
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 @@
<%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>
......
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:
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
......
cms/urls_dev.py
......@@ -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'),
)
lms/envs/common.py
......@@ -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',
......
lms/static/sass/_build-lms-v2.scss
......@@ -2,7 +2,6 @@
// LMS: Shared Build Compile
// Version 2 - introduces the Pattern Library
// Configuration
@import 'config';
@import 'base/variables';
......
lms/static/sass/bootstrap/_components.scss
......@@ -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 {
......
lms/static/sass/bootstrap/_footer.scss
......@@ -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 {
......
lms/static/sass/bootstrap/_layouts.scss
......@@ -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);
}
}
lms/static/sass/bootstrap/_navigation.scss
// 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;
}
......
lms/static/sass/bootstrap/_variables.scss
......@@ -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;
lms/static/sass/bootstrap/lms-main.scss
......@@ -5,6 +5,7 @@
// Bootstrap theme
@import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap/scss/mixins';
// Variables
@import 'variables';
......
lms/static/sass/features/_learner-profile.scss
......@@ -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;
}
......
lms/static/sass/partials/base/_variables.scss
......@@ -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;
......
lms/templates/footer.html
......@@ -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">
......
lms/templates/main.html
## 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
<%static:webpack entry="commons"/>
% 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
<%static:webpack entry="commons"/>
<script>
window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
(function (require) {
......
lms/templates/navigation/navigation.html
......@@ -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:
......
lms/templates/ux/reference/bootstrap/course-skeleton.html
......@@ -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>
......
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 @@
<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>
......
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:
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:
......
openedx/core/djangoapps/debug/views.py
......@@ -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,
}
......
package.json
......@@ -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",
......
pavelib/assets.py
......@@ -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)
......
themes/edx.org/lms/templates/header.html
......@@ -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:
......
themes/red-theme/cms/static/sass/partials/cms/bootstrap/_theme.scss
......@@ -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);
themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
......@@ -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);
webpack.config.js
......@@ -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: {
......
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