From 369eb6c2f876b714ae1811a7eb9c04b6092cf321 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 9 Jul 2014 20:14:30 -0400 Subject: [PATCH 1/4] Studio: adding static course outline reference template (w/ initial working HTML) --- cms/templates/ux/reference/outline.html | 255 ++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 cms/templates/ux/reference/outline.html diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html new file mode 100644 index 000000000000..3981630fc658 --- /dev/null +++ b/cms/templates/ux/reference/outline.html @@ -0,0 +1,255 @@ +<%inherit file="../../base.html" /> +<%! +from django.core.urlresolvers import reverse +%> +<%block name="title">[template] Course Outline UI +<%block name="bodyclass">is-signedin course view-outline + +<%block name="content"> + +
+ +
+
+

+ Content + > Course Outline +

+ + +
+
+ +
+
+ +
+ +
+ +
+ + + +
+ + + +
+
+ +
+ From 13aa405461c01521861928a84ca613b21dac5ef4 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 10 Jul 2014 11:10:05 -0400 Subject: [PATCH 2/4] Studio: revising static course outline reference template * static markup for all section states in outline UI * static markup for all subsection states in outline UI * static markup for all unit states in outline UI --- cms/templates/ux/reference/outline.html | 895 ++++++++++++++---- .../ux/reference/outline_add-section.html | 6 + .../ux/reference/outline_add-subsection.html | 6 + .../ux/reference/outline_add-unit.html | 6 + .../outline_section_header-collapsed.html | 43 + .../outline_section_header-expanded.html | 43 + .../ux/reference/outline_status_grading.html | 8 + .../outline_status_message-error.html | 4 + .../outline_status_message-lock.html | 4 + ...ne_status_message-unpublished_changes.html | 4 + ...line_status_message-unpublished_units.html | 4 + .../outline_status_release-draft.html | 10 + .../outline_status_release-lock.html | 9 + .../outline_status_release-released.html | 10 + ...e_status_release-released_with_parent.html | 9 + .../outline_status_release-scheduled.html | 9 + ..._status_release-scheduled_with_parent.html | 9 + .../outline_subsection_header-collapsed.html | 42 + .../outline_subsection_header-expanded.html | 42 + .../ux/reference/outline_unit_header.html | 32 + 20 files changed, 1015 insertions(+), 180 deletions(-) create mode 100644 cms/templates/ux/reference/outline_add-section.html create mode 100644 cms/templates/ux/reference/outline_add-subsection.html create mode 100644 cms/templates/ux/reference/outline_add-unit.html create mode 100644 cms/templates/ux/reference/outline_section_header-collapsed.html create mode 100644 cms/templates/ux/reference/outline_section_header-expanded.html create mode 100644 cms/templates/ux/reference/outline_status_grading.html create mode 100644 cms/templates/ux/reference/outline_status_message-error.html create mode 100644 cms/templates/ux/reference/outline_status_message-lock.html create mode 100644 cms/templates/ux/reference/outline_status_message-unpublished_changes.html create mode 100644 cms/templates/ux/reference/outline_status_message-unpublished_units.html create mode 100644 cms/templates/ux/reference/outline_status_release-draft.html create mode 100644 cms/templates/ux/reference/outline_status_release-lock.html create mode 100644 cms/templates/ux/reference/outline_status_release-released.html create mode 100644 cms/templates/ux/reference/outline_status_release-released_with_parent.html create mode 100644 cms/templates/ux/reference/outline_status_release-scheduled.html create mode 100644 cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html create mode 100644 cms/templates/ux/reference/outline_subsection_header-collapsed.html create mode 100644 cms/templates/ux/reference/outline_subsection_header-expanded.html create mode 100644 cms/templates/ux/reference/outline_unit_header.html diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html index 3981630fc658..d3f5ee5b7f17 100644 --- a/cms/templates/ux/reference/outline.html +++ b/cms/templates/ux/reference/outline.html @@ -20,18 +20,18 @@

Page Actions

@@ -44,212 +44,747 @@

Page Actions

-
+
+

Your Course's Outline

-
    +
      -
    1. - - - -
      - -
      -

      - - - Introduction - - - - -

      - -
      -
        -
      • - - - Delete - -
        • - - + +
        +
          + +
        1. + + <%include file="outline_subsection_header-expanded.html" /> + +
          + <%include file="outline_status_release-scheduled.html" /> + + <%include file="outline_status_grading.html" /> +
          + + +
          +
            + +
          1. + <%include file="outline_unit_header.html" /> +
            2. +
          + +
          + + + <%include file="outline_add-unit.html" /> +
          2. + + + +
        2. + + <%include file="outline_subsection_header-expanded.html" /> + +
          + <%include file="outline_status_release-scheduled.html" /> + + <%include file="outline_status_grading.html" /> +
          + + +
          +
            + +
          1. + <%include file="outline_unit_header.html" />
            2. - --> -
      -
      -
      - - -
      -
      - - Released: Dec 31, 2015 at 21:00 UTC -
      - -
      -
        - -
      -
      -
      -
      - - -
        - -
      1. - - - -
        -
        - -

        - - - - Demo Course Overview - - - - - -

        - -
        -
          -
        • - - - Delete - + + +
        • + <%include file="outline_unit_header.html" />
          • - -
        + +
      2. + <%include file="outline_unit_header.html" /> +
        3. + + +
      3. + <%include file="outline_unit_header.html" /> +
        4. +
      +
- + + + <%include file="outline_add-unit.html" /> + + + + + + <%include file="outline_add-subsection.html" /> + + + + + + + + + <%include file="outline_add-section.html" /> + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  1. + + <%include file="outline_section_header-expanded.html" /> + +
    + <%include file="outline_status_release-draft.html" /> +
    + + +
    +
      + +
    - + +
    2. + - -
      + +
    1. + <%include file="outline_subsection_header-collapsed.html" /> - +
      + <%include file="outline_status_release-draft.html" /> -
      -
      + <%include file="outline_status_grading.html" /> +
      + -

      - Introduction: Video and Sequences -

      -
      +
      +
      + +
      2. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + - -
    - - New Unit - -
    - -
- - -
- - New Subsection - -
- - - - - -
- - - Add Section - -
+ + + + +
  • + + <%include file="outline_section_header-expanded.html" /> + +
    + <%include file="outline_status_release-draft.html" /> +
    + + +
    +
      + +
    1. + + <%include file="outline_subsection_header-expanded.html" /> + +
      + <%include file="outline_status_release-scheduled.html" /> +
      + + +
      +
        + + +
      1. + <%include file="outline_unit_header.html" /> + +
        + +
        + +
        2. + + + + +
      2. + <%include file="outline_unit_header.html" /> + +
        + <%include file="outline_status_release-draft.html" /> +
        + +
        3. + + + +
      3. + <%include file="outline_unit_header.html" /> +
        4. + + + +
      4. + <%include file="outline_unit_header.html" /> + +
        + <%include file="outline_status_message-lock.html" /> +
        + +
        5. + + + +
      5. + <%include file="outline_unit_header.html" /> + +
        + <%include file="outline_status_message-unpublished_changes.html" /> +
        + +
        6. + + + +
      6. + <%include file="outline_unit_header.html" /> + +
        + <%include file="outline_status_message-unpublished_units.html" /> +
        + +
        7. + + + +
      7. + <%include file="outline_unit_header.html" /> + +
        + <%include file="outline_status_message-error.html" /> +
        + +
        8. + +
      + +
      + +
      2. + +
    +
    +
    • + +
    - + - + - - - + + diff --git a/cms/templates/ux/reference/outline_add-section.html b/cms/templates/ux/reference/outline_add-section.html new file mode 100644 index 000000000000..0a03a520e22c --- /dev/null +++ b/cms/templates/ux/reference/outline_add-section.html @@ -0,0 +1,6 @@ +
    + + New Section + +
    + diff --git a/cms/templates/ux/reference/outline_add-subsection.html b/cms/templates/ux/reference/outline_add-subsection.html new file mode 100644 index 000000000000..90d2db6dd5d3 --- /dev/null +++ b/cms/templates/ux/reference/outline_add-subsection.html @@ -0,0 +1,6 @@ +
    + + New Subsection + +
    + diff --git a/cms/templates/ux/reference/outline_add-unit.html b/cms/templates/ux/reference/outline_add-unit.html new file mode 100644 index 000000000000..3a8325828672 --- /dev/null +++ b/cms/templates/ux/reference/outline_add-unit.html @@ -0,0 +1,6 @@ +
    + + New Unit + +
    + diff --git a/cms/templates/ux/reference/outline_section_header-collapsed.html b/cms/templates/ux/reference/outline_section_header-collapsed.html new file mode 100644 index 000000000000..610fdece8d7c --- /dev/null +++ b/cms/templates/ux/reference/outline_section_header-collapsed.html @@ -0,0 +1,43 @@ +
    +

    + + + Section Title + + + + + + + + +

    + +
    + +
    +
    + + diff --git a/cms/templates/ux/reference/outline_section_header-expanded.html b/cms/templates/ux/reference/outline_section_header-expanded.html new file mode 100644 index 000000000000..2a236379cb27 --- /dev/null +++ b/cms/templates/ux/reference/outline_section_header-expanded.html @@ -0,0 +1,43 @@ +
    +

    + + + Section Title + + + + + + + + +

    + +
    + +
    +
    + + diff --git a/cms/templates/ux/reference/outline_status_grading.html b/cms/templates/ux/reference/outline_status_grading.html new file mode 100644 index 000000000000..57794030e9bb --- /dev/null +++ b/cms/templates/ux/reference/outline_status_grading.html @@ -0,0 +1,8 @@ +
    +

    + Graded as: + + Homework + Due: December 31, 2014 +

    +
    diff --git a/cms/templates/ux/reference/outline_status_message-error.html b/cms/templates/ux/reference/outline_status_message-error.html new file mode 100644 index 000000000000..365799f429b8 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_message-error.html @@ -0,0 +1,4 @@ +
    + +

    Critical error

    +
    diff --git a/cms/templates/ux/reference/outline_status_message-lock.html b/cms/templates/ux/reference/outline_status_message-lock.html new file mode 100644 index 000000000000..8a06c0d346c1 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_message-lock.html @@ -0,0 +1,4 @@ +
    + +

    Contains Staff only content

    +
    diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_changes.html b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html new file mode 100644 index 000000000000..beb37b56d647 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html @@ -0,0 +1,4 @@ +
    + +

    Unpublished change(s) to live content

    +
    diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_units.html b/cms/templates/ux/reference/outline_status_message-unpublished_units.html new file mode 100644 index 000000000000..e14d95832728 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_message-unpublished_units.html @@ -0,0 +1,4 @@ +
    + +

    Unpublished unit(s) will not be released

    +
    diff --git a/cms/templates/ux/reference/outline_status_release-draft.html b/cms/templates/ux/reference/outline_status_release-draft.html new file mode 100644 index 000000000000..bafa323cdf95 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_release-draft.html @@ -0,0 +1,10 @@ +
    +

    + Release Status: + + + Draft that is: + + Unscheduled +

    +
    diff --git a/cms/templates/ux/reference/outline_status_release-lock.html b/cms/templates/ux/reference/outline_status_release-lock.html new file mode 100644 index 000000000000..0f6d08268fd4 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_release-lock.html @@ -0,0 +1,9 @@ +
    +

    + Release Status: + + + Will never release - Contains Staff only content + +

    +
    diff --git a/cms/templates/ux/reference/outline_status_release-released.html b/cms/templates/ux/reference/outline_status_release-released.html new file mode 100644 index 000000000000..d6eb3dc91bf1 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_release-released.html @@ -0,0 +1,10 @@ +
    +

    + Release Status: + + + Released on: + + March 25, 2014 +

    +
    diff --git a/cms/templates/ux/reference/outline_status_release-released_with_parent.html b/cms/templates/ux/reference/outline_status_release-released_with_parent.html new file mode 100644 index 000000000000..c06f01819192 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_release-released_with_parent.html @@ -0,0 +1,9 @@ +
    +

    + Release Status: + + + Released with Section + +

    +
    diff --git a/cms/templates/ux/reference/outline_status_release-scheduled.html b/cms/templates/ux/reference/outline_status_release-scheduled.html new file mode 100644 index 000000000000..e6b62df57be8 --- /dev/null +++ b/cms/templates/ux/reference/outline_status_release-scheduled.html @@ -0,0 +1,9 @@ +
    +

    + Release Status: + + + Scheduled: October 31, 2014 + +

    +
    diff --git a/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html b/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html new file mode 100644 index 000000000000..e5ae050b3d8c --- /dev/null +++ b/cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html @@ -0,0 +1,9 @@ +
    +

    + Release Status: + + + Scheduled: with Section + +

    +
    diff --git a/cms/templates/ux/reference/outline_subsection_header-collapsed.html b/cms/templates/ux/reference/outline_subsection_header-collapsed.html new file mode 100644 index 000000000000..3d38a2e8efe8 --- /dev/null +++ b/cms/templates/ux/reference/outline_subsection_header-collapsed.html @@ -0,0 +1,42 @@ +
    +

    + + + Subsection Name + + + + + + + + +

    + +
    + +
    +
    + diff --git a/cms/templates/ux/reference/outline_subsection_header-expanded.html b/cms/templates/ux/reference/outline_subsection_header-expanded.html new file mode 100644 index 000000000000..7dd0790a0165 --- /dev/null +++ b/cms/templates/ux/reference/outline_subsection_header-expanded.html @@ -0,0 +1,42 @@ +
    +

    + + + Subsection Name + + + + + + + + +

    + +
    + +
    +
    + diff --git a/cms/templates/ux/reference/outline_unit_header.html b/cms/templates/ux/reference/outline_unit_header.html new file mode 100644 index 000000000000..7487c56a4695 --- /dev/null +++ b/cms/templates/ux/reference/outline_unit_header.html @@ -0,0 +1,32 @@ +
    +

    + Unit Name +

    + +
    + +
    +
    + From b6b95927b39f507f418a86543df2147135ffa50c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Sun, 13 Jul 2014 21:35:35 -0400 Subject: [PATCH 3/4] Studio: styling revamped course outline-related UI * adding in outline-related color values * styling for publishing states * light styling abstraction for specific outline and unit/container contexts * revising add item to outline button styles * adding a few bells and whistles (hover states and error pulsing) --- cms/static/sass/_developer.scss | 75 --- cms/static/sass/_variables.scss | 13 + cms/static/sass/assets/_anims.scss | 23 + cms/static/sass/elements/_layout.scss | 14 +- cms/static/sass/elements/_modules.scss | 268 +++++++++ cms/static/sass/elements/_typography.scss | 17 + cms/static/sass/views/_outline.scss | 555 +++++------------- cms/templates/ux/reference/outline.html | 4 +- .../outline_section_header-collapsed.html | 11 +- .../outline_section_header-expanded.html | 11 +- .../outline_status_release-draft.html | 2 +- .../outline_subsection_header-collapsed.html | 4 +- .../outline_subsection_header-expanded.html | 4 +- common/static/sass/_mixins.scss | 10 +- 14 files changed, 494 insertions(+), 517 deletions(-) diff --git a/cms/static/sass/_developer.scss b/cms/static/sass/_developer.scss index 30859b4094b3..f5c69e8e6b77 100644 --- a/cms/static/sass/_developer.scss +++ b/cms/static/sass/_developer.scss @@ -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; - } - } -} diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index ce29dc96dc89..79384b6f4485 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -49,6 +49,7 @@ $gray-d3: shade($gray,60%); $gray-d4: shade($gray,80%); $blue: rgb(0, 159, 230); +$blue-alt: rgb(88, 152, 219); $blue-l1: tint($blue,20%); $blue-l2: tint($blue,40%); $blue-l3: tint($blue,60%); @@ -104,6 +105,7 @@ $red-u2: desaturate($red,30%); $red-u3: desaturate($red,45%); $green: rgb(37, 184, 90); +$green-alt: rgb(48, 183, 94); $green-l1: tint($green,20%); $green-l2: tint($green,40%); $green-l3: tint($green,60%); @@ -160,6 +162,17 @@ $shadow-l2: rgba($black, 0.05); $shadow-d1: rgba($black, 0.4); $shadow-d2: rgba($black, 0.6); +// colors - application +$color-draft: $gray-l3; +$color-released: $blue; +$color-published: $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 diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss index 4726776d3998..5c12ab7daeb0 100644 --- a/cms/static/sass/assets/_anims.scss +++ b/cms/static/sass/assets/_anims.scss @@ -247,3 +247,26 @@ %anim-flashDouble { @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); +} diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index cbf615836bc4..51731b890ff9 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -77,10 +77,22 @@ vertical-align: baseline; } - &.new-button { + // CASE: new/create button + &.new-button, &.button-new { @extend %btn-primary-green; @extend %sizing; } + + // CASE: toggle button + &.button-toggle { + @extend %btn-secondary-gray; + @extend %sizing; + } + + // CASE: view live button + &.button-view, &.view-button { + + } } } } diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index 725caf5e47dd..bbdf1eaf1123 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -3,6 +3,7 @@ // 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 +// -------------------- %bar-module { margin-bottom: $baseline; border-top: 5px solid $gray-l1; @@ -37,6 +38,7 @@ } // blue bar and title bg version +// -------------------- %bar-module-blue { @extend %bar-module; border-top: 5px solid $blue; @@ -47,6 +49,7 @@ } // green bar and title bg version +// -------------------- %bar-module-green { @extend %bar-module; border-top: 5px solid $green; @@ -57,6 +60,7 @@ } // yellow bar and title bg version +// -------------------- %bar-module-yellow { @extend %bar-module; border-top: 5px solid $orange-l2; @@ -67,6 +71,7 @@ } // red bar and title bg version +// -------------------- %bar-module-red { @extend %bar-module; border-top: 5px solid $red-l2; @@ -88,6 +93,7 @@ // Add new component menu with big green buttons // outermost wrapper for add a new component menu +// -------------------- .add-xblock-component { margin: $baseline ($baseline/2); border: 1px solid $gray-l3; @@ -146,6 +152,7 @@ // outer most wrapper div for scroll up component picker menus // swaps in when a green button is clicked + // -------------------- .new-component-templates { @include clearfix; display: none; @@ -175,6 +182,7 @@ } // individual menus + // -------------------- .new-component-template { @include clearfix; @@ -207,6 +215,7 @@ } // basic and advanced problem tabs - also handled by jquery-ui tabs + // -------------------- .problem-type-tabs { @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); list-style-type: none; @@ -252,4 +261,263 @@ } } +// outline UI +// -------------------- + +// outline: utilities +$outline-indent-width: $baseline; + +// UI: containing elements on a course outline (currently sections/subsections) +%outline-container { + // STATE: is-collapsed + &.is-collapsed { + border-left: ($baseline/4) solid $color-draft; + } + + // CASE: is published by not released + &.is-published { + border-left-color: $color-published; + + + &.is-published.is-released { + border-left-color: $color-released; + } + } + + // CASE: has staff-only content + &.has-staff-only { + border-left-color: $color-staff-only; + } + + // CASE: has changes + &.is-published.is-released.has-changes, // needed for poor specificity + &.is-published.is-scheduled.has-changes, // needed for poor specificity + &.has-changes { + border-left-color: $color-warning; + } + + // CASE: has errors + &.is-published.is-released.has-errors, // needed for poor specificity + &.is-published.is-scheduled.has-errors, // needed for poor specificity + &.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 + &.has-staff-only { + + // aint the prettiest, but needed to make sure direct children only + > .section-status, + > .subsection-status, + > .unit-status { + + .icon { + color: $color-staff-only; + } + } + } + + // CASE: has changes + &.is-published.is-released.has-changes, // needed for poor specificity + &.is-published.is-scheduled.has-changes, // needed for poor specificity + &.has-changes { + + // aint the prettiest, but 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 + &.is-published.is-released.has-errors, // needed for poor specificity + &.is-published.is-scheduled.has-errors, // needed for poor specificity + &.has-errors { + + // aint the prettiest, but 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; + } + + > .section-status .status-message, + > .subsection-status .status-message, + > .unit-status .status-message { + + .icon { + @include animation(pulse $tmg-s3 ease-in-out infinite); + } + } + } +} + +%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-container; + 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-container; + margin-bottom: ($baseline/2); + border: 1px solid $gray-l4; + 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 { + border-left: ($baseline/4) solid $color-draft; + } + + // 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; + } +} diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss index 2d0ff054125d..e14d52f6d2e6 100644 --- a/cms/static/sass/elements/_typography.scss +++ b/cms/static/sass/elements/_typography.scss @@ -3,6 +3,23 @@ // 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 %t-title { font-family: $f-sans-serif; diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index 4668be32741a..a88eeaad1a7e 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -4,6 +4,7 @@ .view-outline { // page structure + // -------------------- .content-primary, .content-supplementary { @include box-sizing(border-box); @@ -37,7 +38,8 @@ } - // page header bits + // page header + // -------------------- .toggle-button-sections { @extend %t-copy-sub2; position: relative; @@ -55,8 +57,10 @@ } } + // adding outline elements + // -------------------- - // new section, subsection, unit + // forms .new-section-name, .new-subsection-name-input { @include font-size(16); @@ -84,6 +88,7 @@ color: $gray-l1; } + // buttons .new-subsection-item, .new-unit-item { @extend %ui-btn-flat-outline; @@ -106,491 +111,215 @@ // UI: general action list styles (section and subsection) - + // -------------------- .expand-collapse { @extend %expand-collapse; - margin: 0 ($baseline/4); } - // UI: element actions list - // TODO: outline page can be updated to reflect styling from %actions-list in _controls.scss - .actions-list { - display: inline-block; - margin-bottom: 0; - } - - .actions-item { - @include font-size(13); - display: inline-block; - padding: 0 ($baseline/5); - vertical-align: middle; + // outline + // -------------------- + .outline { - .action { - min-width: ($baseline*.75); - color: $gray-l2; + // add/new items + .add-item { + margin-top: ($baseline*0.75); - &:hover, - &.is-set { - color: $blue; - visibility: visible; - } + .action-add { + @extend %ui-btn-flat-outline; + padding: ($baseline/2) $baseline; + display: block; - //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; + .icon { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } } - } - } + .add-section { + margin-bottom: $baseline; + } - // section styles - .courseware-section { - @extend %ui-window; - @include transition(background $tmg-avg ease-in-out 0); - position: relative; - padding: ($baseline*1.5) $baseline $baseline $baseline; + .add-subsection { - &.collapsed { - padding-bottom: 0; } - &.collapsed .subsection-list, - .collapsed .subsection-list, - .collapsed > ol { - display: none !important; + .add-unit { + margin-left: $outline-indent-width; } + } - &.new-section { - padding: ($baseline*1.5) $baseline 0 $baseline; + // outline: items + .outline-item { - header { - @include clearfix(); - height: auto; - border-bottom: 0; + // CASE: expand/collapse-able + &.is-collapsible .expand-collapse { - .expand-collapse { - display: none; - } + // STATE: hover/active + &:hover, &:active { - .item-details { - width: auto; - - .section-name { - float: none; - width: 100%; - } + .item-title, .ui-toggle-expansion { + color: $blue; } } } - .section { - @include clearfix(); - 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; - } - } - } + // item: title + .item-title { + // STATE: is-editable + &.is-editable { - // 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 { - font-weight: bold; - } - } - - &.released .section-published-date { - background-color: transparent; - color: $gray-l1; - - a { - color: $gray-l2; + // editor + + .editor { + display: block; - &:hover { - color: $blue; - } - } + .item-edit-title { + width: 100%; } } } } } + // outline: sections + // -------------------- + .outline-section { - // subsection styles - .courseware-subsection { - @include clearfix(); - padding: 3px 0; - - &.visible { - border-left: 5px solid $green; - } - - &.mixed { - border-left: 5px solid $yellow-s1; - } - - .status { - @extend %cont-text-sr; + // header + .section-header { + @include clearfix(); } - .section-item { - @include transition(background $tmg-avg ease-in-out 0); - @include font-size(13); - position: relative; - display: block; - background-color: $gray-l5; - padding: 6px 8px 8px 16px; - - &:hover { - background: $blue-l5; + .section-header-details { + float: left; + width: flex-grid(6, 9); - .item-actions { - display: block; - } + .icon, .wrapper-section-title { + display: inline-block; + vertical-align: top; } - &.editing { - background: $orange-l4; + .icon { + margin-right: ($baseline/4); } - } - - .details { - display: block; - margin-bottom: 0; - width: 600px; - a { - color: $baseFontColor; + .wrapper-section-title { + width: flex-grid(5, 6); + margin-top: -($baseline/4); + line-height: 0; } } - } - - // gradable drop down - .gradable-status { - display: inline-block; - position: relative; - .status-label { - @include font-size(12); - width: 110px; - padding: 5px 40px 5px 10px; - border-radius: 3px; - color: transparent; + .section-header-actions { + float: right; + width: flex-grid(3, 9); + margin-top: -($baseline/2); text-align: right; - font-weight: bold; - line-height: 16px; - } - - .menu-toggle { - @extend %ui-depth1; - position: absolute; - top: 0; - right: 5px; - padding: 2px 5px; - color: $gray-l2; - - &:hover, - &.is-active { - color: $blue; - } - &:focus { - outline: 0; + .actions-list { + @extend %actions-list; + @extend %t-action2; } } - - // gradable dropdown menu default - .menu { - @include font-size(12); - @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 - &.is-active { - - .menu { - @extend %ui-depth3; - display: block; - opacity: 1.0; - } - - .menu-toggle { - @extend %ui-depth4; - } - } - - // set state - &.is-set { - - .menu-toggle { - color: $blue; - } - - .status-label { - display: block; - color: $blue; - } + // status + .section-status { + margin: 0 0 0 $outline-indent-width; } } - .courseware-subsection .sortable-unit-list { - margin: ($baseline/4) 0 0 0; + // outline: subsections + // -------------------- + .list-subsections { + margin: $baseline 0 0 0; } - // unit styles - .courseware-unit { - margin: -1px 0 0 ($baseline*1.75); - - &.add-new-unit { - margin: 5px ($baseline*1.75) 0 ($baseline*1.75); - } + .outline-subsection { - .section-item { - border: 0; - background-color: $white; - } - - .public-item { - color: $black; - } - - .private-item { - color: $gray-l1; + // header + .subsection-header { + @include clearfix(); } - .draft-item { - color: $yellow-d1; - } + .subsection-header-details { + float: left; + width: flex-grid(6, 9); - .draft-item:after, - .public-item:after, - .private-item:after { - @include font-size(9); - margin-left: 3px; - font-weight: 600; - text-transform: uppercase; - } + .icon, .wrapper-subsection-title { + display: inline-block; + vertical-align: top; + } - .draft-item:after { - content: "- draft"; - } + .icon { + margin-right: ($baseline/4); + } - .private-item:after { - content: "- private"; + .wrapper-subsection-title { + width: flex-grid(5, 6); + margin-top: -($baseline/10); + line-height: 0; + } } - } - + .subsection-header-actions { + float: right; + width: flex-grid(3, 9); + margin-top: -($baseline/4); + text-align: right; - // modal to edit section publish settings - // basic non-backbone modal-window set-up - .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 */ + .actions-list { + @extend %actions-list; + @extend %t-action2; + margin-right: ($baseline/2); + } } - .modal-window { - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - position: absolute; - top: 50%; - left: 50%; - opacity: 0; + // status + .subsection-status { + margin: 0 0 0 $outline-indent-width; } } - // modal-window showing/hiding - &.modal-window-is-shown { - overflow: hidden; - - .wrapper-modal-window.is-shown { - visibility: visible; - pointer-events: auto; - display: block; - - .modal-window { - opacity: 1.0; - } - } + // outline: units + // -------------------- + .list-units { + margin: $baseline 0 0 0; } - .edit-section-publish-settings { + .outline-unit { + margin-left: $outline-indent-width; - .picker { + // header + .unit-header { @include clearfix(); + // margin-bottom: ($baseline/4); + } + .unit-header-details { + float: left; + width: flex-grid(6, 9); + margin-top: ($baseline/4); + } - .field { - float: left; - margin: 0 ($baseline/2) ($baseline/2); - - label, - input { - display: block; - text-align: left; - } - - label { - @extend %t-copy-sub1; - margin-bottom: ($baseline/4); - font-weight: 600; - } + .unit-header-actions { + float: right; + width: flex-grid(3, 9); + margin-top: -($baseline/10); + text-align: right; - input[type="text"] { - @extend %t-copy-sub1; - } + .actions-list { + @extend %actions-list; + @extend %t-action2; } } } - - // UI: DnD - specific elems/cases - section - .courseware-section { + // UI: drag and drop: section + // -------------------- + .outline-section { .draggable-drop-indicator-before { top: -($baseline/2); @@ -613,8 +342,8 @@ } } - // UI: DnD - specific elems/cases - subsection - .courseware-subsection { + // UI: drag and drop: subsection + .outline-subsection { .draggable-drop-indicator-before { top: 0; @@ -638,8 +367,8 @@ } } - // UI: DnD - specific elems/cases - unit - .courseware-unit { + // // UI: drag and drop: unit + .outline-unit { .draggable-drop-indicator-before { top: 0; @@ -658,7 +387,7 @@ } } - // UI: DnD - specific elems/cases - empty parents splint + // UI: drag and drop: splints .ui-splint-indicator { position: relative; } diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html index d3f5ee5b7f17..93ec582d1edf 100644 --- a/cms/templates/ux/reference/outline.html +++ b/cms/templates/ux/reference/outline.html @@ -20,7 +20,7 @@

    Page Actions

    diff --git a/cms/templates/ux/reference/outline_section_header-collapsed.html b/cms/templates/ux/reference/outline_section_header-collapsed.html index 610fdece8d7c..0b1dae162971 100644 --- a/cms/templates/ux/reference/outline_section_header-collapsed.html +++ b/cms/templates/ux/reference/outline_section_header-collapsed.html @@ -1,15 +1,8 @@

    - - Section Title - - - - - - - + + Section Title

    diff --git a/cms/templates/ux/reference/outline_section_header-expanded.html b/cms/templates/ux/reference/outline_section_header-expanded.html index 2a236379cb27..c841e0501768 100644 --- a/cms/templates/ux/reference/outline_section_header-expanded.html +++ b/cms/templates/ux/reference/outline_section_header-expanded.html @@ -1,15 +1,8 @@

    - - Section Title - - - - - - - + + Section Title

    diff --git a/cms/templates/ux/reference/outline_status_release-draft.html b/cms/templates/ux/reference/outline_status_release-draft.html index bafa323cdf95..1cd2f47b68eb 100644 --- a/cms/templates/ux/reference/outline_status_release-draft.html +++ b/cms/templates/ux/reference/outline_status_release-draft.html @@ -3,7 +3,7 @@ Release Status: - Draft that is: + This item is Unscheduled

    diff --git a/cms/templates/ux/reference/outline_subsection_header-collapsed.html b/cms/templates/ux/reference/outline_subsection_header-collapsed.html index 3d38a2e8efe8..aa83af728ea8 100644 --- a/cms/templates/ux/reference/outline_subsection_header-collapsed.html +++ b/cms/templates/ux/reference/outline_subsection_header-collapsed.html @@ -1,8 +1,8 @@

    - - Subsection Name + + Subsection Title diff --git a/cms/templates/ux/reference/outline_subsection_header-expanded.html b/cms/templates/ux/reference/outline_subsection_header-expanded.html index 7dd0790a0165..00d17567ac3c 100644 --- a/cms/templates/ux/reference/outline_subsection_header-expanded.html +++ b/cms/templates/ux/reference/outline_subsection_header-expanded.html @@ -1,8 +1,8 @@

    - - Subsection Name + + Subsection Title diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 2f24de41a3c2..d0366485f81c 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -90,11 +90,16 @@ // extends - UI - window %ui-window { @include clearfix(); - border-radius: 3px; - box-shadow: 0 1px 1px $shadow-l1; + border-radius: ($baseline/10); + box-shadow: 0 1px 1px $shadow-l2; margin-bottom: $baseline; border: 1px solid $gray-l2; background: $white; + + // STATE: hover/active + &:hover, &:active { + box-shadow: 0 1px 1px $shadow; + } } // extends - UI - visual link @@ -226,7 +231,6 @@ border-radius: ($baseline/4); border: 1px solid $blue-l2; padding: 1px ($baseline/2) 2px ($baseline/2); - background-color: $white; color: $blue-l2; &:hover, &:focus { From 726999a98ebffd6a922f8fef7fbc3631fd23f4a0 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 17 Jul 2014 17:57:24 -0400 Subject: [PATCH 4/4] Studio: outline UI styling revisions * sync up stateful class names * show status border/visual for subsections in collapsed and expanded states * hide new-centric actions and messages on collapsed items * show/hide content elements for outline containers based on collapsed states * button-new semantic changes and icon-padding visual tweaks * replaced draft-like icon to something not used for actions * refactored styling and markup for collapse/expand --- cms/static/sass/_variables.scss | 6 +- cms/static/sass/assets/_anims.scss | 1 + cms/static/sass/elements/_controls.scss | 37 ++++- cms/static/sass/elements/_layout.scss | 8 +- cms/static/sass/elements/_modules.scss | 94 ++++++++----- cms/static/sass/views/_outline.scss | 118 ++++++++++++---- cms/templates/ux/reference/outline.html | 130 ++++++++---------- .../ux/reference/outline_add-section.html | 2 +- .../ux/reference/outline_add-subsection.html | 2 +- .../ux/reference/outline_add-unit.html | 2 +- .../outline_section_header-collapsed.html | 4 +- .../outline_section_header-expanded.html | 4 +- ...ne_status_message-unpublished_changes.html | 2 +- ...line_status_message-unpublished_units.html | 2 +- .../outline_status_release-draft.html | 2 +- .../outline_subsection_header-collapsed.html | 4 +- .../outline_subsection_header-expanded.html | 4 +- 17 files changed, 259 insertions(+), 163 deletions(-) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 79384b6f4485..84cd91407b9b 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -49,7 +49,6 @@ $gray-d3: shade($gray,60%); $gray-d4: shade($gray,80%); $blue: rgb(0, 159, 230); -$blue-alt: rgb(88, 152, 219); $blue-l1: tint($blue,20%); $blue-l2: tint($blue,40%); $blue-l3: tint($blue,60%); @@ -105,7 +104,6 @@ $red-u2: desaturate($red,30%); $red-u3: desaturate($red,45%); $green: rgb(37, 184, 90); -$green-alt: rgb(48, 183, 94); $green-l1: tint($green,20%); $green-l2: tint($green,40%); $green-l3: tint($green,60%); @@ -164,8 +162,8 @@ $shadow-d2: rgba($black, 0.6); // colors - application $color-draft: $gray-l3; -$color-released: $blue; -$color-published: $green; +$color-live: $blue; +$color-ready: $green; $color-warning: $orange-l2; $color-error: $red-l2; $color-staff-only: $black; diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss index 5c12ab7daeb0..cf3f49e59bd2 100644 --- a/cms/static/sass/assets/_anims.scss +++ b/cms/static/sass/assets/_anims.scss @@ -248,6 +248,7 @@ @include animation(flashDouble $tmg-f1 ease-in-out 1); } + // ==================== diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index 163c128dfff2..f0f7179cb7e5 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -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 { @include transition(all $tmg-f2 linear 0s); display: inline-block; @@ -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 .drag-handle { diff --git a/cms/static/sass/elements/_layout.scss b/cms/static/sass/elements/_layout.scss index 51731b890ff9..764af355521d 100644 --- a/cms/static/sass/elements/_layout.scss +++ b/cms/static/sass/elements/_layout.scss @@ -78,7 +78,8 @@ } // CASE: new/create button - &.new-button, &.button-new { + &.new-button, + &.button-new { @extend %btn-primary-green; @extend %sizing; } @@ -88,11 +89,6 @@ @extend %btn-secondary-gray; @extend %sizing; } - - // CASE: view live button - &.button-view, &.view-button { - - } } } } diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index bbdf1eaf1123..4e97a5f665a2 100644 --- a/cms/static/sass/elements/_modules.scss +++ b/cms/static/sass/elements/_modules.scss @@ -267,38 +267,68 @@ // outline: utilities $outline-indent-width: $baseline; -// UI: containing elements on a course outline (currently sections/subsections) -%outline-container { +// 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: ($baseline/4) solid $color-draft; - } + 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: is published by not released - &.is-published { - border-left-color: $color-published; + // 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; + } - &.is-published.is-released { - border-left-color: $color-released; + // 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 - &.has-staff-only { + &.is-staff-only { border-left-color: $color-staff-only; } - // CASE: has changes - &.is-published.is-released.has-changes, // needed for poor specificity - &.is-published.is-scheduled.has-changes, // needed for poor specificity - &.has-changes { + // CASE: has unpublished content + &.has-warnings { border-left-color: $color-warning; } // CASE: has errors - &.is-published.is-released.has-errors, // needed for poor specificity - &.is-published.is-scheduled.has-errors, // needed for poor specificity &.has-errors { border-left-color: $color-error; } @@ -317,9 +347,9 @@ $outline-indent-width: $baseline; } // CASE: has staff-only content - &.has-staff-only { + &.is-staff-only { - // aint the prettiest, but needed to make sure direct children only + // needed to make sure direct children only > .section-status, > .subsection-status, > .unit-status { @@ -330,12 +360,10 @@ $outline-indent-width: $baseline; } } - // CASE: has changes - &.is-published.is-released.has-changes, // needed for poor specificity - &.is-published.is-scheduled.has-changes, // needed for poor specificity - &.has-changes { + // CASE: has unpublished content + &.has-warnings { - // aint the prettiest, but needed to make sure direct children only + // needed to make sure direct children only > .section-status .status-message, > .subsection-status .status-message, > .unit-status .status-message { @@ -347,11 +375,9 @@ $outline-indent-width: $baseline; } // CASE: has errors - &.is-published.is-released.has-errors, // needed for poor specificity - &.is-published.is-scheduled.has-errors, // needed for poor specificity &.has-errors { - // aint the prettiest, but needed to make sure direct children only + // needed to make sure direct children only > .section-status .status-message, > .subsection-status .status-message, > .unit-status .status-message, @@ -360,15 +386,6 @@ $outline-indent-width: $baseline; > .unit-status .status-message-copy { color: $color-error; } - - > .section-status .status-message, - > .subsection-status .status-message, - > .unit-status .status-message { - - .icon { - @include animation(pulse $tmg-s3 ease-in-out infinite); - } - } } } @@ -387,7 +404,7 @@ $outline-indent-width: $baseline; .outline-section { @extend %ui-window; @extend %outline-item; - @extend %outline-container; + @extend %outline-section; margin-bottom: $baseline; padding: ($baseline*0.75) $baseline; @@ -455,9 +472,10 @@ $outline-indent-width: $baseline; // outline: subsections .outline-subsection { @extend %outline-item; - @extend %outline-container; + @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); @@ -469,7 +487,7 @@ $outline-indent-width: $baseline; // STATE: is-collapsed &.is-collapsed { - border-left: ($baseline/4) solid $color-draft; + } // header - title diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss index a88eeaad1a7e..e3f5ba202dc7 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -1,6 +1,21 @@ // 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 { // page structure @@ -40,20 +55,30 @@ // page header // -------------------- - .toggle-button-sections { - @extend %t-copy-sub2; - position: relative; - display: none; - float: right; - margin-top: ($baseline/4); - color: $gray-l1; + .button-toggle-expand-collapse { + + // STATE: action will collapse all + &.collapse-all { + + .expand-all { + display: none; + } - &.is-shown { - display: block; + .collapse-all { + display: block; + } } - .label { - display: inline-block; + // STATE: action will expand all + &.expand-all { + + .collapse-all { + display: none; + } + + .expand-all { + display: block; + } } } @@ -124,7 +149,7 @@ .add-item { margin-top: ($baseline*0.75); - .action-add { + .button-new { @extend %ui-btn-flat-outline; padding: ($baseline/2) $baseline; display: block; @@ -132,7 +157,7 @@ .icon { display: inline-block; vertical-align: middle; - margin-right: ($baseline/4); + margin-right: ($baseline/2); } } } @@ -154,12 +179,13 @@ .outline-item { // CASE: expand/collapse-able - &.is-collapsible .expand-collapse { + &.is-collapsible { - // STATE: hover/active - &:hover, &:active { + // only select the current item's toggle expansion controls + &:nth-child(1) .ui-toggle-expansion, &:nth-child(1) .item-title { - .item-title, .ui-toggle-expansion { + // STATE: hover/active + &:hover, &:active { color: $blue; } } @@ -189,7 +215,7 @@ // header .section-header { - @include clearfix(); + @extend %outline-item-header; } .section-header-details { @@ -207,7 +233,6 @@ .wrapper-section-title { width: flex-grid(5, 6); - margin-top: -($baseline/4); line-height: 0; } } @@ -215,7 +240,7 @@ .section-header-actions { float: right; width: flex-grid(3, 9); - margin-top: -($baseline/2); + margin-top: -($baseline/4); text-align: right; .actions-list { @@ -226,7 +251,30 @@ // status .section-status { - margin: 0 0 0 $outline-indent-width; + margin: 0 0 0 ($outline-indent-width*1.25); + } + + // content + .section-content { + @extend %outline-item-content-shown; + } + + // CASE: is-collapsible + &.is-collapsible { + @extend %ui-expand-collapse; + + .ui-toggle-expansion { + @extend %t-icon3; + color: $gray-l3; + } + } + + // STATE: is-collapsed + &.is-collapsed { + + .section-content { + @extend %outline-item-content-hidden; + } } } @@ -240,7 +288,7 @@ // header .subsection-header { - @include clearfix(); + @extend %outline-item-header; } .subsection-header-details { @@ -280,6 +328,29 @@ .subsection-status { margin: 0 0 0 $outline-indent-width; } + + // content + .subsection-content { + @extend %outline-item-content-shown; + } + + // CASE: is-collapsible + &.is-collapsible { + @extend %ui-expand-collapse; + + .ui-toggle-expansion { + @extend %t-icon4; + color: $gray-l3; + } + } + + // STATE: is-collapsed + &.is-collapsed { + + .subsection-content { + @extend %outline-item-content-hidden; + } + } } // outline: units @@ -293,8 +364,7 @@ // header .unit-header { - @include clearfix(); - // margin-bottom: ($baseline/4); + @extend %outline-item-header; } .unit-header-details { diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html index 93ec582d1edf..41857bda0f53 100644 --- a/cms/templates/ux/reference/outline.html +++ b/cms/templates/ux/reference/outline.html @@ -22,16 +22,16 @@

    Page Actions

  • Collapse All Sections - + Expand All Sections
  • - + Add Section
  • - View Live + View Live
    • @@ -82,9 +82,10 @@

    Your Course's Outline

    - <%include file="outline_add-unit.html" /> + + @@ -123,10 +124,11 @@

    Your Course's Outline

    + + <%include file="outline_add-unit.html" /> +

    - - <%include file="outline_add-unit.html" /> @@ -166,40 +168,8 @@

    Your Course's Outline

    - - - - - - - - - - -
    - + - -
    - + - - - - + - - - + -
  • +
  • <%include file="outline_unit_header.html" />
    • @@ -719,8 +689,8 @@

    Your Course's Outline

    - -
  • + +
  • <%include file="outline_unit_header.html" />
    @@ -728,10 +698,10 @@

    Your Course's Outline

    • - + - -
  • + +
  • <%include file="outline_unit_header.html" />
    @@ -739,7 +709,7 @@

    Your Course's Outline

    • - +
  • @@ -753,15 +723,23 @@

    Your Course's Outline

    + + <%include file="outline_add-unit.html" /> +
    • + + <%include file="outline_add-subsection.html" /> + + + <%include file="outline_add-section.html" /> diff --git a/cms/templates/ux/reference/outline_add-section.html b/cms/templates/ux/reference/outline_add-section.html index 0a03a520e22c..d45181db58f2 100644 --- a/cms/templates/ux/reference/outline_add-section.html +++ b/cms/templates/ux/reference/outline_add-section.html @@ -1,5 +1,5 @@
    - + New Section
    diff --git a/cms/templates/ux/reference/outline_add-subsection.html b/cms/templates/ux/reference/outline_add-subsection.html index 90d2db6dd5d3..551cf5ff3108 100644 --- a/cms/templates/ux/reference/outline_add-subsection.html +++ b/cms/templates/ux/reference/outline_add-subsection.html @@ -1,5 +1,5 @@
    - + New Subsection
    diff --git a/cms/templates/ux/reference/outline_add-unit.html b/cms/templates/ux/reference/outline_add-unit.html index 3a8325828672..0541071e0d05 100644 --- a/cms/templates/ux/reference/outline_add-unit.html +++ b/cms/templates/ux/reference/outline_add-unit.html @@ -1,5 +1,5 @@
    - + New Unit
    diff --git a/cms/templates/ux/reference/outline_section_header-collapsed.html b/cms/templates/ux/reference/outline_section_header-collapsed.html index 0b1dae162971..83956f5b029d 100644 --- a/cms/templates/ux/reference/outline_section_header-collapsed.html +++ b/cms/templates/ux/reference/outline_section_header-collapsed.html @@ -1,6 +1,6 @@
    -

    - +

    + Section Title diff --git a/cms/templates/ux/reference/outline_section_header-expanded.html b/cms/templates/ux/reference/outline_section_header-expanded.html index c841e0501768..83956f5b029d 100644 --- a/cms/templates/ux/reference/outline_section_header-expanded.html +++ b/cms/templates/ux/reference/outline_section_header-expanded.html @@ -1,6 +1,6 @@
    -

    - +

    + Section Title diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_changes.html b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html index beb37b56d647..ac6a752bc0f0 100644 --- a/cms/templates/ux/reference/outline_status_message-unpublished_changes.html +++ b/cms/templates/ux/reference/outline_status_message-unpublished_changes.html @@ -1,4 +1,4 @@
    - +

    Unpublished change(s) to live content

    diff --git a/cms/templates/ux/reference/outline_status_message-unpublished_units.html b/cms/templates/ux/reference/outline_status_message-unpublished_units.html index e14d95832728..cab479da3e3b 100644 --- a/cms/templates/ux/reference/outline_status_message-unpublished_units.html +++ b/cms/templates/ux/reference/outline_status_message-unpublished_units.html @@ -1,4 +1,4 @@
    - +

    Unpublished unit(s) will not be released

    diff --git a/cms/templates/ux/reference/outline_status_release-draft.html b/cms/templates/ux/reference/outline_status_release-draft.html index 1cd2f47b68eb..02304355abae 100644 --- a/cms/templates/ux/reference/outline_status_release-draft.html +++ b/cms/templates/ux/reference/outline_status_release-draft.html @@ -2,7 +2,7 @@

    Release Status: - + This item is Unscheduled diff --git a/cms/templates/ux/reference/outline_subsection_header-collapsed.html b/cms/templates/ux/reference/outline_subsection_header-collapsed.html index aa83af728ea8..c51e69520d2c 100644 --- a/cms/templates/ux/reference/outline_subsection_header-collapsed.html +++ b/cms/templates/ux/reference/outline_subsection_header-collapsed.html @@ -1,6 +1,6 @@

    -

    - +

    + Subsection Title diff --git a/cms/templates/ux/reference/outline_subsection_header-expanded.html b/cms/templates/ux/reference/outline_subsection_header-expanded.html index 00d17567ac3c..c51e69520d2c 100644 --- a/cms/templates/ux/reference/outline_subsection_header-expanded.html +++ b/cms/templates/ux/reference/outline_subsection_header-expanded.html @@ -1,6 +1,6 @@
    -

    - +

    + Subsection Title