Skip to content

E
edx-platform
Commit d5fca9ee by Andy Armstrong Committed by GitHub
Options

Merge pull request #15642 from edx/andya/studio-bootstrap-theme 

Add basic Bootstrap theme to Studio
parents 081231a7 95e47ddb
Showing with 2147 additions and 39 deletions
cms/envs/common.py
...@@ -710,6 +710,10 @@ base_vendor_js = [ ...@@ -710,6 +710,10 @@ base_vendor_js = [
'edx-ui-toolkit/js/utils/string-utils.js', 'edx-ui-toolkit/js/utils/string-utils.js',
'edx-ui-toolkit/js/utils/html-utils.js', 'edx-ui-toolkit/js/utils/html-utils.js',
# Load Bootstrap and supporting libraries
'common/js/vendor/tether.js',
'common/js/vendor/bootstrap.js',
# Finally load RequireJS # Finally load RequireJS
'common/js/vendor/require.js' 'common/js/vendor/require.js'
] ]
......
cms/static/sass/_build-v1.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
// +Base - Utilities // +Base - Utilities
// ==================== // ====================
@import 'partials/variables'; @import 'cms/base/variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
......
cms/static/sass/_build-v2.scss
...@@ -6,10 +6,13 @@ ...@@ -6,10 +6,13 @@
// Configuration // Configuration
@import 'config'; @import 'config';
// Extensions // +Base - Utilities
@import 'partials/variables'; // ====================
@import 'partials/cms/base/variables';
@import 'mixins-v2'; @import 'mixins-v2';
@import 'base-v2'; @import 'base-v2';
// Pattern Library styling
@import 'elements-v2/controls'; @import 'elements-v2/controls';
@import 'elements-v2/header'; @import 'elements-v2/header';
@import 'elements-v2/navigation'; @import 'elements-v2/navigation';
......
cms/static/sass/bootstrap/_base.scss 0 → 100644
// Open edX: Studio base styles
// ============================
//
// Note: these styles replicate the Studio styles directly
// rather than benefiting from any Bootstrap classes. Ideally
// the code base should be rebuilt using Bootstrap and then
// these styles will no longer be necessary.
.is-hidden {
display: none;
}
cms/static/sass/bootstrap/_components.scss 0 → 100644
// Open edX: components
// ====================
// Skip nav
.nav-skip,
.transcript-skip {
font-size: 14px;
line-height: 14px;
display: inline-block;
position: absolute;
left: 0;
top: -($baseline*30);
overflow: hidden;
background: $white;
border-bottom: 1px solid $gray-lightest;
padding: ($baseline*0.75) ($baseline/2);
&:focus,
&:active {
position: relative;
top: auto;
width: auto;
height: auto;
margin: 0;
}
}
// Page banner
.page-banner {
max-width: $studio-max-width;
margin: 0 auto;
.user-messages {
margin-top: $baseline;
}
}
// Alerts
.alert {
.icon-alert {
margin-right: $baseline / 4;
}
}
// Sock
.wrapper-sock {
@include clearfix();
position: relative;
margin: ($baseline*2) 0 0 0;
border-top: 1px solid $gray-light;
width: 100%;
.wrapper-inner {
display: none;
width: 100% !important;
border-bottom: 1px solid $white;
padding: 0 $baseline !important;
}
// sock - actions
.list-cta {
@extend %ui-depth1;
position: absolute;
top: -($baseline*0.75);
width: 100%;
margin: 0 auto;
text-align: center;
list-style: none;
.cta-show-sock {
@extend %ui-btn-pill;
@extend %t-action4;
background: $gray-lightest;
padding: ($baseline/2) $baseline;
color: $gray-light;
.icon {
margin-right: $baseline/4;
}
&:hover {
background: $brand-primary;
color: $white;
}
}
}
// sock - additional help
.sock {
@include clearfix();
@extend %t-copy-sub2;
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto;
padding: ($baseline*2) 0;
color: $gray-light;
// support body
header {
.title {
@extend %t-title4;
}
}
.list-actions {
list-style: none;
}
// shared elements
.support, .feedback {
.title {
@extend %t-title6;
color: $white;
margin-bottom: ($baseline/2);
}
.copy {
@extend %t-copy-sub2;
margin: 0 0 $baseline 0;
}
.list-actions {
@include clearfix();
.action-item {
float: left;
margin-right: $baseline/2;
margin-bottom: ($baseline/2);
&:last-child {
margin-right: 0;
}
.action {
@extend %t-action4;
display: block;
.icon {
@extend %t-icon4;
vertical-align: middle;
margin-right: $baseline/4;
}
&:hover, &:active {
}
}
.tip {
@extend %cont-text-sr;
}
}
.action-primary {
@extend %btn-primary-blue;
@extend %t-action3;
}
}
}
// studio support content
.support {
width: flex-grid(8,12);
float: left;
margin-right: flex-gutter();
.action-item {
width: flexgrid(4,8);
}
}
// studio feedback content
.feedback {
width: flex-grid(4,12);
float: left;
.action-item {
width: flexgrid(4,4);
}
}
}
// case: sock content is shown
&.is-shown {
border-color: $gray-dark;
.list-cta .cta-show-sock {
background: $gray-dark;
border-color: $gray-dark;
color: $white;
}
}
}
cms/static/sass/bootstrap/_footer.scss 0 → 100644
// Open edX: Studio footer
// =======================
//
// Note: these styles replicate the Studio styles directly
// rather than benefiting from any Bootstrap classes. Ideally
// the header should be reimagined using Bootstrap and then
// these styles will no longer be necessary.
.wrapper-footer {
position: relative;
width: 100%;
margin: 0 0 $baseline 0;
padding: $baseline;
footer.primary {
@extend %t-copy-sub2;
@include clearfix();
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-light;
.footer-content-primary {
@include clearfix();
}
.colophon {
width: flex-grid(4, 12);
float: left;
margin-right: flex-gutter(2);
}
.nav-peripheral {
width: flex-grid(6, 12);
float: right;
text-align: right;
.nav-item {
display: inline-block;
margin-right: $baseline/4;
&:last-child {
margin-right: 0;
}
a {
border-radius: 2px;
padding: ($baseline/2) ($baseline/2);
background: transparent;
.icon {
display: inline-block;
vertical-align: middle;
margin-right: $baseline/4;
}
}
}
}
.footer-content-secondary {
@include clearfix();
margin-top: $baseline;
}
.footer-about-copyright, .footer-about-openedx {
display: inline-block;
vertical-align: middle;
}
// platform trademarks
.footer-about-copyright {
width: flex-grid(4, 12);
float: left;
margin-right: flex-gutter(2);
}
// platform Open edX logo and link
.footer-about-openedx {
float: right;
text-align: right;
a {
display: inline-block;
img {
display: block;
width: ($baseline* 6);
}
&:hover {
border-bottom: none;
}
}
}
}
}
cms/static/sass/bootstrap/_header.scss 0 → 100644
// Open edX: Studio header
// =======================
//
// Note: these styles replicate the Studio styles directly
// rather than benefiting from any Bootstrap classes. Ideally
// the header should be reimagined using Bootstrap and then
// these styles will no longer be necessary.
// studio - elements - global header
// ====================
.wrapper-header {
@extend %ui-depth3;
position: relative;
width: 100%;
box-shadow: 0 1px 2px 0 $shadow-l1;
margin: 0;
padding: 0 $baseline;
background: $white;
header.primary {
@include clearfix();
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto;
}
// ====================
// basic layout
.wrapper-l, .wrapper-r {
background: $white;
}
.wrapper-l {
float: left;
width: flex-grid(7,12);
}
.wrapper-r {
float: right;
width: flex-grid(4,12);
text-align: right;
}
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
display: inline-block;
vertical-align: middle;
}
.user-language-selector {
width: 120px;
display: inline-block;
margin: 0 10px 0 5px;
vertical-align: sub;
.language-selector {
width: 120px;
}
}
.nav-account {
width: auto;
}
// basic layout - nav items
nav {
> ol > .nav-item {
@extend %t-action3;
@extend %t-strong;
display: inline-block;
vertical-align: middle;
&:last-child {
margin-right: 0;
}
}
.nav-item a {
color: $gray;
&:hover {
color: $link-hover-color;
}
}
}
// basic layout - dropdowns
.nav-dd {
.title {
@extend %t-action2;
@extend %ui-btn-dd-nav-primary;
.label, .fa-caret-down {
}
.label {
}
.fa-caret-down {
opacity: 0.25;
}
&:hover {
.fa-caret-down {
opacity: 1.0;
}
}
.nav-sub .nav-item {
.icon {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
}
// ====================
// specific elements - branding
.branding {
padding: ($baseline*0.75) 0;
a {
display: block;
img {
max-height: ($baseline*2);
display: block;
}
}
}
// ====================
// specific elements - course name/info
.info-course {
margin-right: flex-gutter();
border-right: 1px solid $gray-lighter;
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number {
font-size: 12px;
line-height: 12px;
display: inline-block;
vertical-align: middle;
max-width: 45%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
opacity: 1.0;
color: $gray-dark;
}
.course-org {
margin-right: $baseline/4;
}
.course-title {
@extend %t-action2;
@extend %t-strong;
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// entire link
.course-link {
display: block;
color: $gray-dark;
&:hover {
color: $link-hover-color;
}
}
}
// ====================
// specific elements - course nav
.nav-course {
padding: ($baseline*0.75) 0;
}
// ====================
// specific elements - account-based nav
.nav-account {
position: relative;
padding: ($baseline*0.75) 0;
.nav-sub {
text-align: left;
}
.nav-account-help {
.wrapper-nav-sub {
width: ($baseline*10);
}
}
.nav-account-user {
.title {
max-width: ($baseline*6.5);
> .label {
display: inline-block;
max-width: 84%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.settings-language-form {
margin-top: 4px;
.language-selector {
width: 130px;
}
}
}
// ====================
// specific elements - pitch/how it works nav
.nav-pitch {
position: relative;
padding: ($baseline*0.75) 0;
.nav-sub {
text-align: left;
}
}
}
// ====================
// CASE: user signed in
.is-signedin {
.wrapper-l {
width: flex-grid(8,12);
}
.wrapper-r {
width: flex-grid(4,12);
}
.branding {
margin-right: 2%;
}
.nav-account {
top: ($baseline/4);
}
}
// ====================
// CASE: in course {
.is-signedin.course {
.wrapper-header {
.wrapper-l {
width: flex-grid(9,12);
}
.wrapper-r {
width: flex-grid(3,12);
}
.branding {
margin-right: 2%;
}
.info-course {
width: 25%;
margin-right: 2%;
}
.nav-course {
width: 45%;
}
}
}
// ====================
// CASE: user not signed in
.not-signedin,
.view-util {
.wrapper-header {
.wrapper-l {
width: flex-grid(2,12);
}
.wrapper-r {
width: flex-grid(10,12);
}
.branding {
width: 100%;
}
.nav-pitch {
top: ($baseline/4);
.nav-item {
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
}
.action-signup {
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
}
.action-signin {
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
}
}
}
}
// dropdown
.nav-dd {
.title {
.label, .fa-caret-down {
display: inline-block;
vertical-align: middle;
}
.ui-toggle-dd {
margin: 0;
display: inline-block;
vertical-align: middle;
}
// dropped down state
&.is-selected {
.ui-toggle-dd {
transform: rotate(-180deg);
transform-origin: 50% 50%;
}
}
}
.nav-item {
position: relative;
&:hover {
}
&.nav-course-settings {
.wrapper-nav-sub {
width: ($baseline*9);
}
}
}
.wrapper-nav-sub {
position: absolute;
top: ($baseline*2.5);
opacity: 0.0;
pointer-events: none;
width: ($baseline*8);
overflow: hidden;
height: 0;
// dropped down state
&.is-shown {
opacity: 1.0;
pointer-events: auto;
overflow: visible;
height: auto;
}
}
.nav-sub {
border-radius: 2px;
box-shadow: 0 1px 1px $shadow-l1;
position: relative;
width: 100%;
border: 1px solid $gray-light;
padding: ($baseline/2) ($baseline*0.75);
background: $white;
&:after, &:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
// ui triangle/nub
&:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: $white;
border-width: 10px;
}
&:before {
border-color: rgba(178, 178, 178, 0);
border-bottom-color: $gray-light;
border-width: 11px;
}
.nav-item {
@extend %t-action3;
@extend %t-regular;
display: block;
margin: 0 0 ($baseline/4) 0;
border-bottom: 1px solid $gray-lighter;
padding: 0 0($baseline/4) 0;
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
a {
display: block;
&:hover, &:active {
color: $brand-primary;
}
}
}
}
// CASE: left-hand side arrow/dd
&.ui-left {
.wrapper-nav-sub {
left: 0;
}
.nav-sub {
text-align: left;
// ui triangle/nub
&:after {
left: $baseline;
margin-left: -10px;
}
&:before {
left: $baseline;
margin-left: -11px;
}
}
}
// CASE: right-hand side arrow/dd
&.ui-right {
.wrapper-nav-sub {
left: none;
right: 0;
}
.nav-sub {
// ui triangle/nub
&:after {
right: $baseline;
margin-right: -10px;
}
&:before {
right: $baseline;
margin-right: -11px;
}
}
}
}
// ====================
// 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 0 → 100644
// Open edX: Studio layout
// =======================
//
// Note: these styles replicate the Studio styles directly
// rather than benefiting from any Bootstrap classes. Ideally
// the layouts should be reimagined using Bootstrap and then
// these styles will no longer be necessary.
.content-wrapper {
margin-top: $baseline;
.course-tabs {
padding-bottom: 0;
.nav-item {
&.active, &:hover{
.nav-link {
border-bottom-color: $brand-primary;
color: $brand-primary;
}
}
.nav-link {
padding: $baseline/2 $baseline*3/4 $baseline*13/20;
border-style: solid;
border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent;
@media (max-width: map-get($grid-breakpoints, md)) {
border: none;
text-align: left;
padding: 0 0 $baseline/2 0;
}
}
}
}
.main-container {
border: 1px solid $inverse-color;
background-color: $body-bg;
.page-header {
border-bottom: 1px solid $inverse-color;
padding: 20px;
}
.page-content {
padding: 20px;
}
}
&.container-fluid {
max-width: $studio-max-width;
}
}
// studio - elements - layouts
// ====================
// layout - basic
// the wrapper around the viewable page area, excluding modal and other extra-view content
.wrapper-view {
}
// ====================
// layout - basic page header
.wrapper-mast {
margin: ($baseline*1.5) 0 0 0;
padding: 0 $baseline;
position: relative;
.mast,
.metadata {
@include clearfix();
position: relative;
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto $baseline auto;
color: $gray-dark;
}
.mast {
border-bottom: 1px solid $gray-light;
padding-bottom: ($baseline/2);
// layout without actions
.page-header {
width: flex-grid(12);
}
// layout with actions
&.has-actions {
@include clearfix();
.page-header {
float: left;
width: flex-grid(6,12);
margin-right: flex-gutter();
}
.nav-actions {
position: relative;
bottom: -($baseline*0.75);
float: right;
width: flex-grid(6,12);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: top;
margin-right: ($baseline/2);
&:last-child {
margin-right: 0;
}
}
// buttons
.button {
@extend %btn-primary-blue;
@extend %sizing;
.action-button-text {
display: inline-block;
vertical-align: baseline;
}
.icon {
display: inline-block;
vertical-align: baseline;
}
// CASE: new/create button
&.new-button,
&.button-new {
@extend %btn-primary-green;
@extend %sizing;
}
}
}
}
// layout with actions
&.has-subtitle {
.nav-actions {
bottom: -($baseline*1.5);
}
}
// layout with breadcrumb navigation
&.has-navigation {
.nav-actions {
bottom: -($baseline*1.5);
}
.navigation-item {
@extend %cont-truncated;
display: inline-block;
vertical-align: bottom; // correct for extra padding in FF
max-width: 250px;
color: $gray-dark;
&.navigation-current {
@extend %ui-disabled;
color: $gray;
max-width: 250px;
&:before {
color: $gray;
}
}
}
.navigation-link:hover {
color: $brand-primary;
}
.navigation-item:before {
content: " / ";
margin: ($baseline/4);
color: $gray;
&:hover {
color: $gray;
}
}
.navigation .navigation-item:first-child:before {
content: "";
margin: 0;
}
}
}
// CASE: wizard-based mast
.mast-wizard {
.page-header-sub {
@extend %t-title4;
color: $gray;
font-weight: 300;
}
.page-header-super {
@extend %t-title4;
float: left;
width: flex-grid(12,12);
margin-top: ($baseline/2);
border-top: 1px solid $gray-lighter;
padding-top: ($baseline/2);
font-weight: 600;
}
}
// page metadata/action bar
.metadata {
}
}
// layout - basic page content
.wrapper-content {
margin: 0;
padding: 0 $baseline;
position: relative;
}
.content {
@include clearfix();
@extend %t-copy-base;
max-width: $studio-max-width;
width: flex-grid(12);
margin: 0 auto;
color: $gray-dark;
header {
position: relative;
margin-bottom: $baseline;
border-bottom: 1px solid $gray-lighter;
padding-bottom: ($baseline/2);
.title-sub {
@extend %t-copy-sub1;
display: block;
margin: 0;
color: $gray-light;
}
.title-1 {
@extend %t-title3;
@extend %t-strong;
margin: 0;
padding: 0;
color: $gray-dark;
}
}
}
// 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 {
.title-1 {
@extend %t-title3;
}
.title-2 {
@extend %t-title4;
margin: 0 0 ($baseline/2) 0;
}
.title-3 {
@extend %t-title6;
margin: 0 0 ($baseline/2) 0;
}
header {
@include clearfix();
.title-2 {
width: flex-grid(5, 12);
margin: 0 flex-gutter() 0 0;
float: left;
}
.tip {
@extend %t-copy-sub2;
width: flex-grid(7, 12);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-dark;
}
}
}
// layout - supplemental content
.content-supplementary {
> section {
margin: 0 0 $baseline 0;
}
}
// ====================
// layout - grandfathered
.main-wrapper {
position: relative;
margin: 0 ($baseline*2);
}
.inner-wrapper {
@include clearfix();
position: relative;
max-width: 1280px;
margin: auto;
> article {
clear: both;
}
}
.main-column {
clear: both;
float: left;
width: 70%;
}
.sidebar {
float: right;
width: 28%;
}
.left {
float: left;
}
.right {
float: right;
}
cms/static/sass/bootstrap/_mixins.scss 0 → 100644
// common - utilities - mixins and extends
// ====================
//
// Note: these mixins replicate the Studio mixins directly
// to simplify the usage of Studio Sass partials. They
// should be deprecated in favor of using native Bootstrap
// functionality.
// Table of Contents
// * +Font Sizing - Mixin
// * +Line Height - Mixin
// * +Sizing - Mixin
// * +Square - Mixin
// * +Placeholder Styling - Mixin
// * +Flex Support - Mixin
// * +Flex Polyfill - Extends
// * +UI - Wrapper - Extends
// * +UI - Window - Extend
// * +UI - Visual Link - Extend
// * +UI - Functional Disable - Extend
// * +UI - Visual Link - Extend
// * +UI - Depth Levels - Extends
// * +UI - Clear Children - Extends
// * +UI - Buttons - Extends
// * +UI - Well Archetype - Extends
// * +Content - No List - Extends
// * +Content - Hidden Image Text - Extend
// * +Content - Screenreader Text - Extend
// * +Content - Text Wrap - Extend
// * +Content - Text Truncate - Extend
// * +Icon - Font-Awesome - Extend
// * +Icon - SSO icon images
// +Font Sizing - Mixin
// ====================
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
}
// +Line Height - Mixin
// ====================
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
}
// +Sizing - Mixin
// ====================
@mixin size($width: $baseline, $height: $baseline) {
height: $height;
width: $width;
}
// +Square - Mixin
// ====================
@mixin square($size: $baseline) {
@include size($size);
}
// +Placeholder Styling - Mixin
// ====================
@mixin placeholder($color) {
:-moz-placeholder {
color: $color;
}
::-webkit-input-placeholder {
color: $color;
}
:-ms-input-placeholder {
color: $color;
}
}
// +Flex Support - Mixin
// ====================
@mixin ui-flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
// +Flex PolyFill - Extends
// ====================
// justify-content right for display:flex alignment in older browsers
%ui-justify-right-flex {
-webkit-box-pack: flex-end;
-moz-box-pack: flex-end;
-ms-flex-pack: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
// justify-content left for display:flex alignment in older browsers
%ui-justify-left-flex {
-webkit-box-pack: flex-start;
-moz-box-pack: flex-start;
-ms-flex-pack: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
// align items center for display:flex alignment in older browsers
%ui-align-center-flex {
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
// +UI - Wrapper - Extends
// ====================
// used for page/view-level wrappers (for centering/grids)
%ui-wrapper {
@include clearfix();
width: 100%;
}
// +UI - Depth Levels - Extends
// ====================
%ui-depth0 { z-index: 0; }
%ui-depth1 { z-index: 10; }
%ui-depth2 { z-index: 100; }
%ui-depth3 { z-index: 1000; }
%ui-depth4 { z-index: 10000; }
%ui-depth5 { z-index: 100000; }
// +UI - Clear Children - Extends
// ====================
// extends - UI - utility - first child clearing
%wipe-first-child {
&:first-child {
margin-top: 0;
border-top: none;
padding-top: 0;
}
}
// extends - UI - utility - last child clearing
%wipe-last-child {
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
}
// +Content - No List - Extends
// ====================
// removes list styling/spacing when using uls, ols for navigation and less content-centric cases
%cont-no-list {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
li {
margin: 0;
padding: 0;
}
}
// +Content - Hidden Image Text - Extend
// ====================
// image-replacement hidden text
%cont-text-hide {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
// +Content - Screenreader Text - Extend
// ====================
%cont-text-sr {
// clip has been deprecated but is still supported
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
margin: -1px;
height: 1px;
width: 1px;
border: 0;
padding: 0;
overflow: hidden;
// ensure there are spaces in sr text
word-wrap: normal;
}
// +Content - Text Wrap - Extend
// ====================
%cont-text-wrap {
word-wrap: break-word;
}
// +Content - Text Truncate - Extend
// ====================
%cont-truncated {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// * +Icon - Font-Awesome - Extend
// ====================
%use-font-awesome {
display: inline-block;
font-family: FontAwesome;
-webkit-font-smoothing: antialiased;
speak: none;
}
%btn-no-style {
background: transparent;
border: 0;
padding: 0;
margin: 0;
}
// * +Icon - SSO icon images
// ====================
%sso-icon {
.icon-image {
width: auto;
height: auto;
max-height: 1.4em;
max-width: 1.4em;
margin-top: -2px;
}
}
cms/static/sass/bootstrap/_navigation.scss 0 → 100644
// Local overrides for bootstrap navigation bar theming
.navigation-container {
border-bottom: 2px solid $brand-primary;
text-decoration: none;
background-color: $header-bg;
&.slim {
border-bottom: 1px solid $inverse-color;
box-shadow: 0 1px 5px 0 $black-t0;
}
.navbar {
margin: 0 auto;
max-width: map-get($container-max-widths, xl);
.logo.slim a {
height: $baseline*3/2;
margin-top: $baseline/5;
}
.course-header {
font-size: $font-size-lg;
margin: $baseline/2 $baseline/2 0 0;
.provider {
font-weight: $font-weight-bold;
}
}
.nav-item {
margin: 0 $baseline 0 0;
font-weight: $font-weight-normal;
font-family: $font-family-base;
text-transform: uppercase;
list-style: none;
.nav-link {
color: $brand-primary;
}
.user-image-frame {
max-width: $baseline*2;
border-radius: $border-radius;
}
// Dealing with creating a collapsed menu
&.nav-item-open-collapsed-only {
display: none;
}
@media (max-width: map-get($grid-breakpoints,md)) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
display: initial;
margin: $baseline/4 $baseline/2;
a {
color: $brand-primary;
padding: 0;
text-decoration: none;
&:hover {
color: $input-border-color;
}
}
}
&.nav-item-hidden-collapsed {
display: none;
}
}
}
.btn-shopping-cart{
padding-top: 0.7rem; // $btn-padding-y-lg once themed
}
.navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,md)) {
.nav-link {
text-transform: none;
color: $brand-inverse;
font-weight: $font-weight-bold;
cursor: pointer;
}
}
&.dropdown {
cursor: pointer;
.dropdown-item {
text-transform: initial;
}
}
}
}
}
cms/static/sass/bootstrap/_variables.scss 0 → 100644
// Studio - bootstrap utilities - variables
// ========================================
// #Units: Unit variables
// #GRID: Grid and layout variables
// #COLORS: Base, palette and theme color definitions + application
// #TYPOGRAPHY: Font definitions and scales
// #ICONS: Icon specific colors + other styling
// ----------------------------
// #UNITS
// ----------------------------
$baseline: 20px !default;
// ----------------------------
// #GRID
// ----------------------------
$studio-max-width: 1180px !default;
// ----------------------------
// #COLORS
// ----------------------------
$studio-gray: palette(grayscale, base) !default;
$studio-background-color: palette(grayscale, x-back) !default;
$studio-container-background-color: $white !default;
$studio-border-color: palette(grayscale, back) !default;
$studio-label-color: palette(grayscale, black) !default;
$studio-active-color: palette(primary, base) !default;
$studio-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
$studio-dark-icon-color: $white !default;
$studio-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;
cms/static/sass/bootstrap/studio-main.scss 0 → 100644
// -----------------------------
// Studio main styles for Bootstrap
// -----------------------------
// Bootstrap theme
@import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap';
// Variables
@import 'mixins';
@import 'variables';
@import 'base';
// Elements
@import 'header';
@import 'footer';
@import 'navigation';
@import 'layouts';
@import 'components';
cms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Default bootstrap theming
$body-bg: #f5f5f5 !default;
@import 'edx-bootstrap/sass/open-edx/theme';
cms/templates/base.html
...@@ -44,7 +44,11 @@ from openedx.core.djangolib.js_utils import ( ...@@ -44,7 +44,11 @@ from openedx.core.djangolib.js_utils import (
<%static:css group='style-vendor-tinymce-content'/> <%static:css group='style-vendor-tinymce-content'/>
<%static:css group='style-vendor-tinymce-skin'/> <%static:css group='style-vendor-tinymce-skin'/>
% if uses_bootstrap:
<link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
% else:
<%static:css group='${self.attr.main_css}'/> <%static:css group='${self.attr.main_css}'/>
% endif
<%include file="widgets/segment-io.html" /> <%include file="widgets/segment-io.html" />
......
cms/templates/ux/reference/_note-usage.html deleted 100644 → 0
<!-- NOTE:
This file is a static reference template used by the edX design and development teams while
building new features. These files are not generally maintained or updated once a feature has
been completed. Additionally, these templates are subject to the following:
* inconsistent markup/UI with current UI
* deletion by the edX design or development if not needed
* not compliant with internationalization, javascript, or accessibility standards used
throughout the rest of the platform
-->
cms/templates/ux/reference/bootstrap/test.html 0 → 100644
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/studio-main.css" %>
<%page expression_filter="h"/>
<%!
from openedx.core.djangoapps.util.user_messages import (
register_error_message,
register_info_message,
register_success_message,
register_warning_message,
)
%>
<%
register_info_message(request, _('This is a test message'))
%>
<%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>
cms/templates/ux/reference/index.html
## Override the default styles_version to the Pattern Library version (version 2) ## Override the default styles_version to use Bootstrap
<%! main_css = "style-main-v2" %> <%! main_css = "css/bootstrap/studio-main.css" %>
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%inherit file="../../base.html" />
<%block name="view_notes"> <%inherit file="../../base.html" />
<%include file="_note-usage.html" />
</%block>
<%block name="title">UX Style Reference</%block> <%block name="title">UX Style Reference</%block>
<%block name="bodyclass">is-signedin course uploads view-container</%block> <%block name="bodyclass">ux-reference</%block>
<%block name="content"> <%block name="content">
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="main-column"> <div class="main-column">
<article class="window unit-body"> <article class="window unit-body">
<h1>UX Style Reference</h1> <h2>UX Style Reference</h2>
<ol class="components">
<li class="component">
<div class="wrapper wrapper-component-action-header">
<h2>Page Types</h2>
</div>
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
<ul> <ul>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li> <a href="bootstrap/test.html">Bootstrap Test Page</a>
<a href="pattern-library/test.html">Pattern Library Test Page</a>
</ul> </ul>
</section>
</li>
</ol>
</article> </article>
</div> </div>
</div> </div>
......
lms/templates/ux/reference/index.html
## mako ## mako
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/lms-main.css" %>
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%inherit file="/main.html" /> <%inherit file="/main.html" />
......
openedx/core/djangoapps/debug/views.py
...@@ -28,16 +28,27 @@ def show_reference_template(request, template): ...@@ -28,16 +28,27 @@ def show_reference_template(request, template):
e.g. /template/ux/reference/index.html?name=Foo e.g. /template/ux/reference/index.html?name=Foo
""" """
try: try:
uses_bootstrap = u'/bootstrap/' in request.path
uses_pattern_library = u'/pattern-library/' in request.path uses_pattern_library = u'/pattern-library/' in request.path
is_v1 = u'/v1/' in request.path is_v1 = u'/v1/' in request.path
uses_bootstrap = not uses_pattern_library and not is_v1
context = { context = {
"disable_courseware_js": not is_v1, 'request': request,
"uses_pattern_library": uses_pattern_library, 'disable_courseware_js': not is_v1,
"uses_bootstrap": uses_bootstrap, 'uses_pattern_library': uses_pattern_library,
'uses_bootstrap': uses_bootstrap,
} }
context.update(request.GET.dict()) context.update(request.GET.dict())
# Support dynamic rendering of messages
if request.GET.get('alert'):
register_info_message(request, request.GET.get('alert'))
if request.GET.get('success'):
register_success_message(request, request.GET.get('success'))
if request.GET.get('warning'):
register_warning_message(request, request.GET.get('warning'))
if request.GET.get('error'):
register_error_message(request, request.GET.get('error'))
# Add some messages to the course skeleton pages # Add some messages to the course skeleton pages
if u'course-skeleton.html' in request.path: if u'course-skeleton.html' in request.path:
register_info_message(request, _('This is a test message')) register_info_message(request, _('This is a test message'))
...@@ -47,4 +58,4 @@ def show_reference_template(request, template): ...@@ -47,4 +58,4 @@ def show_reference_template(request, template):
return render_to_response(template, context) return render_to_response(template, context)
except TopLevelLookupException: except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {template}".format(template=template)) return HttpResponseNotFound('Missing template {template}'.format(template=template))
package.json
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,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.6", "edx-bootstrap": "~0.1.7",
"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",
......
themes/edge.edx.org/cms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Override theming for edx.org bootstrap
$body-bg: #f5f5f5 !default;
@import 'edx-bootstrap/sass/edx/theme';
themes/edx.org/cms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Override theming for edx.org bootstrap
$body-bg: #f5f5f5 !default;
@import 'edx-bootstrap/sass/edx/theme';
themes/red-theme/cms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Sample red theme to demonstrate SASS overrides
// Theme colors
//
// Note: define colors needed by your theme first
$red: #d9534f !default;
$brand-primary: $red;
// Theme fonts
$font-family-sans-serif: cursive;
// Initialize the Open edX bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme';
themes/red-theme/cms/static/sass/partials/cms/base/_variables.scss 0 → 100755
// Color overrides
$white: rgb(255,255,255);
$red: #d9534f !default;
$footer-bg: $white;
$header-bg: $white;
$header-border-color: $red;
$base-font-color: $red;
$link-color: $red;
$lms-active-color: $red;
$lms-label-color: $red;
@import 'cms/static/sass/partials/cms/base/variables';
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