Skip to content

E
edx-platform
Commit c027f90d by Brian Talbot Committed by cahrens
Options

Studio: course outline revised styling with reference templates

parent fdc79b30
Showing with 1652 additions and 489 deletions
cms/static/sass/_developer.scss
...@@ -8,78 +8,3 @@ ...@@ -8,78 +8,3 @@
// } // }
// -------------------- // --------------------
//.wrapper-xblock-header {
.view-outline {
.add-xblock-component {
text-align: center;
.add-button {
padding: 5px 10px;
background-color: $blue;
color: $white;
text-align: center;
}
}
.draggable-drop-indicator {
left: 0;
}
.nav-actions {
.collapse-all {
.expand-all {
display: none;
}
}
.expand-all {
.collapse-all {
display: none;
}
}
}
.outline-item {
padding: 6px 8px 8px 16px;
text-wrap: avoid;
border: 1px solid $gray;
margin: 5px;
background-color: $white;
.wrapper-xblock-header-secondary {
padding: 0px 8px 0px 26px;
.meta-info {
font-size: 12px;
}
}
.xblock-title {
width: 100%;
}
.actions-list {
.action-item {
display: inline-block;
}
}
}
.outline-item.collapsed {
.sortable-list,
.add-xblock-component {
display: none;
}
}
.item-actions {
.configure-button {
float: left;
margin-right: 13px;
color: #a4aab7;
}
}
}
cms/static/sass/_variables.scss
...@@ -160,6 +160,17 @@ $shadow-l2: rgba($black, 0.05); ...@@ -160,6 +160,17 @@ $shadow-l2: rgba($black, 0.05);
$shadow-d1: rgba($black, 0.4); $shadow-d1: rgba($black, 0.4);
$shadow-d2: rgba($black, 0.6); $shadow-d2: rgba($black, 0.6);
// colors - application
$color-draft: $gray-l3;
$color-live: $blue;
$color-ready: $green;
$color-warning: $orange-l2;
$color-error: $red-l2;
$color-staff-only: $black;
$color-heading-base: $gray-d2;
$color-copy-base: $gray-l1;
// ==================== // ====================
// timing - used for animation/transition mixin syncing // timing - used for animation/transition mixin syncing
......
cms/static/sass/assets/_anims.scss
...@@ -247,3 +247,27 @@ ...@@ -247,3 +247,27 @@
%anim-flashDouble { %anim-flashDouble {
@include animation(flashDouble $tmg-f1 ease-in-out 1); @include animation(flashDouble $tmg-f1 ease-in-out 1);
} }
// ====================
// pulse
@include keyframes(pulse) {
0% {
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-pulse {
@include animation(pulse $tmg-f1 ease-in-out 1);
}
cms/static/sass/elements/_controls.scss
...@@ -279,7 +279,7 @@ ...@@ -279,7 +279,7 @@
} }
} }
// UI: elem is collapsible // UI: elem is collapsible - TODO: this should be transitioned away from in favor of %ui-expand-collapse
%expand-collapse { %expand-collapse {
@include transition(all $tmg-f2 linear 0s); @include transition(all $tmg-f2 linear 0s);
display: inline-block; display: inline-block;
...@@ -305,6 +305,41 @@ ...@@ -305,6 +305,41 @@
} }
} }
// UI: expand collapse
%ui-expand-collapse {
@include transition(all $tmg-f2 linear 0s);
// CASE: default (is expanded)
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
display: inline-block;
vertical-align: middle;
.icon {
@include transition(all $tmg-f2 ease-in-out 0s);
}
// STATE: hover/active
&:hover, &:active {
cursor: pointer;
color: $ui-link-color-focus;
}
}
// CASE: is collapsed
&.is-collapsed {
.ui-toggle-expansion {
.icon {
@include transform(rotate(-90deg));
@include transform-origin(50% 50%);
}
}
}
}
// UI: drag handles // UI: drag handles
.drag-handle { .drag-handle {
......
cms/static/sass/elements/_layout.scss
...@@ -77,10 +77,18 @@ ...@@ -77,10 +77,18 @@
vertical-align: baseline; vertical-align: baseline;
} }
&.new-button { // CASE: new/create button
&.new-button,
&.button-new {
@extend %btn-primary-green; @extend %btn-primary-green;
@extend %sizing; @extend %sizing;
} }
// CASE: toggle button
&.button-toggle {
@extend %btn-secondary-gray;
@extend %sizing;
}
} }
} }
} }
......
cms/static/sass/elements/_modules.scss
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
// Patterns for pieces of content - modules - used throughout the app // Patterns for pieces of content - modules - used throughout the app
// basic gray module with a strong top border and title, with related content box attached // basic gray module with a strong top border and title, with related content box attached
// --------------------
%bar-module { %bar-module {
margin-bottom: $baseline; margin-bottom: $baseline;
border-top: 5px solid $gray-l1; border-top: 5px solid $gray-l1;
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
} }
// blue bar and title bg version // blue bar and title bg version
// --------------------
%bar-module-blue { %bar-module-blue {
@extend %bar-module; @extend %bar-module;
border-top: 5px solid $blue; border-top: 5px solid $blue;
...@@ -47,6 +49,7 @@ ...@@ -47,6 +49,7 @@
} }
// green bar and title bg version // green bar and title bg version
// --------------------
%bar-module-green { %bar-module-green {
@extend %bar-module; @extend %bar-module;
border-top: 5px solid $green; border-top: 5px solid $green;
...@@ -57,6 +60,7 @@ ...@@ -57,6 +60,7 @@
} }
// yellow bar and title bg version // yellow bar and title bg version
// --------------------
%bar-module-yellow { %bar-module-yellow {
@extend %bar-module; @extend %bar-module;
border-top: 5px solid $orange-l2; border-top: 5px solid $orange-l2;
...@@ -67,6 +71,7 @@ ...@@ -67,6 +71,7 @@
} }
// red bar and title bg version // red bar and title bg version
// --------------------
%bar-module-red { %bar-module-red {
@extend %bar-module; @extend %bar-module;
border-top: 5px solid $red-l2; border-top: 5px solid $red-l2;
...@@ -88,6 +93,7 @@ ...@@ -88,6 +93,7 @@
// Add new component menu with big green buttons // Add new component menu with big green buttons
// outermost wrapper for add a new component menu // outermost wrapper for add a new component menu
// --------------------
.add-xblock-component { .add-xblock-component {
margin: $baseline ($baseline/2); margin: $baseline ($baseline/2);
border: 1px solid $gray-l3; border: 1px solid $gray-l3;
...@@ -146,6 +152,7 @@ ...@@ -146,6 +152,7 @@
// outer most wrapper div for scroll up component picker menus // outer most wrapper div for scroll up component picker menus
// swaps in when a green button is clicked // swaps in when a green button is clicked
// --------------------
.new-component-templates { .new-component-templates {
@include clearfix; @include clearfix;
display: none; display: none;
...@@ -175,6 +182,7 @@ ...@@ -175,6 +182,7 @@
} }
// individual menus // individual menus
// --------------------
.new-component-template { .new-component-template {
@include clearfix; @include clearfix;
...@@ -207,6 +215,7 @@ ...@@ -207,6 +215,7 @@
} }
// basic and advanced problem tabs - also handled by jquery-ui tabs // basic and advanced problem tabs - also handled by jquery-ui tabs
// --------------------
.problem-type-tabs { .problem-type-tabs {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
list-style-type: none; list-style-type: none;
...@@ -252,4 +261,281 @@ ...@@ -252,4 +261,281 @@
} }
} }
// outline UI
// --------------------
// outline: utilities
$outline-indent-width: $baseline;
// UI: section
%outline-section {
@include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s);
border-left: 1px solid $color-draft;
// STATE: is-collapsed
&.is-collapsed {
border-left-width: ($baseline/4);
// CASE: is ready to be live
&.is-ready {
border-left-color: $color-ready;
}
// CASE: is live
&.is-live {
border-left-color: $color-live;
}
// CASE: has staff-only content
&.is-staff-only {
border-left-color: $color-staff-only;
}
// CASE: has unpublished content
&.has-warnings {
border-left-color: $color-warning;
}
// CASE: has errors
&.has-errors {
border-left-color: $color-error;
}
}
}
// UI: subsection
%outline-subsection {
@include transition(border-left-color $tmg-f2 linear 0s);
border-left: ($baseline/4) solid $color-draft;
// CASE: is ready to be live
&.is-ready {
border-left-color: $color-ready;
}
// CASE: is live
&.is-live {
border-left-color: $color-live;
}
// CASE: has staff-only content
&.is-staff-only {
border-left-color: $color-staff-only;
}
// CASE: has unpublished content
&.has-warnings {
border-left-color: $color-warning;
}
// CASE: has errors
&.has-errors {
border-left-color: $color-error;
}
}
%outline-item {
// UI: item title
.item-title {
@include transition(color $tmg-f2 ease-in-out 0s);
}
// CASE: last-child in UI
&:last-child {
margin-bottom: 0;
}
// CASE: has staff-only content
&.is-staff-only {
// needed to make sure direct children only
> .section-status,
> .subsection-status,
> .unit-status {
.icon {
color: $color-staff-only;
}
}
}
// CASE: has unpublished content
&.has-warnings {
// needed to make sure direct children only
> .section-status .status-message,
> .subsection-status .status-message,
> .unit-status .status-message {
.icon {
color: $color-warning;
}
}
}
// CASE: has errors
&.has-errors {
// needed to make sure direct children only
> .section-status .status-message,
> .subsection-status .status-message,
> .unit-status .status-message,
> .section-status .status-message-copy,
> .subsection-status .status-message-copy,
> .unit-status .status-message-copy {
color: $color-error;
}
}
}
%outline-item-status {
@extend %t-copy-sub2;
@extend %t-strong;
color: $color-copy-base;
.icon {
@extend %t-icon5;
margin-right: ($baseline/4);
}
}
// outline: sections
.outline-section {
@extend %ui-window;
@extend %outline-item;
@extend %outline-section;
margin-bottom: $baseline;
padding: ($baseline*0.75) $baseline;
// header - title
.section-title {
@extend %t-title5;
@extend %t-strong;
color: $color-heading-base;
}
// status
.section-status {
@extend %outline-item-status;
}
// status - release
.status-release {
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.65;
}
// status - grading
.status-grading {
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.65;
}
.status-grading-value {
display: inline-block;
vertical-align: middle;
}
.status-grading-date {
display: inline-block;
vertical-align: middle;
margin-left: ($baseline/4);
}
// status - message
.status-message {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/4);
.icon {
margin-right: ($baseline/4);
}
}
.status-message-copy {
display: inline-block;
color: $color-heading-base;
}
// STATE: hover/active
&:hover, &:active {
// status - release
> .section-status .status-release {
opacity: 1.0;
}
}
}
// outline: subsections
.outline-subsection {
@extend %outline-item;
@extend %outline-subsection;
margin-bottom: ($baseline/2);
border: 1px solid $gray-l4;
border-left: ($baseline/4) solid $color-draft;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: ($baseline*0.75);
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
}
// STATE: is-collapsed
&.is-collapsed {
}
// header - title
.subsection-title {
@extend %t-title6;
color: $color-heading-base;
}
// status
.subsection-status {
@extend %outline-item-status;
}
// STATE: hover/active
&:hover, &:active {
// status - release
> .subsection-status .status-release {
opacity: 1.0;
}
// status - grading
> .subsection-status .status-grading {
opacity: 1.0;
}
}
}
// outline: units
.outline-unit {
@extend %outline-item;
margin-bottom: ($baseline/2);
border: 1px solid $gray-l4;
padding: ($baseline/4) ($baseline/2);
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
}
// header - title
.unit-title {
@extend %t-title7;
color: $color-heading-base;
}
.unit-status {
@extend %outline-item-status;
}
}
cms/static/sass/elements/_typography.scss
...@@ -3,6 +3,23 @@ ...@@ -3,6 +3,23 @@
// Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) // Scale - (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// weights
%t-ultrastrong {
font-weight: 800;
}
%t-strong {
font-weight: 600;
}
%t-regular {
font-weight: 400;
}
%t-light {
font-weight: 300;
}
%t-ultralight {
font-weight: 200;
}
// headings/titles // headings/titles
%t-title { %t-title {
font-family: $f-sans-serif; font-family: $f-sans-serif;
......
cms/static/sass/views/_outline.scss
// studio - views - course outline // studio - views - course outline
// ==================== // ====================
// view-specific utilities
// --------------------
%outline-item-header {
@include clearfix();
line-height: 0;
}
%outline-item-content-hidden {
display: none;
}
%outline-item-content-shown {
display: block;
}
.view-outline { .view-outline {
// page structure // page structure
// --------------------
.content-primary, .content-primary,
.content-supplementary { .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -37,26 +53,39 @@ ...@@ -37,26 +53,39 @@
} }
// page header bits // page header
.toggle-button-sections { // --------------------
@extend %t-copy-sub2; .button-toggle-expand-collapse {
position: relative;
display: none; // STATE: action will collapse all
float: right; &.collapse-all {
margin-top: ($baseline/4);
color: $gray-l1;
&.is-shown { .expand-all {
display: block; display: none;
}
.collapse-all {
display: block;
}
} }
.label { // STATE: action will expand all
display: inline-block; &.expand-all {
.collapse-all {
display: none;
}
.expand-all {
display: block;
}
} }
} }
// adding outline elements
// --------------------
// new section, subsection, unit // forms
.new-section-name, .new-section-name,
.new-subsection-name-input { .new-subsection-name-input {
@include font-size(16); @include font-size(16);
...@@ -84,6 +113,7 @@ ...@@ -84,6 +113,7 @@
color: $gray-l1; color: $gray-l1;
} }
// buttons
.new-subsection-item, .new-subsection-item,
.new-unit-item { .new-unit-item {
@extend %ui-btn-flat-outline; @extend %ui-btn-flat-outline;
...@@ -106,491 +136,260 @@ ...@@ -106,491 +136,260 @@
// UI: general action list styles (section and subsection) // UI: general action list styles (section and subsection)
// --------------------
.expand-collapse { .expand-collapse {
@extend %expand-collapse; @extend %expand-collapse;
margin: 0 ($baseline/4);
} }
// UI: element actions list // outline
// TODO: outline page can be updated to reflect styling from %actions-list in _controls.scss // --------------------
.actions-list { .outline {
display: inline-block;
margin-bottom: 0;
}
.actions-item {
@include font-size(13);
display: inline-block;
padding: 0 ($baseline/5);
vertical-align: middle;
.action { // add/new items
min-width: ($baseline*.75); .add-item {
color: $gray-l2; margin-top: ($baseline*0.75);
&:hover, .button-new {
&.is-set { @extend %ui-btn-flat-outline;
color: $blue; padding: ($baseline/2) $baseline;
visibility: visible; display: block;
}
//reset old drag handle style .icon {
&.drag-handle { display: inline-block;
float: none; vertical-align: middle;
margin: 0; margin-right: ($baseline/2);
background: transparent url(../img/drag-handles.png) right 5px no-repeat; }
text-align: center;
} }
} }
}
.add-section {
margin-bottom: $baseline;
}
// section styles .add-subsection {
.courseware-section {
@extend %ui-window;
@include transition(background $tmg-avg ease-in-out 0);
position: relative;
padding: ($baseline*1.5) $baseline $baseline $baseline;
&.collapsed {
padding-bottom: 0;
} }
&.collapsed .subsection-list, .add-unit {
.collapsed .subsection-list, margin-left: $outline-indent-width;
.collapsed > ol {
display: none !important;
} }
}
&.new-section { // outline: items
padding: ($baseline*1.5) $baseline 0 $baseline; .outline-item {
header {
@include clearfix();
height: auto;
border-bottom: 0;
.expand-collapse { // CASE: expand/collapse-able
display: none; &.is-collapsible {
}
.item-details { // only select the current item's toggle expansion controls
width: auto; &:nth-child(1) .ui-toggle-expansion, &:nth-child(1) .item-title {
.section-name { // STATE: hover/active
float: none; &:hover, &:active {
width: 100%; color: $blue;
}
} }
} }
} }
.section { // item: title
@include clearfix(); .item-title {
min-height: 65px; // needed to align with edit input
margin-bottom: 0;
border: 0;
padding: 0;
// section name area
.item-details {
@include clearfix();
width: 400px;
float: none;
display: inline-block;
padding: 0 0 ($baseline/2) 0;
.section-name {
@include font-size(19);
margin-right: ($baseline/2);
}
.section-name-span {
@include transition(color $tmg-f2 linear 0s);
cursor: pointer;
&:hover {
color: $blue;
}
}
.section-name-edit {
position: relative;
width: ($baseline*20);
background: $white;
input {
@include font-size(16);
}
.save-button {
@include blue-button;
padding: 7px $baseline 7px;
margin-right: ($baseline/4);
}
.cancel-button {
@include white-button;
padding: 7px $baseline 7px;
}
}
}
// section specific action styles
.item-actions {
position: relative;
display: inline-block;
float: right;
margin-bottom: ($baseline/2);
top: 0;
}
.actions-item {
padding: 0 0 0 8px;
&:last-child {
padding-right: 4px;
}
&.pubdate {
padding-right: 0;
}
.action {
&.pubdate {
visibility: hidden;
}
&:hover,
&.is-set {
color: $blue;
visibility: visible;
}
}
.section-published-date {
padding: ($baseline/5) ($baseline/2);
border-radius: 3px;
background: $gray-l5;
text-align: right;
.published-status {
@include font-size(12);
margin-right: 15px;
strong { // STATE: is-editable
font-weight: bold; &.is-editable {
}
}
&.released .section-published-date { // editor
background-color: transparent; + .editor {
color: $gray-l1; display: block;
a {
color: $gray-l2;
&:hover { .item-edit-title {
color: $blue; width: 100%;
}
}
} }
} }
} }
} }
} }
// outline: sections
// --------------------
.outline-section {
// subsection styles // header
.courseware-subsection { .section-header {
@include clearfix(); @extend %outline-item-header;
padding: 3px 0;
&.visible {
border-left: 5px solid $green;
}
&.mixed {
border-left: 5px solid $yellow-s1;
}
.status {
@extend %cont-text-sr;
} }
.section-item { .section-header-details {
@include transition(background $tmg-avg ease-in-out 0); float: left;
@include font-size(13); width: flex-grid(6, 9);
position: relative;
display: block;
background-color: $gray-l5;
padding: 6px 8px 8px 16px;
&:hover {
background: $blue-l5;
.item-actions { .icon, .wrapper-section-title {
display: block; display: inline-block;
} vertical-align: top;
} }
&.editing { .icon {
background: $orange-l4; margin-right: ($baseline/4);
} }
}
.details { .wrapper-section-title {
display: block; width: flex-grid(5, 6);
margin-bottom: 0; line-height: 0;
width: 600px;
a {
color: $baseFontColor;
} }
} }
}
// gradable drop down .section-header-actions {
.gradable-status { float: right;
display: inline-block; width: flex-grid(3, 9);
position: relative; margin-top: -($baseline/4);
.status-label {
@include font-size(12);
width: 110px;
padding: 5px 40px 5px 10px;
border-radius: 3px;
color: transparent;
text-align: right; text-align: right;
font-weight: bold;
line-height: 16px;
}
.menu-toggle { .actions-list {
@extend %ui-depth1; @extend %actions-list;
position: absolute; @extend %t-action2;
top: 0;
right: 5px;
padding: 2px 5px;
color: $gray-l2;
&:hover,
&.is-active {
color: $blue;
}
&:focus {
outline: 0;
} }
} }
// status
.section-status {
margin: 0 0 0 ($outline-indent-width*1.25);
}
// gradable dropdown menu default // content
.menu { .section-content {
@include font-size(12); @extend %outline-item-content-shown;
@include transition(opacity $tmg-f2 linear 0s);
display: none;
opacity: 0.0;
z-index: 1;
position: absolute;
top: -4px;
right: 0;
margin: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
border: 1px solid $gray-l2;
border-radius: 4px;
padding: 8px 12px;
background: $white;
li {
width: 115px;
margin-bottom: 3px;
border-bottom: 1px solid $gray-l4;
padding-bottom: 3px;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
.gradable-status-notgraded {
color: $gray;
}
}
}
a {
color: $blue;
&.is-selected {
font-weight: bold;
}
}
} }
// gradable dropdown state // CASE: is-collapsible
&.is-active { &.is-collapsible {
@extend %ui-expand-collapse;
.menu { .ui-toggle-expansion {
@extend %ui-depth3; @extend %t-icon3;
display: block; color: $gray-l3;
opacity: 1.0;
}
.menu-toggle {
@extend %ui-depth4;
} }
} }
// set state // STATE: is-collapsed
&.is-set { &.is-collapsed {
.menu-toggle { .section-content {
color: $blue; @extend %outline-item-content-hidden;
}
.status-label {
display: block;
color: $blue;
} }
} }
} }
.courseware-subsection .sortable-unit-list { // outline: subsections
margin: ($baseline/4) 0 0 0; // --------------------
.list-subsections {
margin: $baseline 0 0 0;
} }
// unit styles .outline-subsection {
.courseware-unit {
margin: -1px 0 0 ($baseline*1.75);
&.add-new-unit { // header
margin: 5px ($baseline*1.75) 0 ($baseline*1.75); .subsection-header {
@extend %outline-item-header;
} }
.section-item { .subsection-header-details {
border: 0; float: left;
background-color: $white; width: flex-grid(6, 9);
}
.public-item { .icon, .wrapper-subsection-title {
color: $black; display: inline-block;
} vertical-align: top;
}
.private-item { .icon {
color: $gray-l1; margin-right: ($baseline/4);
} }
.draft-item { .wrapper-subsection-title {
color: $yellow-d1; width: flex-grid(5, 6);
margin-top: -($baseline/10);
line-height: 0;
}
} }
.draft-item:after, .subsection-header-actions {
.public-item:after, float: right;
.private-item:after { width: flex-grid(3, 9);
@include font-size(9); margin-top: -($baseline/4);
margin-left: 3px; text-align: right;
font-weight: 600;
text-transform: uppercase;
}
.draft-item:after { .actions-list {
content: "- draft"; @extend %actions-list;
@extend %t-action2;
margin-right: ($baseline/2);
}
} }
.private-item:after { // status
content: "- private"; .subsection-status {
margin: 0 0 0 $outline-indent-width;
} }
}
// content
// modal to edit section publish settings .subsection-content {
// basic non-backbone modal-window set-up @extend %outline-item-content-shown;
.wrapper-modal-window {
@extend %ui-depth4;
@include transition(all $tmg-f2 ease-in-out);
visibility: hidden;
pointer-events: none;
display: none;
position: fixed;
top: 0;
overflow: scroll;
background: $black-t2;
width: 100%;
height: 100%;
text-align: center;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
} }
.modal-window { // CASE: is-collapsible
-webkit-transform: translate(-50%, -50%); &.is-collapsible {
transform: translate(-50%, -50%); @extend %ui-expand-collapse;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
}
}
// modal-window showing/hiding .ui-toggle-expansion {
&.modal-window-is-shown { @extend %t-icon4;
overflow: hidden; color: $gray-l3;
}
}
.wrapper-modal-window.is-shown { // STATE: is-collapsed
visibility: visible; &.is-collapsed {
pointer-events: auto;
display: block;
.modal-window { .subsection-content {
opacity: 1.0; @extend %outline-item-content-hidden;
} }
} }
} }
.edit-section-publish-settings { // outline: units
// --------------------
.picker { .list-units {
@include clearfix(); margin: $baseline 0 0 0;
}
.outline-unit {
margin-left: $outline-indent-width;
.field { // header
float: left; .unit-header {
margin: 0 ($baseline/2) ($baseline/2); @extend %outline-item-header;
}
label, .unit-header-details {
input { float: left;
display: block; width: flex-grid(6, 9);
text-align: left; margin-top: ($baseline/4);
} }
label { .unit-header-actions {
@extend %t-copy-sub1; float: right;
margin-bottom: ($baseline/4); width: flex-grid(3, 9);
font-weight: 600; margin-top: -($baseline/10);
} text-align: right;
input[type="text"] { .actions-list {
@extend %t-copy-sub1; @extend %actions-list;
} @extend %t-action2;
} }
} }
} }
// UI: drag and drop: section
// UI: DnD - specific elems/cases - section // --------------------
.courseware-section { .outline-section {
.draggable-drop-indicator-before { .draggable-drop-indicator-before {
top: -($baseline/2); top: -($baseline/2);
...@@ -613,8 +412,8 @@ ...@@ -613,8 +412,8 @@
} }
} }
// UI: DnD - specific elems/cases - subsection // UI: drag and drop: subsection
.courseware-subsection { .outline-subsection {
.draggable-drop-indicator-before { .draggable-drop-indicator-before {
top: 0; top: 0;
...@@ -638,8 +437,8 @@ ...@@ -638,8 +437,8 @@
} }
} }
// UI: DnD - specific elems/cases - unit // // UI: drag and drop: unit
.courseware-unit { .outline-unit {
.draggable-drop-indicator-before { .draggable-drop-indicator-before {
top: 0; top: 0;
...@@ -658,7 +457,7 @@ ...@@ -658,7 +457,7 @@
} }
} }
// UI: DnD - specific elems/cases - empty parents splint // UI: drag and drop: splints
.ui-splint-indicator { .ui-splint-indicator {
position: relative; position: relative;
} }
......
cms/templates/ux/reference/outline.html 0 → 100644
<%inherit file="../../base.html" />
<%!
from django.core.urlresolvers import reverse
%>
<%block name="title">[template] Course Outline UI</%block>
<%block name="bodyclass">is-signedin course view-outline</%block>
<%block name="content">
<div id="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">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="button button-toggle button-toggle-expand-collapse collapse-all">
<span class="collapse-all"><i class="icon-arrow-up"></i> <span class="label">Collapse All Sections</span></span>
<span class="expand-all"><i class="icon-arrow-down"></i> <span class="label">Expand All Sections</span></span>
</a>
</li>
<li class="nav-item">
<a href="#" class="button button-new" data-category="chapter" data-parent="" data-default-name="">
<i class="icon-plus"></i>Add Section
</a>
</li>
<li class="nav-item">
<a href="" rel="external" class="button button-view view-live-button" title="This link will open in a new browser window/tab">View Live</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="wrapper-dnd">
<article class="outline" data-locator="" data-course-key="">
<h2 class="sr outline-title">Your Course's Outline</h2>
<ol class="list-sections is-sortable">
<!-- section -->
<li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_section_header-expanded.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<ol class="list-subsections is-sortable">
<!-- subsection -->
<li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_subsection_header-expanded.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<ol class="list-units is-sortable">
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
</ol>
<!-- /list: units -->
</div>
<%include file="outline_add-unit.html" />
<!-- /subsection-content -->
</li>
<!-- /subsection -->
<!-- subsection -->
<li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_subsection_header-expanded.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<ol class="list-units is-sortable">
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
</ol>
<!-- /list: units -->
<%include file="outline_add-unit.html" />
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection -->
</ol>
<!-- /list: subsections -->
<%include file="outline_add-subsection.html" />
</div>
<!-- /section-content -->
</li>
<!-- /section -->
</ol>
<!-- /list: sections -->
<%include file="outline_add-section.html" />
<!-- ========== -->
<!-- STATES: sections -->
<ol class="list-sections is-sortable">
<!-- section: not published + not scheduled/released -->
<li class="outline-item outline-section is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: not published + not scheduled/released -->
<!-- section: published + scheduled -->
<li class="outline-item outline-section is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled -->
<!-- section: published + released -->
<li class="outline-item outline-section is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released -->
<!-- section: published + scheduled + locked content -->
<li class="outline-item outline-section is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled + locked content -->
<!-- section: published + released + locked content -->
<li class="outline-item outline-section is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released + locked content -->
<!-- section: locked content -->
<li class="outline-item outline-section is-collapsible is-draggable is-staff-only is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-lock.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: locked content -->
<!-- section: published + released + has unpublished content -->
<li class="outline-item outline-section is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released + has unpublished content -->
<!-- section: published + scheduled + has unpublished content -->
<li class="outline-item outline-section is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled + has unpublished content -->
<!-- section: published + released + has error -->
<li class="outline-item outline-section is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + released + has error -->
<!-- section: published + scheduled + has error -->
<li class="outline-item outline-section is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_section_header-collapsed.html" />
<div class="section-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<!-- subsections + units here -->
</div>
</li>
<!-- /section: published + scheduled + has error -->
<!-- ========== -->
<!-- section: placeholder -->
<li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_section_header-expanded.html" />
<div class="section-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<ol class="list-subsections is-sortable">
<!-- subsection: not published + not scheduled/released -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<!-- units here -->
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: not published + not scheduled/released -->
<!-- subsection: not published + not scheduled/released + graded -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-draft.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: not published + not scheduled/released + graded -->
<!-- subsection: published + scheduled w/ section -->
<li class="outline-item outline-subsection is-collapsible is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled_with_parent.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled w/ section -->
<!-- subsection: published + scheduled + graded -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + graded -->
<!-- subsection: published + scheduled + graded + due date -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + graded + due date -->
<!-- subsection: published + scheduled + graded + due date + locked content -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-ready is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_grading.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + graded + due date + locked content -->
<!-- subsection: published + released -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-scheduled is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released_with_parent.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released -->
<!-- subsection: published + released (on specific date) + graded -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-check-sign"></i>
Released <span class="sr">on</span>:
</span>
<span class="status-release-date">March 25, 2014</span>
</p>
</div>
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released (on specific date) + graded -->
<!-- subsection: published + released + graded + due date -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released_with_parent.html" />
<%include file="outline_status_grading.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + graded + due date -->
<!-- subsection: published + released + graded + due date + locked content -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-live is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released_with_parent.html" />
<%include file="outline_status_grading.html" />
<%include file="outline_status_message-lock.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + graded + due date + locked content -->
<!-- subsection: locked content -->
<li class="outline-item outline-subsection is-collapsible is-draggable is-staff-only is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-lock.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: locked content -->
<!-- subsection: published + scheduled + has unpublished content -->
<li class="outline-item outline-subsection is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-unpublished_units.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + has unpublished content -->
<!-- subsection: published + released + has unpublished content -->
<li class="outline-item outline-subsection is-collapsible is-draggable has-warnings is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + has unpublished content -->
<!-- subsection: published + released + has error -->
<li class="outline-item outline-subsection is-collapsible is-draggable has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-released.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + released + has error -->
<!-- subsection: published + scheduled + has error -->
<li class="outline-item outline-subsection is-collapsible has-errors is-collapsed" data-parent="" data-locator="">
<%include file="outline_subsection_header-collapsed.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
<%include file="outline_status_message-error.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: published + scheduled + has error -->
</ol>
</div>
</li>
<!-- /section: placeholder -->
<!-- ========== -->
<!-- section: placeholder -->
<li class="outline-item outline-section is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_section_header-expanded.html" />
<div class="section-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /section-status -->
<div class="section-content">
<ol class="list-subsections is-sortable">
<!-- subsection: placeholder -->
<li class="outline-item outline-subsection is-collapsible is-draggable" data-parent="" data-locator="">
<%include file="outline_subsection_header-expanded.html" />
<div class="subsection-status">
<%include file="outline_status_release-scheduled.html" />
</div>
<!-- /subsection-status -->
<div class="subsection-content">
<ol class="list-units is-sortable">
<!-- unit -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
</div>
<!-- /unit-status -->
</li>
<!-- /unit -->
<!-- unit: not published -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_release-draft.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: not published -->
<!-- unit: published -->
<li class="outline-item outline-unit is-draggable" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
</li>
<!-- /unit: published -->
<!-- unit: not published + locked content -->
<li class="outline-item outline-unit is-draggable is-staff-only" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-lock.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: not published + locked content -->
<!-- unit: published + has unpublished content -->
<li class="outline-item outline-unit is-draggable has-warnings" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-unpublished_changes.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: published + has unpublished content -->
<!-- unit: not published + has unpublished content -->
<li class="outline-item outline-unit is-draggable has-warnings" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-unpublished_units.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: not published + has unpublished content -->
<!-- unit: has error -->
<li class="outline-item outline-unit is-draggable has-errors" data-parent="" data-locator="">
<%include file="outline_unit_header.html" />
<div class="unit-status">
<%include file="outline_status_message-error.html" />
</div>
<!-- /unit-status -->
</li>
<!-- /unit: has error -->
</ol>
<!-- /list: units -->
<%include file="outline_add-unit.html" />
</div>
<!-- /subsection-content -->
</li>
<!-- /subsection: placeholder -->
</ol>
<%include file="outline_add-subsection.html" />
</div>
</li>
<!-- /section: placeholder -->
</ol>
<%include file="outline_add-section.html" />
</article>
</div>
<div class="ui-loading is-hidden">
<p><span class="spin">
<i class="icon-refresh"></i></span>
<span class="copy">Loading &hellip;</span>
</p>
</div>
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">What can I do on this page?</h3>
<p>You can create new sections and subsections, set the release date for sections, and create new units in existing subsections. You can set the assignment type for subsections that are to be graded, and you can open a subsection for further editing.</p>
<p>In addition, you can drag and drop sections, subsections, and units to reorganize your course.</p>
</div>
</aside>
</section>
</div>
</div>
</%block>
cms/templates/ux/reference/outline_add-section.html 0 → 100644
<div class="add-section add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Section">
<i class="icon icon-plus"></i> New Section
</a>
</div>
<!-- /add-section -->
cms/templates/ux/reference/outline_add-subsection.html 0 → 100644
<div class="add-subsection add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Subsection">
<i class="icon icon-plus"></i> New Subsection
</a>
</div>
<!-- /add-subsection -->
cms/templates/ux/reference/outline_add-unit.html 0 → 100644
<div class="add-unit add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Unit">
<i class="icon icon-plus"></i> New Unit
</a>
</div>
<!-- /add-unit -->
cms/templates/ux/reference/outline_section_header-collapsed.html 0 → 100644
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
cms/templates/ux/reference/outline_section_header-expanded.html 0 → 100644
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
cms/templates/ux/reference/outline_status_grading.html 0 → 100644
<div class="status-grading">
<p>
<span class="sr status-grading-label">Graded as:</span>
<i class="icon icon-ok"></i>
<span class="status-grading-value">Homework</span>
<span class="status-grading-date">Due: December 31, 2014</span>
</p>
</div>
cms/templates/ux/reference/outline_status_message-error.html 0 → 100644
<div class="status-message">
<i class="icon icon-warning-sign"></i>
<p class="status-message-copy">Critical error</p>
</div>
cms/templates/ux/reference/outline_status_message-lock.html 0 → 100644
<div class="status-message">
<i class="icon icon-lock"></i>
<p class="status-message-copy">Contains Staff only content</p>
</div>
cms/templates/ux/reference/outline_status_message-unpublished_changes.html 0 → 100644
<div class="status-message">
<i class="icon icon-file-alt"></i>
<p class="status-message-copy">Unpublished change(s) to live content</p>
</div>
cms/templates/ux/reference/outline_status_message-unpublished_units.html 0 → 100644
<div class="status-message">
<i class="icon icon-file-alt"></i>
<p class="status-message-copy">Unpublished unit(s) will not be released</p>
</div>
cms/templates/ux/reference/outline_status_release-draft.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-file-alt"></i>
<span class="sr">This item is</span>
</span>
<span class="status-release-date">Unscheduled</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-lock.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-lock"></i>
Will never release - Contains Staff only content
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-released.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-check-sign"></i>
Released <span class="sr">on</span>:
</span>
<span class="status-release-date">March 25, 2014</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-released_with_parent.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-check-sign"></i>
Released with Section
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-scheduled.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-time"></i>
Scheduled: October 31, 2014
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-time"></i>
Scheduled: with Section
</span>
</p>
</div>
cms/templates/ux/reference/outline_subsection_header-collapsed.html 0 → 100644
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</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">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
cms/templates/ux/reference/outline_subsection_header-expanded.html 0 → 100644
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</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">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
cms/templates/ux/reference/outline_unit_header.html 0 → 100644
<div class="unit-header">
<h3 class="unit-header-details">
<span class="unit-title item-title"><a class="unit-url" href="">Unit Name</a></span>
</h3>
<div class="unit-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /unit-header -->
common/static/sass/_mixins.scss
...@@ -90,11 +90,16 @@ ...@@ -90,11 +90,16 @@
// extends - UI - window // extends - UI - window
%ui-window { %ui-window {
@include clearfix(); @include clearfix();
border-radius: 3px; border-radius: ($baseline/10);
box-shadow: 0 1px 1px $shadow-l1; box-shadow: 0 1px 1px $shadow-l2;
margin-bottom: $baseline; margin-bottom: $baseline;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
background: $white; background: $white;
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow;
}
} }
// extends - UI - visual link // extends - UI - visual link
...@@ -226,7 +231,6 @@ ...@@ -226,7 +231,6 @@
border-radius: ($baseline/4); border-radius: ($baseline/4);
border: 1px solid $blue-l2; border: 1px solid $blue-l2;
padding: 1px ($baseline/2) 2px ($baseline/2); padding: 1px ($baseline/2) 2px ($baseline/2);
background-color: $white;
color: $blue-l2; color: $blue-l2;
&:hover, &:focus { &:hover, &:focus {
......
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