Update to use Bootstrap beta release
FEDX-375
This commit is contained in:
Andy Armstrong
@@ -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
|
||||
|
||||
@@ -9,3 +9,7 @@
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sr {
|
||||
@include sr-only();
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
14
cms/templates/ux/reference/bootstrap/course-settings.html
Normal 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>
|
||||
@@ -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">> </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
527
cms/templates/ux/reference/fragments/course-settings.html
Normal file
File diff suppressed because one or more lines are too long
@@ -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
11
cms/templates/ux/reference/v1/course-settings.html
Normal 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>
|
||||
@@ -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
|
||||
|
||||
@@ -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'),
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user