diff --git a/cms/static/coffee/spec/views/overview_spec.coffee b/cms/static/coffee/spec/views/overview_spec.coffee
index 02de783412..6aaa954c6c 100644
--- a/cms/static/coffee/spec/views/overview_spec.coffee
+++ b/cms/static/coffee/spec/views/overview_spec.coffee
@@ -55,23 +55,35 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
"""
appendSetFixtures """
-
- -
+
+
+ -
+
+
+
+
+ -
- -
+
-
- -
-
+ -
+
-
+ -
+
+
+
+
+
+
"""
spyOn(Overview, 'saveSetSectionScheduleDate').andCallThrough()
@@ -94,6 +106,13 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
'li.courseware-subsection, article.subsection-body'
)
+ Overview.overviewDragger.makeDraggable(
+ '.courseware-subsection',
+ '.subsection-drag-handle',
+ '.sortable-subsection-list',
+ 'section'
+ )
+
afterEach ->
delete window.analytics
delete window.course_location_analytics
@@ -136,25 +155,54 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
expect(destination.ele).toBe($('#unit-2'))
expect(destination.attachMethod).toBe('before')
- it "can drag and drop across section boundaries, with special handling for first element", ->
+ it "can drag and drop across section boundaries, with special handling for single sibling", ->
$ele = $('#unit-1')
+ $unit4 = $('#unit-4')
$ele.offset(
- top: $('#unit-4').offset().top + 8
+ top: $unit4.offset().top + 8
left: $ele.offset().left
)
+ # Dragging down, we will insert after.
destination = Overview.overviewDragger.findDestination($ele, 1)
- expect(destination.ele).toBe($('#unit-4'))
- # Dragging down into first element, we have a fudge factor makes it easier to drag at beginning.
- expect(destination.attachMethod).toBe('before')
- # Now past the "fudge factor".
- $ele.offset(
- top: $('#unit-4').offset().top + 12
- left: $ele.offset().left
- )
- destination = Overview.overviewDragger.findDestination($ele, 1)
- expect(destination.ele).toBe($('#unit-4'))
+ expect(destination.ele).toBe($unit4)
expect(destination.attachMethod).toBe('after')
+ # Dragging up, we will insert before.
+ destination = Overview.overviewDragger.findDestination($ele, -1)
+ expect(destination.ele).toBe($unit4)
+ expect(destination.attachMethod).toBe('before')
+
+ # If past the end the drop target, will attach after.
+ $ele.offset(
+ top: $unit4.offset().top + $unit4.height() + 1
+ left: $ele.offset().left
+ )
+ destination = Overview.overviewDragger.findDestination($ele, 0)
+ expect(destination.ele).toBe($unit4)
+ expect(destination.attachMethod).toBe('after')
+
+
+ $unit0 = $('#unit-0')
+ # If before the start the drop target, will attach before.
+ $ele.offset(
+ top: $unit0.offset().top - 16
+ left: $ele.offset().left
+ )
+ destination = Overview.overviewDragger.findDestination($ele, 0)
+ expect(destination.ele).toBe($unit0)
+ expect(destination.attachMethod).toBe('before')
+
+ it """can drop before the first element, even if element being dragged is
+ slightly before the first element""", ->
+ $ele = $('#subsection-2')
+ $ele.offset(
+ top: $('#subsection-0').offset().top - 5
+ left: $ele.offset().left
+ )
+ destination = Overview.overviewDragger.findDestination($ele, -1)
+ expect(destination.ele).toBe($('#subsection-0'))
+ expect(destination.attachMethod).toBe('before')
+
it "can drag and drop across section boundaries, with special handling for last element", ->
$ele = $('#unit-4')
$ele.offset(
@@ -174,6 +222,20 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
expect(destination.ele).toBe($('#unit-3'))
expect(destination.attachMethod).toBe('before')
+ it """can drop past the last element, even if element being dragged is
+ slightly before/taller then the last element""", ->
+ $ele = $('#subsection-2')
+ $ele.offset(
+ # Make the top 1 before the top of the last element in the list.
+ # This mimics the problem when the element being dropped is taller then then
+ # the last element in the list.
+ top: $('#subsection-4').offset().top - 1
+ left: $ele.offset().left
+ )
+ destination = Overview.overviewDragger.findDestination($ele, 1)
+ expect(destination.ele).toBe($('#subsection-4'))
+ expect(destination.attachMethod).toBe('after')
+
it "can drag into an empty list", ->
$ele = $('#unit-1')
$ele.offset(
@@ -322,8 +384,8 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
$('#subsection-1').addClass('expand-on-drop')
Overview.overviewDragger.onDragEnd(
{element: $('#subsection-1')},
- null,
- null
+ null,
+ null
)
expect($('#subsection-1')).not.toHaveClass('collapsed')
expect($('#subsection-1')).not.toHaveClass('expand-on-drop')
@@ -335,7 +397,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
Overview.overviewDragger.dragState.parentList = $('#subsection-2')
Overview.overviewDragger.onDragEnd(
{element: $('#unit-1')},
- null,
+ null,
{clientX: $('#unit-1').offset().left}
)
expect($('#subsection-2')).not.toHaveClass('collapsed')
diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index e452936072..b2b3d97123 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -25,7 +25,7 @@ domReady(function() {
$('body').addClass('js');
- $('.unit .item-actions .delete-button').bind('click', deleteUnit);
+ $('.unit .item-actions .delete-unit-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit);
// lean/simple modal
diff --git a/cms/static/js/views/overview.js b/cms/static/js/views/overview.js
index 90e7831c9e..1a4daa826d 100644
--- a/cms/static/js/views/overview.js
+++ b/cms/static/js/views/overview.js
@@ -1,6 +1,6 @@
define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notification", "draggabilly",
- "js/utils/modal", "js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"],
- function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, ModalUtils, CancelOnEscape,
+ "js/utils/cancel_on_escape", "js/utils/get_date", "js/utils/module"],
+ function (domReady, $, ui, _, gettext, NotificationView, Draggabilly, CancelOnEscape,
DateUtils, ModuleUtils) {
var modalSelector = '.edit-section-publish-settings';
@@ -36,10 +36,10 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
};
- var closeModalNew = function (e) {
+ var closeModalNew = function () {
$('body').removeClass('dialog-is-shown');
$('.edit-section-publish-settings').removeClass('is-shown');
- }
+ };
var editSectionPublishDate = function (e) {
e.preventDefault();
@@ -51,7 +51,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
$modal.find('.save-button').hide();
}
$modal.find('.section-name').html('"' + $(this).closest('.courseware-section').find('.section-name-span').text() + '"');
- //ModalUtils.showModal();
$('body').addClass('dialog-is-shown');
$('.edit-section-publish-settings').addClass('is-shown');
};
@@ -108,7 +107,6 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
locator: locator},
{interpolate: /\{(.+?)\}/g});
$thisSection.find('.section-published-date').html(html);
- //ModalUtils.hideModal();
saving.hide();
closeModalNew();
});
@@ -221,6 +219,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
*/
findDestination: function (ele, yChange) {
var eleY = ele.offset().top;
+ var eleYEnd = eleY + ele.height();
var containers = $(ele.data('droppable-class'));
for (var i = 0; i < containers.length; i++) {
@@ -235,7 +234,15 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// position of the container
var parentList = container.parents(ele.data('parent-location-selector')).first();
if (parentList.hasClass('collapsed')) {
- if (Math.abs(eleY - parentList.offset().top) < 10) {
+ var parentListTop = parentList.offset().top;
+ // To make it easier to drop subsections into collapsed sections (which have
+ // a lot of visual padding around them), allow a fudge factor around the
+ // parent element.
+ var collapseFudge = 10;
+ if (Math.abs(eleY - parentListTop) < collapseFudge ||
+ (eleY > parentListTop &&
+ eleYEnd - collapseFudge <= parentListTop + parentList.height())
+ ) {
return {
ele: container,
attachMethod: 'prepend',
@@ -269,25 +276,64 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
// Facilitate dropping into the beginning or end of a list
// (coming from opposite direction) via a "fudge factor". Math.min is for Jasmine test.
var fudge = Math.min(Math.ceil(siblingHeight / 2), 20);
- // Dragging up into end of list.
- if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
- return {
- ele: $sibling,
- attachMethod: 'after'
- };
+
+ // Dragging to top or bottom of a list with only one element is tricky
+ // because the element being dragged may be the same size as the sibling.
+ if (siblings.length == 1) {
+ // Element being dragged is within the drop target. Use the direction
+ // of the drag (yChange) to determine before or after.
+ if (eleY + fudge >= siblingY && eleYEnd - fudge <= siblingYEnd) {
+ return {
+ ele: $sibling,
+ attachMethod: yChange > 0 ? 'after' : 'before'
+ };
+ }
+ // Element being dragged is before the drop target.
+ else if (Math.abs(eleYEnd - siblingY) <= fudge) {
+ return {
+ ele: $sibling,
+ attachMethod: 'before'
+ };
+ }
+ // Element being dragged is after the drop target.
+ else if (Math.abs(eleY - siblingYEnd) <= fudge) {
+ return {
+ ele: $sibling,
+ attachMethod: 'after'
+ };
+ }
}
- // Dragging down into beginning of list.
- else if (j == 0 && yChange > 0 && Math.abs(eleY - siblingY) <= fudge) {
- return {
- ele: $sibling,
- attachMethod: 'before'
- };
- }
- else if (eleY >= siblingY && eleY <= siblingYEnd) {
- return {
- ele: $sibling,
- attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after'
- };
+ else {
+ // Dragging up into end of list.
+ if (j == siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
+ return {
+ ele: $sibling,
+ attachMethod: 'after'
+ };
+ }
+ // Dragging up or down into beginning of list.
+ else if (j == 0 && Math.abs(eleY - siblingY) <= fudge) {
+ return {
+ ele: $sibling,
+ attachMethod: 'before'
+ };
+ }
+ // Dragging down into end of list. Special handling required because
+ // the element being dragged may be taller then the element being dragged over
+ // (if eleY can never be >= siblingY, general case at the end does not work).
+ else if (j == siblings.length - 1 && yChange > 0 &&
+ Math.abs(eleYEnd - siblingYEnd) <= fudge) {
+ return {
+ ele: $sibling,
+ attachMethod: 'after'
+ };
+ }
+ else if (eleY >= siblingY && eleY <= siblingYEnd) {
+ return {
+ ele: $sibling,
+ attachMethod: eleY - siblingY <= siblingHeight / 2 ? 'before' : 'after'
+ };
+ }
}
}
}
diff --git a/cms/static/sass/elements/_edit_dialog.scss b/cms/static/sass/elements/_edit_dialog.scss
index 27ec1d1cf1..490a74b8bb 100644
--- a/cms/static/sass/elements/_edit_dialog.scss
+++ b/cms/static/sass/elements/_edit_dialog.scss
@@ -1,4 +1,4 @@
-// studio - elements - uploads
+// studio - elements - editing dialog
// ========================
body.course.feature-edit-dialog {
@@ -6,7 +6,7 @@ body.course.feature-edit-dialog {
// dialog
.wrapper-dialog {
@extend %ui-depth5;
- @include transition(all 0.05s ease-in-out);
+ @include transition(all $tmg-f2 ease-in-out);
position: fixed;
top: 0;
background: $black-t2;
@@ -24,12 +24,12 @@ body.course.feature-edit-dialog {
.dialog {
@include box-sizing(border-box);
- box-shadow: 0px 0px 7px $shadow-d1;
- border-radius: ($baseline/5);
- background-color: $gray-l4;
display: inline-block;
vertical-align: middle;
width: $baseline*23;
+ box-shadow: 0px 0px 7px $shadow-d1;
+ border-radius: ($baseline/5);
+ background-color: $gray-l4;
padding: 7px;
text-align: left;
@@ -72,44 +72,9 @@ body.course.feature-edit-dialog {
@extend %t-copy-sub2;
}
- .message-status {
- @include border-top-radius(2px);
- @include box-sizing(border-box);
- @include font-size(14);
- display: none;
- border-bottom: 2px solid $yellow;
- margin: 0 0 20px 0;
- padding: 10px 20px;
- font-weight: 500;
- background: $paleYellow;
-
- .text {
- display: inline-block;
- }
-
- &.error {
- border-color: $red-d2;
- background: $red-l1;
- color: $white;
- }
-
- &.confirm {
- border-color: $green-d2;
- background: $green-l1;
- color: $white;
- }
-
- &.is-shown {
- display: block;
- }
- }
-
-
.actions {
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
-
-
.action-item {
@extend %t-action4;
display: inline-block;
@@ -134,46 +99,31 @@ body.course.feature-edit-dialog {
color: $blue-s2;
}
}
-
}
-
}
-
}
-
}
- // ====================
+ // dialog set-up
+ .wrapper-dialog {
+ visibility: hidden;
+ pointer-events: none;
+ .dialog {
+ opacity: 0;
+ }
+ }
+ // dialog showing/hiding
+ &.dialog-is-shown {
- // dialog set-up
- .wrapper-dialog {
- visibility: hidden;
- pointer-events: none;
+ .wrapper-dialog.is-shown {
+ visibility: visible;
+ pointer-events: auto;
.dialog {
- opacity: 0;
+ opacity: 1.0;
}
}
-
- // dialog showing/hiding
- &.dialog-is-shown {
-
- .wrapper-dialog {
- -webkit-filter: blur(2px) grayscale(25%);
- filter: blur(2px) grayscale(25%);
- }
-
- .wrapper-dialog.is-shown {
- visibility: visible;
- pointer-events: auto;
-
- .dialog {
- opacity: 1.0;
- }
- }
- }
-
-
+ }
}
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 1c0547866c..4efa43eeef 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -39,27 +39,17 @@
// page header bits
.toggle-button-sections {
- @include font-size(12);
- display: none;
+ @extend %t-copy-sub2;
position: relative;
+ display: none;
float: right;
margin-top: ($baseline/4);
- color: $darkGrey;
+ color: $gray-l1;
&.is-shown {
display: block;
}
- [class^="icon-"] {
- @include font-size(11);
- border-radius: 20px;
- position: relative;
- top: -1px;
- display: inline-block;
- margin-right: 2px;
- line-height: 5px;
- }
-
.label {
display: inline-block;
}
@@ -71,9 +61,9 @@
.new-subsection-name-input {
@include font-size(16);
display: inline-block;
- vertical-align: top;
width: 515px;
padding: ($baseline/4);
+ vertical-align: top;
}
.new-subsection-name-input {
@@ -82,16 +72,16 @@
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
- padding: 4px 20px 7px;
margin: 0 5px;
- color: #fff !important;
+ padding: 4px 20px 7px;
+ color: $white;
}
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 4px 20px 7px;
- color: #8891a1 !important;
+ color: $gray-l1;
}
.new-subsection-item,
@@ -121,7 +111,6 @@
display: inline-block;
vertical-align: top;
margin: 0 ($baseline/4);
- padding: 0;
color: $gray-l2;
&:hover {
@@ -160,7 +149,7 @@
color: $gray-l2;
&:hover,
- &.isset {
+ &.is-set {
color: $blue;
visibility: visible;
}
@@ -195,23 +184,24 @@
}
&.new-section {
+ padding: ($baseline*1.5) $baseline 0 $baseline;
header {
@include clearfix();
height: auto;
border-bottom: 0;
- }
- .expand-collapse {
- visibility: hidden;
- }
+ .expand-collapse {
+ display: none;
+ }
- .item-details {
- padding: 25px 0 0 0;
+ .item-details {
+ width: auto;
- .section-name {
- float: none;
- width: 100%;
+ .section-name {
+ float: none;
+ width: 100%;
+ }
}
}
}
@@ -226,15 +216,14 @@
// section name area
.item-details {
@include clearfix();
- display: inline-block;
+ width: 400px;
float: none;
+ display: inline-block;
padding: 0 0 ($baseline/2) 0;
.section-name {
@include font-size(19);
- float: left;
- width: 400px;
- margin-right: 10px;
+ margin-right: ($baseline/2);
}
.section-name-span {
@@ -248,7 +237,7 @@
.section-name-edit {
position: relative;
- width: 400px;
+ width: ($baseline*20);
background: $white;
input {
@@ -257,13 +246,13 @@
.save-button {
@include blue-button;
- padding: 7px 20px 7px;
- margin-right: 5px;
+ padding: 7px $baseline 7px;
+ margin-right: ($baseline/4);
}
.cancel-button {
@include white-button;
- padding: 7px 20px 7px;
+ padding: 7px $baseline 7px;
}
}
}
@@ -271,6 +260,10 @@
// section specific action styles
.item-actions {
+ position: relative;
+ display: inline-block;
+ float: right;
+ margin-bottom: ($baseline/2);
top: 0;
}
@@ -292,16 +285,16 @@
}
&:hover,
- &.isset {
+ &.is-set {
color: $blue;
visibility: visible;
}
}
.section-published-date {
- padding: 4px 10px;
+ padding: ($baseline/5) ($baseline/2);
border-radius: 3px;
- background: $lightGrey;
+ background: $gray-l5;
text-align: right;
.published-status {
@@ -334,7 +327,7 @@
// subsection styles
.courseware-subsection {
@include clearfix();
- margin-bottom: 5px;
+ padding: 3px 0;
&.visible {
border-left: 5px solid $green;
@@ -397,12 +390,12 @@
}
.menu-toggle {
- z-index: 10;
+ @extend %ui-depth1;
position: absolute;
top: 0;
right: 5px;
padding: 2px 5px;
- color: $mediumGrey;
+ color: $gray-l2;
&:hover,
&.is-active {
@@ -412,12 +405,6 @@
&:focus {
outline: 0;
}
-
- [class^="icon-"] {
- vertical-align: middle;
- margin-top: -5px;
- display: inline-block;
- }
}
@@ -433,7 +420,7 @@
right: 0;
margin: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
- border: 1px solid $mediumGrey;
+ border: 1px solid $gray-l2;
border-radius: 4px;
padding: 8px 12px;
background: $white;
@@ -441,16 +428,16 @@
li {
width: 115px;
margin-bottom: 3px;
+ border-bottom: 1px solid $gray-l4;
padding-bottom: 3px;
- border-bottom: 1px solid $lightGrey;
&:last-child {
margin-bottom: 0;
- padding-bottom: 0;
border: none;
+ padding-bottom: 0;
.gradable-status-notgraded {
- color: $darkGrey;
+ color: $gray;
}
}
}
@@ -468,13 +455,13 @@
&.is-active {
.menu {
- z-index: 1000;
+ @extend %ui-depth3;
display: block;
opacity: 1.0;
}
.menu-toggle {
- z-index: 10000;
+ @extend %ui-depth4;
}
}
@@ -520,8 +507,8 @@
.draft-item:after,
.public-item:after,
.private-item:after {
+ @include font-size(9);
margin-left: 3px;
- font-size: 9px;
font-weight: 600;
text-transform: uppercase;
}
@@ -558,37 +545,6 @@
}
}
}
-
- .description {
- @include font-size(14);
- float: left;
- margin-top: 30px;
- line-height: 20px;
- width: 100%;
- }
-
- strong {
- font-weight: 700;
- }
-
- .start-date,
- .start-time {
- @include font-size(19);
- }
-
- .save-button {
- @include blue-button;
- margin-right: 10px;
- }
-
- .cancel-button {
- @include white-button;
- }
-
- .save-button,
- .cancel-button {
- @include font-size(16);
- }
}
@@ -598,10 +554,12 @@
.draggable-drop-indicator-before {
top: -($baseline/2);
+ left: 0;
}
.draggable-drop-indicator-after {
bottom: -13px;
+ left: 0;
}
// CASE: DnD - empty subsection with unit dropping
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
index d6da939115..f196b00a43 100644
--- a/cms/static/sass/views/_subsection.scss
+++ b/cms/static/sass/views/_subsection.scss
@@ -33,6 +33,7 @@
}
label {
+ @extend %t-title8;
margin-bottom: ($baseline/4);
}
}
@@ -201,12 +202,6 @@
input {
font-size: 14px;
}
-
- .sortable-unit-list {
- ol {
- @include tree-view;
- }
- }
}
.subsection-name-input {
@@ -237,8 +232,8 @@
}
.notice {
+ @extend %t-copy-sub2;
margin-top: 6px;
- font-size: 11px;
color: #999;
}
}
@@ -295,9 +290,105 @@
}
}
+ .sortable-unit-list {
+
+ .courseware-unit {
+ @include font-size(13);
+ @include clearfix();
+ margin: ($baseline/4) 0 0 0;
+
+ .section-item {
+ @include transition(background $tmg-avg ease-in-out 0);
+ @include font-size(13);
+ position: relative;
+ display: block;
+ padding: 6px 8px 8px 16px;
+
+ &:hover {
+ background: $blue-l5;
+ }
+ }
+
+ .public-item {
+ color: $black;
+ }
+
+ .private-item {
+ color: $gray-l1;
+ }
+
+ .draft-item {
+ color: $yellow-d1;
+ }
+
+ .draft-item:after,
+ .public-item:after,
+ .private-item:after {
+ @include font-size(9);
+ margin-left: 3px;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ .draft-item:after {
+ content: "- draft";
+ }
+
+ .private-item:after {
+ content: "- private";
+ }
+ }
+
+ .actions-list {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+
+ .actions-item {
+ @include font-size(13);
+ display: inline-block;
+ padding: 0 4px;
+ vertical-align: middle;
+
+ .action {
+ min-width: ($baseline*.75);
+ color: $gray-l2;
+
+ &:hover,
+ &.is-set {
+ color: $blue;
+ visibility: visible;
+ }
+
+ //reset old drag handle style
+ &.drag-handle {
+ float: none;
+ margin: 0;
+ background: transparent url(../img/drag-handles.png) right 5px no-repeat;
+ text-align: center;
+ }
+ }
+ }
+
+ .new-unit-item {
+ @extend %ui-btn-flat-outline;
+ width: 100%;
+ margin: 0 0 ($baseline/2) 0;
+ border: 1px solid $gray-l3;
+ padding: ($baseline/2) 0;
+ color: $gray-l2;
+
+ &:hover {
+ box-shadow: none;
+ background-image: none;
+ }
+ }
+ }
+
.gradable {
label {
+ @extend %t-title8;
display: inline-block;
vertical-align: top;
}
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 50685123a2..663fa3161e 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -885,6 +885,14 @@ body.unit {
// ====================
// Unit Page Sidebar
+
+.sidebar {
+
+ label {
+ @extend %t-title8;
+ }
+}
+
.unit-settings {
.window-contents {
@@ -910,12 +918,14 @@ body.unit {
}
}
+
+
input[type="radio"] {
margin-right: 7px;
}
.status {
- font-size: 12px;
+ @extend %t-copy-sub2;
strong {
font-weight: 700;
@@ -1025,37 +1035,95 @@ body.unit {
font-size: 8px;
}
- .window-contents > ol {
- @include tree-view;
+ .unit-tree-location {
+
+ .section-name {
+ @extend %t-title8;
+ }
+
+
+ .subsection,
+ .courseware-unit {
+ margin: ($baseline/4) 0 0 ($baseline);
+ }
+
+ .courseware-unit .section-item {
+ background-color: transparent;
+ }
.section-item {
+ @include transition(background $tmg-avg ease-in-out 0);
@include box-sizing(border-box);
+ @extend %t-copy-sub2;
display: inline-block;
width: 100%;
- font-size: 11px;
- padding: 2px 8px 4px;
+ background: $gray-l5;
+ padding: 6px 8px 8px 16px;
+ vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
- }
+ color: $gray;
- ol {
- .section-item {
- padding-left: $baseline;
+ &:hover {
+ background: $blue-l5;
+ color: $blue;
}
- .new-unit-item {
- margin-left: $baseline;
+ &.editing {
+ background-color: $orange-l3;
+ }
+
+ .public-item {
+ color: $black;
+ }
+
+ .private-item {
+ color: $gray-l1;
+ }
+
+ .draft-item {
+ color: $yellow-d1;
+ }
+
+ .public-item:hover,
+ .private-item:hover,
+ .draft-item:hover {
+ color: $blue;
+ }
+
+ .draft-item:after,
+ .public-item:after,
+ .private-item:after {
+ @include font-size(9);
+ margin-left: 3px;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ .draft-item:after {
+ content: "- draft";
+ }
+
+ .private-item:after {
+ content: "- private";
}
}
- ol ol {
- .section-item {
- padding-left: 34px;
- }
+ .new-unit-item {
+ @extend %ui-btn-flat-outline;
+ @extend %t-action4;
+ width: 90%;
+ margin: 0 0 ($baseline/2) ($baseline/4);
+ border: 1px solid transparent;
+ padding: ($baseline/4) ($baseline/2);
+ font-weight: normal;
+ color: $gray-l2;
+ text-align: left;
- .new-unit-item {
- margin: 0 0 $baseline 41px;
+ &:hover {
+ box-shadow: none;
+ background-image: none;
}
}
}
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index 9d43115b66..c346f97e5c 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -50,8 +50,8 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
<%block name="header_extras">