diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 553c687526..f921e2c6a7 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -56,7 +56,7 @@ h1 {
font-weight: 600;
color: $gray-d3;
- .subtitle {
+ .navigation, .subtitle {
@extend %t-title7;
position: relative;
top: ($baseline/4);
@@ -323,6 +323,44 @@ p, ul, ol, dl {
bottom: -($baseline*1.5);
}
}
+
+ // layout with navigation
+ &.has-navigation {
+
+ .nav-actions {
+ bottom: -($baseline*1.5);
+ }
+
+ .navigation-link {
+ @extend %cont-truncated;
+ display: inline-block;
+ max-width: 150px;
+
+ &.navigation-current {
+ @extend %ui-disabled;
+ color: $gray;
+
+ &:before {
+ color: $gray;
+ }
+ }
+ }
+
+ .navigation-link:before {
+ content: " / ";
+ margin: ($baseline/4);
+ color: $gray;
+
+ &:hover {
+ color: $gray;
+ }
+ }
+
+ .navigation .navigation-link:first-child:before {
+ content: "";
+ margin: 0;
+ }
+ }
}
// page metadata/action bar
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index ecb63e1b85..ce29dc96dc 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -42,6 +42,7 @@ $gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
+$gray-l7: tint($gray,99%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
diff --git a/cms/static/sass/assets/_anims.scss b/cms/static/sass/assets/_anims.scss
index 8b66032e68..4726776d39 100644
--- a/cms/static/sass/assets/_anims.scss
+++ b/cms/static/sass/assets/_anims.scss
@@ -246,4 +246,4 @@
// canned animation - use if you want out of the box/non-customized anim
%anim-flashDouble {
@include animation(flashDouble $tmg-f1 ease-in-out 1);
-}
\ No newline at end of file
+}
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 30a3a8561b..b76eee7d94 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -203,6 +203,66 @@
// ====================
+// UI: element actions list
+%actions-header {
+ .actions-list {
+ display: inline-block;
+ margin-bottom: 0;
+ }
+
+ .action-item {
+ display: inline-block;
+
+ .action-button {
+ @include transition(all $tmg-f2 ease-in-out 0s);
+ border-radius: 3px;
+ padding: ($baseline/4) ($baseline/2);
+ height: ($baseline*1.5);
+ color: $gray-l1;
+
+ &:hover {
+ background-color: $blue;
+ color: $gray-l6;
+ }
+
+ .action-button-text {
+ padding-left: 1px;
+ text-transform: uppercase;
+ }
+
+ &.delete-button:hover {
+ background-color: $gray-l1;
+ }
+ }
+ }
+}
+
+// UI: elem is collapsible
+%expand-collapse {
+ @include transition(all $tmg-f2 linear 0s);
+ display: inline-block;
+ color: $gray-l2;
+ vertical-align: top;
+
+ &:hover {
+ color: $blue;
+ }
+
+ .ui-toggle-expansion {
+ @include transition(all $tmg-f2 ease-in-out 0s);
+ @include font-size(18);
+ display: inline-block;
+ margin-right: ($baseline/4);
+ color: $gray-l3;
+ vertical-align: middle;
+ }
+
+ &.expand .ui-toggle-expansion {
+ @include transform(rotate(-90deg));
+ @include transform-origin(50% 50%);
+ }
+}
+
// UI: drag handles
.drag-handle {
diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
new file mode 100644
index 0000000000..df863ebc6c
--- /dev/null
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -0,0 +1,77 @@
+// studio - elements - xblock rendering
+// ==========================
+
+// extends - UI archetypes - xblock rendering
+%wrap-xblock {
+ margin: ($baseline/2);
+ border: 1px solid $gray-l4;
+ border-radius: ($baseline/5);
+ background: $white;
+ box-shadow: 0px 1px 1px $shadow-l1;
+
+
+ &:hover {
+ box-shadow: 0 0 1px $shadow;
+ }
+
+ // UI: xblock header
+ .xblock-header {
+ @include box-sizing(border-box);
+ @include ui-flexbox();
+ @extend %ui-align-center-flex;
+ border-bottom: 1px solid $gray-l4;
+ border-radius: ($baseline/5) ($baseline/5) 0 0;
+ min-height: ($baseline*2.5);
+ background-color: $gray-l6;
+
+ .header-details {
+ @extend %cont-truncated;
+ @extend %ui-justify-left-flex;
+ @include ui-flexbox();
+ padding-left: flex-gutter();
+ width: flex-grid(6,12);
+ vertical-align: top;
+ }
+
+ .header-actions {
+ @include ui-flexbox();
+ @extend %ui-justify-right-flex;
+ width: flex-grid(6,12);
+ vertical-align: top;
+ }
+ }
+
+ // UI: xblock render
+ .xblock-render {
+ @extend %anim-fadeIn;
+ }
+}
+
+// ====================
+
+// UI: xblocks - calls-to-action
+.wrapper-xblock .header-actions {
+ @extend %actions-header;
+}
+
+// UI: xblock is collapsible
+.wrapper-xblock.is-collapsible {
+
+ .expand-collapse {
+ @extend %expand-collapse;
+ margin: 0 ($baseline/4);
+ }
+
+ &.collapsed .xblock-render {
+ display: none;
+ }
+
+ .action-view {
+
+ .action-button-text {
+ padding-right: ($baseline/5);
+ padding-left: 0;
+ }
+ }
+}
+
diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss
index 2702157ee6..ac60914b72 100644
--- a/cms/static/sass/style-app-extend1.scss
+++ b/cms/static/sass/style-app-extend1.scss
@@ -27,6 +27,7 @@
@import 'elements/typography';
@import 'elements/icons'; // references to icons used
@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/xblocks'; // studio rendering chrome for xblocks
// base - specific views
@import 'views/account';
@@ -41,6 +42,7 @@
@import 'views/static-pages';
@import 'views/subsection';
@import 'views/unit';
+@import 'views/container';
@import 'views/users';
@import 'views/checklists';
@import 'views/textbooks';
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index c52b193786..830254d02c 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -325,24 +325,27 @@
}
}
- // uses similar styling as unit.scss, static-pages.scss
- .action-item {
- display: inline-block;
- margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+ // UI: assets - calls-to-action
+ .actions-list {
+ @extend %actions-header;
- .action-button {
- @include transition(all $tmg-f2 ease-in-out 0s);
- display: block;
- height: ($baseline*1.5);
- width: ($baseline*1.5);
- border-radius: 3px;
- color: $gray-l3;
+ .action-item {
+ display: inline-block;
+ margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
- &:hover {
- background-color: $blue;
- color: $gray-l6;
+ .action-button {
+ padding: 0;
+ display: block;
+ width: ($baseline*1.5);
+ height: ($baseline*1.5);
+ color: $gray-l3;
+ }
}
- }
+ }
+
+ // UI: assets - specific action styling
+ // TODO: this uses similar styling as unit.scss, static-pages.scss
+ .action-item {
[class^="icon-"] {
display: inline-block;
diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
new file mode 100644
index 0000000000..d3eeb08514
--- /dev/null
+++ b/cms/static/sass/views/_container.scss
@@ -0,0 +1,105 @@
+// studio - views - container
+// ==========================
+// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level.
+
+// For containers rendered at the element level, the container is rendered in a way that allows the user to navigate to a separate container page for that container making its children populate the nesting and element levels.
+
+// UI: container page view
+body.view-container {
+
+ .mast {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ .content-primary, .content-supplementary {
+ @include box-sizing(border-box);
+ float: left;
+ }
+
+ .content-primary {
+ margin-right: flex-gutter();
+ width: flex-grid(9,12);
+ }
+
+ .content-supplementary {
+ width: flex-grid(3,12);
+
+ label {
+ @extend %t-title8;
+ }
+ }
+}
+
+// UI: xblock rendering
+body.view-container .content-primary{
+
+ .wrapper-xblock {
+ @extend %wrap-xblock;
+
+ // CASE: page level xblock rendering
+ &.level-page {
+ margin: 0;
+
+ .xblock-header {
+ display: none;
+ }
+ }
+
+ // CASE: nesting level xblock rendering
+ &.level-nesting {
+ border: none;
+ padding-bottom: $baseline;
+ box-shadow: none;
+
+ &:hover {
+ @include transition(all $tmg-f2 linear 0s);
+ background-color: $gray-l7;
+ box-shadow: 0 0 1px $shadow-d2 inset;
+ }
+
+ .xblock-header {
+ @include ui-flexbox();
+ margin-bottom: ($baseline/2);
+ border-bottom: none;
+ background: none;
+ }
+ }
+
+ // CASE: element level xblock rendering
+ &.level-element {
+ margin: 0 ($baseline*2) $baseline ($baseline*2);
+ box-shadow: none;
+
+ &:hover {
+ @include transition(all $tmg-f2 linear 0s);
+ border-color: $blue;
+ }
+
+ .xblock-header {
+ margin-bottom: 0;
+ border-bottom: 1px solid $gray-l4;
+ background-color: $gray-l6;
+ font-weight: 300;
+ }
+
+ .xblock-render {
+ margin: $baseline;
+ }
+
+ // STATE: xBlock containers styled as rows.
+ &.xblock-type-container {
+
+ .xblock-header {
+ margin-bottom: 0;
+ border-bottom: 0;
+ border-radius: ($baseline/5);
+ }
+
+ .xblock-render {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 50bc5bfec7..d7188437a0 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -105,34 +105,15 @@
}
- // general action list styles (section and subsection)
+ // UI: general action list styles (section and subsection)
+
.expand-collapse {
- @include transition(all $tmg-f2 linear 0s);
- display: inline-block;
- vertical-align: top;
+ @extend %expand-collapse;
margin: 0 ($baseline/4);
- color: $gray-l2;
-
- &:hover {
- color: $blue;
- }
-
- .ui-toggle-expansion {
- @include transition(all $tmg-f2 ease-in-out 0s);
- @include font-size(18);
- display: inline-block;
- vertical-align: middle;
- margin-right: ($baseline/4);
- color: $gray-l3;
- }
-
- &.expand .ui-toggle-expansion {
- @include transform(rotate(-90deg));
- @include transform-origin(50% 50%);
- }
-
}
+ // UI: element actions list
+ // TODO: outline page can be updated to reflect styling from %actions-header extend in _controls.scss
.actions-list {
display: inline-block;
margin-bottom: 0;
@@ -141,7 +122,7 @@
.actions-item {
@include font-size(13);
display: inline-block;
- padding: 0 4px;
+ padding: 0 ($baseline/5);
vertical-align: middle;
.action {
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index dd2a897d2f..a52f9226c0 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -132,7 +132,7 @@
.component-actions {
display: inline-block;
- float: right;
+ float: right;
margin-right: $baseline*2;
padding: 8px 0px;
vertical-align: middle;
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 839c301022..d90a619a18 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -420,6 +420,19 @@ body.course.unit,.view-unit {
}
}
+ // Special xBlock and xModule styling
+ .xblock-type-container {
+
+ .xblock-header-elementlevel {
+ line-height: $baseline*2;
+ min-height: $baseline*2;
+ }
+
+ .xblock-render-elementlevel {
+ display: none;
+ }
+ }
+
.xblock-student_view {
padding: 2*$baseline $baseline $baseline;
overflow-x: auto;
@@ -1331,3 +1344,32 @@ body.unit {
div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
display: none;
}
+
+// ====================
+
+// xblock - unit page container
+
+body.unit .xblock-type-container {
+ @extend %wrap-xblock;
+ margin: 0;
+
+ &:hover {
+ @include transition(all $tmg-f2 linear 0s);
+ border-color: $blue;
+ box-shadow: 0 0 1px $shadow-d1;
+ }
+
+ .xblock-header {
+ margin-bottom: 0;
+ border-bottom: 0;
+ border-radius: ($baseline/5);
+
+ .xblock-details {
+ font-size: .9em;
+ }
+ }
+
+ .xblock-render {
+ display: none;
+ }
+}
diff --git a/cms/templates/js/asset.underscore b/cms/templates/js/asset.underscore
index 73f815f9e1..938ec10471 100644
--- a/cms/templates/js/asset.underscore
+++ b/cms/templates/js/asset.underscore
@@ -17,7 +17,7 @@
-
+
<%= gettext('Delete this asset') %>
diff --git a/cms/templates/ux/reference/container.html b/cms/templates/ux/reference/container.html
new file mode 100644
index 0000000000..00f5e7caea
--- /dev/null
+++ b/cms/templates/ux/reference/container.html
@@ -0,0 +1,442 @@
+<%inherit file="../../base.html" />
+<%!
+from django.core.urlresolvers import reverse
+from django.utils.translation import ugettext as _
+%>
+<%block name="title">${_("Container")}
+<%block name="bodyclass">is-signedin course uploads view-container
+
+<%namespace name='static' file='../../static_content.html'/>
+<%namespace name="units" file="../../widgets/units.html" />
+
+<%block name="content">
+
+
+
+
+
+
+
+ Page Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Shows Element - Example Randomize Block could be here.
+
+
+
+
+ Shows Element - Example HTML could be here.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Shows Element - Example Video could be here.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A multiple choice problem presents radio buttons for student
+ input. Students can only select a single option presented. Multiple Choice questions have been the subject of many areas of research due to the early invention and adoption of bubble sheets.
+
One of the main elements that goes into a good multiple choice question is the existence of good distractors. That is, each of the alternate responses presented to the student should be the result of a plausible mistake that a student might make.
+
+
What Apple device competed with the portable CD player?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ September 21
+
+
+ Words of encouragement! This is a short note that most students will read.
+ Anant Agarwal (6.002x Principal Instructor)
+
+
Primary versus Secondary Updates: Unfortunately, the internet throws a lot of text at students, and they
+ do not read everything that they are given. However, many students do read all that they are
+ given, and so detailed explanations in this section will benefit the most conscientious.
+ Any essential information should be extremely quickly summarized in the primary section for skimmers.
+
Star Forum Poster
+ Students appreciate knowing that the course staff is reading what they post, and one of several ways
+ that you can do this is by acknowledging the star posters in your announcements.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Container Reference Page
+
+ This is a reference for the container page, meant to show visual states and general FED hierarchy for the both the HTML template and the SASS styling.
+
+
+
+
+
+
+
+
+
+
+
+ UX Style Reference
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Display Name:
+
+
+
+
+
+
+
+
+ September 21
+
+
+ Words of encouragement! This is a short note that most students will read.
+ Anant Agarwal (6.002x Principal Instructor)
+
+
Primary versus Secondary Updates: Unfortunately, the internet throws a lot of text at students, and they
+ do not read everything that they are given. However, many students do read all that they are
+ given, and so detailed explainations in this section will benefit the most concientious.
+ Any essential information should be extremely quickly summarized in the primary section for skimmers.
+
Star Forum Poster
+ Students appriciate knowing that the course staff is reading what they post, and one of several ways
+ that you can do this is by acknowledging the star posters in your announcements.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Shows Element - Example Randomize Block could be here.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+