From 2d678d0c5ecb9b0db28ea015eb048d5556a6c2df Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Tue, 10 Dec 2013 14:16:12 -0500 Subject: [PATCH] Responding to review feedback on studio outline cleanup Bug fix for dragging past last element in list. STUD-879 --- .../coffee/spec/views/overview_spec.coffee | 104 +++++++++++--- cms/static/js/base.js | 2 +- cms/static/js/views/overview.js | 96 +++++++++---- cms/static/sass/elements/_edit_dialog.scss | 90 +++--------- cms/static/sass/views/_outline.scss | 130 ++++++------------ cms/static/sass/views/_subsection.scss | 105 +++++++++++++- cms/static/sass/views/_unit.scss | 102 +++++++++++--- cms/templates/overview.html | 73 +++++----- cms/templates/unit.html | 40 +++--- cms/templates/widgets/units.html | 7 +- 10 files changed, 464 insertions(+), 285 deletions(-) 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 """ -
    -
  1. +
    +
      +
    1. +
        +
      1. +
      +
      2. +
      3. -
    3. +
      5. -
    5. -
        +
      1. +
          1. -
        +
      2. +
          +
        1. +
        +
        3. +
      +
      """ 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">