Skip to content

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

Studio: course outline revised styling with reference templates

parent fdc79b30
Showing with 676 additions and 80 deletions
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;
}
}
}
cms/static/sass/_variables.scss
......@@ -160,6 +160,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-live: $blue;
$color-ready: $green;
$color-warning: $orange-l2;
$color-error: $red-l2;
$color-staff-only: $black;
$color-heading-base: $gray-d2;
$color-copy-base: $gray-l1;
// ====================
// timing - used for animation/transition mixin syncing
......
cms/static/sass/assets/_anims.scss
......@@ -247,3 +247,27 @@
%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);
}
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 {
......
cms/static/sass/elements/_layout.scss
......@@ -77,10 +77,18 @@
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;
}
}
}
}
......
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,281 @@
}
}
// outline UI
// --------------------
// outline: utilities
$outline-indent-width: $baseline;
// UI: section
%outline-section {
@include transition(border-left-width $tmg-f2 linear 0s, border-left-color $tmg-f2 linear 0s);
border-left: 1px solid $color-draft;
// STATE: is-collapsed
&.is-collapsed {
border-left-width: ($baseline/4);
// CASE: is ready to be live
&.is-ready {
border-left-color: $color-ready;
}
// CASE: is live
&.is-live {
border-left-color: $color-live;
}
// CASE: has staff-only content
&.is-staff-only {
border-left-color: $color-staff-only;
}
// CASE: has unpublished content
&.has-warnings {
border-left-color: $color-warning;
}
// CASE: has errors
&.has-errors {
border-left-color: $color-error;
}
}
}
// UI: subsection
%outline-subsection {
@include transition(border-left-color $tmg-f2 linear 0s);
border-left: ($baseline/4) solid $color-draft;
// CASE: is ready to be live
&.is-ready {
border-left-color: $color-ready;
}
// CASE: is live
&.is-live {
border-left-color: $color-live;
}
// CASE: has staff-only content
&.is-staff-only {
border-left-color: $color-staff-only;
}
// CASE: has unpublished content
&.has-warnings {
border-left-color: $color-warning;
}
// CASE: has errors
&.has-errors {
border-left-color: $color-error;
}
}
%outline-item {
// UI: item title
.item-title {
@include transition(color $tmg-f2 ease-in-out 0s);
}
// CASE: last-child in UI
&:last-child {
margin-bottom: 0;
}
// CASE: has staff-only content
&.is-staff-only {
// needed to make sure direct children only
> .section-status,
> .subsection-status,
> .unit-status {
.icon {
color: $color-staff-only;
}
}
}
// CASE: has unpublished content
&.has-warnings {
// needed to make sure direct children only
> .section-status .status-message,
> .subsection-status .status-message,
> .unit-status .status-message {
.icon {
color: $color-warning;
}
}
}
// CASE: has errors
&.has-errors {
// needed to make sure direct children only
> .section-status .status-message,
> .subsection-status .status-message,
> .unit-status .status-message,
> .section-status .status-message-copy,
> .subsection-status .status-message-copy,
> .unit-status .status-message-copy {
color: $color-error;
}
}
}
%outline-item-status {
@extend %t-copy-sub2;
@extend %t-strong;
color: $color-copy-base;
.icon {
@extend %t-icon5;
margin-right: ($baseline/4);
}
}
// outline: sections
.outline-section {
@extend %ui-window;
@extend %outline-item;
@extend %outline-section;
margin-bottom: $baseline;
padding: ($baseline*0.75) $baseline;
// header - title
.section-title {
@extend %t-title5;
@extend %t-strong;
color: $color-heading-base;
}
// status
.section-status {
@extend %outline-item-status;
}
// status - release
.status-release {
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.65;
}
// status - grading
.status-grading {
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: 0.65;
}
.status-grading-value {
display: inline-block;
vertical-align: middle;
}
.status-grading-date {
display: inline-block;
vertical-align: middle;
margin-left: ($baseline/4);
}
// status - message
.status-message {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/4);
.icon {
margin-right: ($baseline/4);
}
}
.status-message-copy {
display: inline-block;
color: $color-heading-base;
}
// STATE: hover/active
&:hover, &:active {
// status - release
> .section-status .status-release {
opacity: 1.0;
}
}
}
// outline: subsections
.outline-subsection {
@extend %outline-item;
@extend %outline-subsection;
margin-bottom: ($baseline/2);
border: 1px solid $gray-l4;
border-left: ($baseline/4) solid $color-draft;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: ($baseline*0.75);
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
}
// STATE: is-collapsed
&.is-collapsed {
}
// header - title
.subsection-title {
@extend %t-title6;
color: $color-heading-base;
}
// status
.subsection-status {
@extend %outline-item-status;
}
// STATE: hover/active
&:hover, &:active {
// status - release
> .subsection-status .status-release {
opacity: 1.0;
}
// status - grading
> .subsection-status .status-grading {
opacity: 1.0;
}
}
}
// outline: units
.outline-unit {
@extend %outline-item;
margin-bottom: ($baseline/2);
border: 1px solid $gray-l4;
padding: ($baseline/4) ($baseline/2);
// STATE: hover/active
&:hover, &:active {
box-shadow: 0 1px 1px $shadow-l2;
}
// header - title
.unit-title {
@extend %t-title7;
color: $color-heading-base;
}
.unit-status {
@extend %outline-item-status;
}
}
cms/static/sass/elements/_typography.scss
......@@ -3,6 +3,23 @@
// 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;
......
cms/templates/ux/reference/outline_add-section.html 0 → 100644
<div class="add-section add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Section">
<i class="icon icon-plus"></i> New Section
</a>
</div>
<!-- /add-section -->
cms/templates/ux/reference/outline_add-subsection.html 0 → 100644
<div class="add-subsection add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Subsection">
<i class="icon icon-plus"></i> New Subsection
</a>
</div>
<!-- /add-subsection -->
cms/templates/ux/reference/outline_add-unit.html 0 → 100644
<div class="add-unit add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Unit">
<i class="icon icon-plus"></i> New Unit
</a>
</div>
<!-- /add-unit -->
cms/templates/ux/reference/outline_section_header-collapsed.html 0 → 100644
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
cms/templates/ux/reference/outline_section_header-expanded.html 0 → 100644
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
cms/templates/ux/reference/outline_status_grading.html 0 → 100644
<div class="status-grading">
<p>
<span class="sr status-grading-label">Graded as:</span>
<i class="icon icon-ok"></i>
<span class="status-grading-value">Homework</span>
<span class="status-grading-date">Due: December 31, 2014</span>
</p>
</div>
cms/templates/ux/reference/outline_status_message-error.html 0 → 100644
<div class="status-message">
<i class="icon icon-warning-sign"></i>
<p class="status-message-copy">Critical error</p>
</div>
cms/templates/ux/reference/outline_status_message-lock.html 0 → 100644
<div class="status-message">
<i class="icon icon-lock"></i>
<p class="status-message-copy">Contains Staff only content</p>
</div>
cms/templates/ux/reference/outline_status_message-unpublished_changes.html 0 → 100644
<div class="status-message">
<i class="icon icon-file-alt"></i>
<p class="status-message-copy">Unpublished change(s) to live content</p>
</div>
cms/templates/ux/reference/outline_status_message-unpublished_units.html 0 → 100644
<div class="status-message">
<i class="icon icon-file-alt"></i>
<p class="status-message-copy">Unpublished unit(s) will not be released</p>
</div>
cms/templates/ux/reference/outline_status_release-draft.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-file-alt"></i>
<span class="sr">This item is</span>
</span>
<span class="status-release-date">Unscheduled</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-lock.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-lock"></i>
Will never release - Contains Staff only content
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-released.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-check-sign"></i>
Released <span class="sr">on</span>:
</span>
<span class="status-release-date">March 25, 2014</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-released_with_parent.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-check-sign"></i>
Released with Section
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-scheduled.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-time"></i>
Scheduled: October 31, 2014
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html 0 → 100644
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon icon-time"></i>
Scheduled: with Section
</span>
</p>
</div>
cms/templates/ux/reference/outline_subsection_header-collapsed.html 0 → 100644
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
cms/templates/ux/reference/outline_subsection_header-expanded.html 0 → 100644
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
cms/templates/ux/reference/outline_unit_header.html 0 → 100644
<div class="unit-header">
<h3 class="unit-header-details">
<span class="unit-title item-title"><a class="unit-url" href="">Unit Name</a></span>
</h3>
<div class="unit-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon icon-share"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon icon-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon icon-trash"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /unit-header -->
common/static/sass/_mixins.scss
......@@ -90,11 +90,16 @@
// 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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment