From d1d0ef57ca1053877ff41c99667fde33cb5b1b51 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 9 Jul 2014 20:14:30 -0400 Subject: [PATCH 1/5] 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 3a18ed6ce056c3c13a2aafea4140372831e21e61 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 10 Jul 2014 11:10:05 -0400 Subject: [PATCH 2/5] 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 | 862 ++++++++++++++---- .../ux/reference/outline_add-section.html | 6 + .../ux/reference/outline_add-subsection.html | 6 + .../ux/reference/outline_add-unit.html | 6 + .../ux/reference/outline_section_header.html | 34 + .../ux/reference/outline_status_grading.html | 7 + .../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 + .../reference/outline_subsection_header.html | 33 + .../ux/reference/outline_unit_header.html | 32 + 18 files changed, 881 insertions(+), 177 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.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.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..092fec5fb2c8 100644 --- a/cms/templates/ux/reference/outline.html +++ b/cms/templates/ux/reference/outline.html @@ -31,7 +31,7 @@

Page Actions

  • - View Live + View Live
    • @@ -44,212 +44,720 @@

    Page Actions

    -
    +
    +

    Your Course's Outline

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

        - - - Introduction - - - - -

        - -
        - -
        -
        - - -
        -
        - - Released: Dec 31, 2015 at 21:00 UTC -
        - -
        -
          - -
        -
        -
        -
        - - -
          - -
        1. - - - -
          -
          - -

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

          - -
          -
            -
          • - - - Delete - +
          • + + <%include file="outline_section_header.html" /> + +
            + <%include file="outline_status_release-scheduled.html" /> +
            + + +
            +
              + +
            1. + + <%include file="outline_subsection_header.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. + +
            + + + <%include file="outline_add-subsection.html" /> + +
            + +
            • + +
        + + + <%include file="outline_add-section.html" /> + + + + + + +
          + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        1. + + <%include file="outline_section_header.html" /> + +
          + <%include file="outline_status_release-draft.html" /> +
          + + +
          +
            + +
          + -
          -
          -
            - -
          +
          +
          -
          -
          + +
          2. + - -
            + +
          1. + <%include file="outline_subsection_header.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.html" /> + +
    + <%include file="outline_status_release-draft.html" /> +
    + + +
    +
      + +
    1. + + <%include file="outline_subsection_header.html" /> + +
      + <%include file="outline_status_release-scheduled.html" /> +
      + + +
      +
        + + +
      1. + <%include file="outline_unit_header.html" /> + +
        +
        + +
        +
        + +
        2. + + + + +
      2. + <%include file="outline_unit_header.html" /> + +
        +
        + Draft +
        +
        + +
        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..e0ee259d95fb --- /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..cb9182359e9a --- /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..dea9243218cc --- /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.html b/cms/templates/ux/reference/outline_section_header.html new file mode 100644 index 000000000000..fc398254e38e --- /dev/null +++ b/cms/templates/ux/reference/outline_section_header.html @@ -0,0 +1,34 @@ +
    +

    + + Section Name +

    + +
    + +
    +
    + + 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..0a842ce8fd3c --- /dev/null +++ b/cms/templates/ux/reference/outline_status_grading.html @@ -0,0 +1,7 @@ +
    +

    + 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..eb197d0ec831 --- /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..91f3120bedb4 --- /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..07cd8b510c27 --- /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..1b91a556dcc8 --- /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..c6e802ca8eca --- /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..82edd6817b83 --- /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..cfc859647891 --- /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..68c7426b1768 --- /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..88b83704356b --- /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..b6e8e3c69172 --- /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.html b/cms/templates/ux/reference/outline_subsection_header.html new file mode 100644 index 000000000000..cf4a1a8087c8 --- /dev/null +++ b/cms/templates/ux/reference/outline_subsection_header.html @@ -0,0 +1,33 @@ +
    +

    + + 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..7936096d5781 --- /dev/null +++ b/cms/templates/ux/reference/outline_unit_header.html @@ -0,0 +1,32 @@ +
    +

    + Unit Name +

    + +
    + +
    +
    + From b056d23cffeaec024ac0bfa71f499c6cf7d7b955 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Sun, 13 Jul 2014 21:35:35 -0400 Subject: [PATCH 3/5] adding in outline-related color values --- cms/static/sass/_variables.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index ce29dc96dc89..a841bf768e9a 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,13 @@ $shadow-l2: rgba($black, 0.05); $shadow-d1: rgba($black, 0.4); $shadow-d2: rgba($black, 0.6); +// colors - application +$color-released: $blue-alt; +$color-published: $green-alt; +$color-warning: $orange; +$color-error: $red; +$color-staff-only: $gray-d3; + // ==================== // timing - used for animation/transition mixin syncing From e0489cecd106783c7527955309a6c126f8182bf3 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 14 Jul 2014 10:45:26 -0400 Subject: [PATCH 4/5] markup revs to static renderings --- cms/templates/ux/reference/outline.html | 83 ++++++++----------- .../outline_section_header-collapsed.html | 34 ++++++++ ...l => outline_section_header-expanded.html} | 6 +- .../ux/reference/outline_status_grading.html | 1 + .../outline_subsection_header-collapsed.html | 33 ++++++++ ...> outline_subsection_header-expanded.html} | 6 +- .../ux/reference/outline_unit_header.html | 6 +- 7 files changed, 113 insertions(+), 56 deletions(-) create mode 100644 cms/templates/ux/reference/outline_section_header-collapsed.html rename cms/templates/ux/reference/{outline_section_header.html => outline_section_header-expanded.html} (84%) create mode 100644 cms/templates/ux/reference/outline_subsection_header-collapsed.html rename cms/templates/ux/reference/{outline_subsection_header.html => outline_subsection_header-expanded.html} (85%) diff --git a/cms/templates/ux/reference/outline.html b/cms/templates/ux/reference/outline.html index 092fec5fb2c8..b5562d3f6ef7 100644 --- a/cms/templates/ux/reference/outline.html +++ b/cms/templates/ux/reference/outline.html @@ -52,7 +52,7 @@

    Your Course's Outline

  • - <%include file="outline_section_header.html" /> + <%include file="outline_section_header-expanded.html" />
    <%include file="outline_status_release-scheduled.html" /> @@ -64,7 +64,7 @@

    Your Course's Outline

  • - <%include file="outline_subsection_header.html" /> + <%include file="outline_subsection_header-expanded.html" />
    <%include file="outline_status_release-scheduled.html" /> @@ -78,13 +78,6 @@

    Your Course's Outline

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

    Your Course's Outline

  • - <%include file="outline_section_header.html" /> + <%include file="outline_section_header-expanded.html" />
    <%include file="outline_status_release-draft.html" /> @@ -338,7 +331,7 @@

    Your Course's Outline

  • - <%include file="outline_section_header.html" /> + <%include file="outline_section_header-expanded.html" />
    <%include file="outline_status_release-draft.html" /> @@ -638,7 +627,7 @@

    Your Course's Outline

  • - <%include file="outline_subsection_header.html" /> + <%include file="outline_subsection_header-expanded.html" />
    <%include file="outline_status_release-scheduled.html" /> 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..3773dd9cf1a2 --- /dev/null +++ b/cms/templates/ux/reference/outline_section_header-collapsed.html @@ -0,0 +1,34 @@ +
    +

    + + Section Name +

    + +
    + +
    +
    + + diff --git a/cms/templates/ux/reference/outline_section_header.html b/cms/templates/ux/reference/outline_section_header-expanded.html similarity index 84% rename from cms/templates/ux/reference/outline_section_header.html rename to cms/templates/ux/reference/outline_section_header-expanded.html index fc398254e38e..4bea8764440e 100644 --- a/cms/templates/ux/reference/outline_section_header.html +++ b/cms/templates/ux/reference/outline_section_header-expanded.html @@ -9,19 +9,19 @@

    - Publish all content + Publish all content

  • - Settings + Settings
  • - Delete + Delete
  • diff --git a/cms/templates/ux/reference/outline_status_grading.html b/cms/templates/ux/reference/outline_status_grading.html index 0a842ce8fd3c..5d1c51c341e7 100644 --- a/cms/templates/ux/reference/outline_status_grading.html +++ b/cms/templates/ux/reference/outline_status_grading.html @@ -1,6 +1,7 @@

    Graded as: + Homework Due: December 31, 2014

    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..df4f57db45e2 --- /dev/null +++ b/cms/templates/ux/reference/outline_subsection_header-collapsed.html @@ -0,0 +1,33 @@ +
    +

    + + Subsection Name +

    + +
    + +
    +
    + diff --git a/cms/templates/ux/reference/outline_subsection_header.html b/cms/templates/ux/reference/outline_subsection_header-expanded.html similarity index 85% rename from cms/templates/ux/reference/outline_subsection_header.html rename to cms/templates/ux/reference/outline_subsection_header-expanded.html index cf4a1a8087c8..8cf6e44c7e57 100644 --- a/cms/templates/ux/reference/outline_subsection_header.html +++ b/cms/templates/ux/reference/outline_subsection_header-expanded.html @@ -9,19 +9,19 @@

    - Publish + Publish

  • - Settings + Settings
  • - Delete + Delete
  • diff --git a/cms/templates/ux/reference/outline_unit_header.html b/cms/templates/ux/reference/outline_unit_header.html index 7936096d5781..0b5b6628f192 100644 --- a/cms/templates/ux/reference/outline_unit_header.html +++ b/cms/templates/ux/reference/outline_unit_header.html @@ -8,19 +8,19 @@

  • - Publish + Publish
  • - Settings + Settings
  • - Delete + Delete
  • From bcb0f1ce045719766bc29f8c1ab785b09a051d34 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 14 Jul 2014 18:47:41 -0400 Subject: [PATCH 5/5] WIP - styling outline view --- cms/static/sass/_developer.scss | 76 --- cms/static/sass/_variables.scss | 5 + cms/static/sass/elements/_modules.scss | 15 + cms/static/sass/elements/_typography.scss | 17 + cms/static/sass/views/_outline.scss | 591 ++++++++-------------- common/static/sass/_mixins.scss | 2 +- 6 files changed, 238 insertions(+), 468 deletions(-) diff --git a/cms/static/sass/_developer.scss b/cms/static/sass/_developer.scss index dd92d653d4b6..f5c69e8e6b77 100644 --- a/cms/static/sass/_developer.scss +++ b/cms/static/sass/_developer.scss @@ -8,79 +8,3 @@ // } // -------------------- - -//.wrapper-xblock-header { - -.view-outline, -.view-container { - - .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 a841bf768e9a..bf5fa1bb784a 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -163,11 +163,16 @@ $shadow-d1: rgba($black, 0.4); $shadow-d2: rgba($black, 0.6); // colors - application +$color-draft: $gray-l3; $color-released: $blue-alt; $color-published: $green-alt; $color-warning: $orange; $color-error: $red; $color-staff-only: $gray-d3; +$color-heading-base: $gray-d2; +$color-copy-base: $gray-l1; + + // ==================== diff --git a/cms/static/sass/elements/_modules.scss b/cms/static/sass/elements/_modules.scss index 2ea12140ef71..7adb09b650e4 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; @@ -31,6 +32,7 @@ } // blue bar and title bg version +// -------------------- %bar-module-blue { @extend %bar-module; border-top: 5px solid $blue; @@ -42,6 +44,7 @@ // green bar and title bg version +// -------------------- %bar-module-green { @extend %bar-module; border-top: 5px solid $green; @@ -53,6 +56,7 @@ // yellow bar and title bg version +// -------------------- %bar-module-yellow { @extend %bar-module; border-top: 5px solid $orange-l2; @@ -65,6 +69,7 @@ // red bar and title bg version +// -------------------- %bar-module-red { @extend %bar-module; border-top: 5px solid $red-l2; @@ -76,6 +81,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; @@ -134,6 +140,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; @@ -163,6 +170,7 @@ } // individual menus + // -------------------- .new-component-template { @include clearfix; @@ -195,6 +203,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; @@ -240,4 +249,10 @@ } } +// outline UI +// -------------------- +.outline { + +} + 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..4051e42191cc 100644 --- a/cms/static/sass/views/_outline.scss +++ b/cms/static/sass/views/_outline.scss @@ -3,7 +3,14 @@ .view-outline { + // outline-centric stuff to abstract + // -------------------- + $outline-indent-width: $baseline; + + + // page structure + // -------------------- .content-primary, .content-supplementary { @include box-sizing(border-box); @@ -37,7 +44,8 @@ } - // page header bits + // page header + // -------------------- .toggle-button-sections { @extend %t-copy-sub2; position: relative; @@ -55,8 +63,10 @@ } } + // adding outline elements + // -------------------- - // new section, subsection, unit + // forms .new-section-name, .new-subsection-name-input { @include font-size(16); @@ -84,6 +94,7 @@ color: $gray-l1; } + // buttons .new-subsection-item, .new-unit-item { @extend %ui-btn-flat-outline; @@ -106,490 +117,288 @@ // 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; + // -------------------- - .action { - min-width: ($baseline*.75); - color: $gray-l2; + // outline + // -------------------- + .outline { - &: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; - } - - } } + .outline-item { - // 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; - - &.collapsed { - padding-bottom: 0; + .status-release { + @extend %t-strong; } - &.collapsed .subsection-list, - .collapsed .subsection-list, - .collapsed > ol { - display: none !important; - } + // STATE: not published + not scheduled/released - &.new-section { - padding: ($baseline*1.5) $baseline 0 $baseline; - header { - @include clearfix(); - height: auto; - border-bottom: 0; + } - .expand-collapse { - display: none; - } + // sections + // -------------------- + .list-sections { - .item-details { - width: auto; + } - .section-name { - float: none; - width: 100%; - } - } - } - } + .outline-section { + @extend %ui-window; + margin-bottom: $baseline; + padding: ($baseline/4) $baseline ($baseline*0.75) $baseline; - .section { - @include clearfix(); - min-height: 65px; // needed to align with edit input + // CASE: last-child in UI + &:last-child { 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; - } - } + // STATE: is-collapsed + &.is-collapsed { + border-left: ($baseline/4) solid $color-draft; + } - .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; - } - } - } + // CASE: is published by not released + &.is-published { + border-left-color: $color-published; - // section specific action styles - .item-actions { - position: relative; - display: inline-block; - float: right; - margin-bottom: ($baseline/2); - top: 0; + &.is-published.is-released { + border-left-color: $color-released; } + } - .actions-item { - padding: 0 0 0 8px; - - &:last-child { - padding-right: 4px; - } - - &.pubdate { - padding-right: 0; - } - - .action { + // CASE: has staff-only content + &.has-staff-only { + border-left-color: $color-staff-only; + } - &.pubdate { - visibility: hidden; - } + // CASE: has changes + &.is-published.is-released.has-changes, // needed for poor specificity + &.has-changes { + border-left-color: $color-warning; - &:hover, - &.is-set { - color: $blue; - visibility: visible; - } - } + .section-status .status-message { - .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; - - &:hover { - color: $blue; - } - } - } + *[class^='icon-'] { + color: $color-warning; } } } - } - - // subsection styles - .courseware-subsection { - @include clearfix(); - padding: 3px 0; + // CASE: has errors + &.is-published.is-released.has-errors, // needed for poor specificity + &.has-errors { + border-left-color: $color-error; - &.visible { - border-left: 5px solid $green; + .section-status .status-message { + color: $color-error; + } } - &.mixed { - border-left: 5px solid $yellow-s1; + // header + .section-header { + @include clearfix(); } - .status { - @extend %cont-text-sr; + .section-header-details { + float: left; + width: flex-grid(6, 9); } - .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; - - .item-actions { - display: block; - } - } + .section-header-actions { + float: right; + width: flex-grid(3, 9); + text-align: right; - &.editing { - background: $orange-l4; + .actions-list { + @extend %actions-list; + @extend %t-action2; + // margin-right: ($baseline*1.25); } } - .details { - display: block; - margin-bottom: 0; - width: 600px; - - a { - color: $baseFontColor; - } + // header - title + .section-title { + @extend %t-title5; + @extend %t-strong; + color: $color-heading-base; } - } - - // 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; - text-align: right; - font-weight: bold; - line-height: 16px; + // status + .section-status { + @extend %t-copy-sub2; + margin: 0 0 0 $outline-indent-width; + color: $color-copy-base; } - .menu-toggle { - @extend %ui-depth1; - position: absolute; - top: 0; - right: 5px; - padding: 2px 5px; - color: $gray-l2; - - &:hover, - &.is-active { - color: $blue; - } + // status - release + .status-release { + display: inline-block; + vertical-align: middle; - &:focus { - outline: 0; + *[class^='icon-'] { + margin-right: ($baseline/4); } } - - // 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; - } - } + // status - grading + .status-grading { + display: inline-block; + vertical-align: middle; + margin-left: ($baseline/2); } - // gradable dropdown state - &.is-active { - - .menu { - @extend %ui-depth3; - display: block; - opacity: 1.0; - } + .status-grading-value { + display: inline-block; + vertical-align: middle; + } - .menu-toggle { - @extend %ui-depth4; - } + .status-grading-date { + display: inline-block; + vertical-align: middle; + margin-left: ($baseline/4); } - // set state - &.is-set { + // status - message + .status-message { + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/4); - .menu-toggle { - color: $blue; + *[class^='icon-'] { + margin-right: ($baseline/4); } + } - .status-label { - display: block; - color: $blue; - } + .status-message-copy { + display: inline-block; } } - .courseware-subsection .sortable-unit-list { - margin: ($baseline/4) 0 0 0; + // subsections + // -------------------- + .list-subsections { + margin: $baseline 0 0 0; } - // unit styles - .courseware-unit { - margin: -1px 0 0 ($baseline*1.75); + .outline-subsection { + margin-bottom: ($baseline/2); + border: 1px solid $gray-l4; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding: ($baseline/2) ($baseline*0.75); - &.add-new-unit { - margin: 5px ($baseline*1.75) 0 ($baseline*1.75); + // CASE: last-child in UI + &:last-child { + margin-bottom: 0; } - .section-item { - border: 0; - background-color: $white; + // STATE: is-collapsed + &.is-collapsed { + border-left: ($baseline/4) solid $color-draft; } - .public-item { - color: $black; + // header + .subsection-header { + @include clearfix(); } - .private-item { - color: $gray-l1; + .subsection-header-details { + float: left; + width: flex-grid(6, 9); } - .draft-item { - color: $yellow-d1; - } + .subsection-header-actions { + float: right; + width: flex-grid(3, 9); + text-align: right; - .draft-item:after, - .public-item:after, - .private-item:after { - @include font-size(9); - margin-left: 3px; - font-weight: 600; - text-transform: uppercase; + .actions-list { + @extend %actions-list; + @extend %t-action2; + margin-right: ($baseline/2); + } } - .draft-item:after { - content: "- draft"; + // header - title + .subsection-title { + @extend %t-title6; + color: $color-heading-base; } - .private-item:after { - content: "- private"; + // status + .subsection-status { + @extend %t-copy-sub2; + margin: -($baseline/4) 0 0 $outline-indent-width; + color: $color-copy-base; } } + // units + // -------------------- + .list-units { + margin: $baseline 0 0 0; + } + .outline-unit { + margin-left: $outline-indent-width; + margin-bottom: ($baseline/2); + border: 1px solid $gray-l4; + padding: ($baseline/4) ($baseline/2); - // 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 */ + // CASE: last-child in UI + &:last-child { + margin-bottom: 0; } - .modal-window { - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - position: absolute; - top: 50%; - left: 50%; - opacity: 0; + // header + .unit-header { + @include clearfix(); + // margin-bottom: ($baseline/4); } - } - // modal-window showing/hiding - &.modal-window-is-shown { - overflow: hidden; + .unit-header-details { + float: left; + width: flex-grid(6, 9); + margin-top: ($baseline/4); + } - .wrapper-modal-window.is-shown { - visibility: visible; - pointer-events: auto; - display: block; + .unit-header-actions { + float: right; + width: flex-grid(3, 9); + text-align: right; - .modal-window { - opacity: 1.0; + .actions-list { + @extend %actions-list; + @extend %t-action2; } } - } - - .edit-section-publish-settings { - - .picker { - @include clearfix(); - - - .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; - } + // header - title + .unit-title { + @extend %t-title7; + color: $color-heading-base; + } - input[type="text"] { - @extend %t-copy-sub1; - } - } + .unit-status { + @extend %t-copy-sub2; + margin-left: $outline-indent-width; + color: $color-copy-base; } } + // UI: drag and drop + - // UI: DnD - specific elems/cases - section + // UI: drag and drop: section + // -------------------- .courseware-section { .draggable-drop-indicator-before { @@ -613,7 +422,7 @@ } } - // UI: DnD - specific elems/cases - subsection + // UI: drag and drop: subsection .courseware-subsection { .draggable-drop-indicator-before { @@ -638,7 +447,7 @@ } } - // UI: DnD - specific elems/cases - unit + // // UI: drag and drop: unit .courseware-unit { .draggable-drop-indicator-before { @@ -658,7 +467,7 @@ } } - // UI: DnD - specific elems/cases - empty parents splint + // UI: drag and drop: splints .ui-splint-indicator { position: relative; } diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss index 9208b03d8b2d..cdb152b6b6d0 100644 --- a/common/static/sass/_mixins.scss +++ b/common/static/sass/_mixins.scss @@ -90,7 +90,7 @@ // extends - UI - window %ui-window { @include clearfix(); - border-radius: 3px; + border-radius: ($baseline/10); box-shadow: 0 1px 1px $shadow-l1; margin-bottom: $baseline; border: 1px solid $gray-l2;