styling for recursive xblock rendering structure to be used in the container…

styling for recursive xblock rendering structure to be used in the container page, pulling from general xblock styles in a separate file.

cms/djangoapps/contentstore/views/component.py

@@ -35,7 +35,6 @@ __all__ = ['OPEN_ENDED_COMPONENT_TYPES',
            'ADVANCED_COMPONENT_POLICY_KEY',
            'subsection_handler',
            'unit_handler',
-           'container_handler',
            'component_handler'
            ]
 
@@ -305,159 +304,6 @@ def unit_handler(request, tag=None, package_id=None, branch=None, version_guid=N
         return HttpResponseBadRequest("Only supports html requests")
 
 
-@require_http_methods(["GET"])
-@login_required
-def container_handler(request, tag=None, package_id=None, branch=None, version_guid=None, block=None):
-    """
-    The restful handler for unit-specific requests.
-
-    GET
-        html: return html page for editing a unit
-        json: not currently supported
-    """
-    if 'text/html' in request.META.get('HTTP_ACCEPT', 'text/html'):
-        locator = BlockUsageLocator(package_id=package_id, branch=branch, version_guid=version_guid, block_id=block)
-        try:
-            old_location, course, item, lms_link = _get_item_in_course(request, locator)
-        except ItemNotFoundError:
-            return HttpResponseBadRequest()
-
-        component_templates = defaultdict(list)
-        for category in COMPONENT_TYPES:
-            component_class = _load_mixed_class(category)
-            # add the default template
-            # TODO: Once mixins are defined per-application, rather than per-runtime,
-            # this should use a cms mixed-in class. (cpennington)
-            if hasattr(component_class, 'display_name'):
-                display_name = component_class.display_name.default or 'Blank'
-            else:
-                display_name = 'Blank'
-            component_templates[category].append((
-                display_name,
-                category,
-                False,  # No defaults have markdown (hardcoded current default)
-                None  # no boilerplate for overrides
-                ))
-            # add boilerplates
-            if hasattr(component_class, 'templates'):
-                for template in component_class.templates():
-                    filter_templates = getattr(component_class, 'filter_templates', None)
-                    if not filter_templates or filter_templates(template, course):
-                        component_templates[category].append((
-                            template['metadata'].get('display_name'),
-                            category,
-                            template['metadata'].get('markdown') is not None,
-                            template.get('template_id')
-                            ))
-
-        # Check if there are any advanced modules specified in the course policy.
-        # These modules should be specified as a list of strings, where the strings
-        # are the names of the modules in ADVANCED_COMPONENT_TYPES that should be
-        # enabled for the course.
-        course_advanced_keys = course.advanced_modules
-
-        # Set component types according to course policy file
-        if isinstance(course_advanced_keys, list):
-            for category in course_advanced_keys:
-                if category in ADVANCED_COMPONENT_TYPES:
-                    # Do I need to allow for boilerplates or just defaults on the
-                    # class? i.e., can an advanced have more than one entry in the
-                    # menu? one for default and others for prefilled boilerplates?
-                    try:
-                        component_class = _load_mixed_class(category)
-
-                        component_templates['advanced'].append(
-                            (
-                                component_class.display_name.default or category,
-                                category,
-                                False,
-                                None  # don't override default data
-                                )
-                        )
-                    except PluginMissingError:
-                        # dhm: I got this once but it can happen any time the
-                        # course author configures an advanced component which does
-                        # not exist on the server. This code here merely
-                        # prevents any authors from trying to instantiate the
-                        # non-existent component type by not showing it in the menu
-                        pass
-        else:
-            log.error(
-                "Improper format for course advanced keys! %s",
-                course_advanced_keys
-            )
-
-        components = [
-        loc_mapper().translate_location(
-            course.location.course_id, component.location, False, True
-        )
-        for component
-        in item.get_children()
-        ]
-
-        # TODO (cpennington): If we share units between courses,
-        # this will need to change to check permissions correctly so as
-        # to pick the correct parent subsection
-
-        containing_subsection_locs = modulestore().get_parent_locations(old_location, None)
-        containing_subsection = modulestore().get_item(containing_subsection_locs[0])
-        containing_section_locs = modulestore().get_parent_locations(
-            containing_subsection.location, None
-        )
-        containing_section = modulestore().get_item(containing_section_locs[0])
-
-        # cdodge hack. We're having trouble previewing drafts via jump_to redirect
-        # so let's generate the link url here
-
-        # need to figure out where this item is in the list of children as the
-        # preview will need this
-        index = 1
-        for child in containing_subsection.get_children():
-            if child.location == item.location:
-                break
-            index = index + 1
-
-        preview_lms_base = settings.FEATURES.get('PREVIEW_LMS_BASE')
-
-        preview_lms_link = (
-            '//{preview_lms_base}/courses/{org}/{course}/'
-            '{course_name}/courseware/{section}/{subsection}/{index}'
-            ).format(
-            preview_lms_base=preview_lms_base,
-            lms_base=settings.LMS_BASE,
-            org=course.location.org,
-            course=course.location.course,
-            course_name=course.location.name,
-            section=containing_section.location.name,
-            subsection=containing_subsection.location.name,
-            index=index
-        )
-
-        return render_to_response('container.html', {
-            'context_course': course,
-            'unit': item,
-            'unit_locator': locator,
-            'components': components,
-            'component_templates': component_templates,
-            'draft_preview_link': preview_lms_link,
-            'published_preview_link': lms_link,
-            'subsection': containing_subsection,
-            'release_date': (
-                get_default_time_display(containing_subsection.start)
-                if containing_subsection.start is not None else None
-                ),
-            'section': containing_section,
-            'new_unit_category': 'vertical',
-            'unit_state': compute_unit_state(item),
-            'published_date': (
-                get_default_time_display(item.published_date)
-                if item.published_date is not None else None
-                ),
-            })
-    else:
-        return HttpResponseBadRequest("Only supports html requests")
-
-
 @login_required
 def _get_item_in_course(request, locator):
     """

cms/static/js/base.js

@@ -66,9 +66,6 @@ domReady(function() {
         }
     });
 
-    // container navigation links - tooltips on overflow
-    $('a.navigation-link').bind('mouseenter', overflowTooltip);
-
     // general link management - new window/tab
     $('a[rel="external"]').attr('title', gettext('This link will open in a new browser window/tab')).bind('click', linkNewWindow);
 
@@ -120,12 +117,6 @@ domReady(function() {
     IframeUtils.iframeBinding();
 });
 
-function overflowTooltip(e) {
-    (e).preventDefault();
-    if ($(this).offsetWidth < this.scrollWidth && !this.attr('data-tooltip'))
-        $this.attr('data-tooltip', $this.text()); 
-}
-
 function smoothScrollLink(e) {
     (e).preventDefault();
 

cms/static/sass/_base.scss

@@ -56,7 +56,7 @@ h1 {
   font-weight: 600;
   color: $gray-d3;
 
-  .navigation, .navigation-divider, .subtitle {
+  .navigation, .subtitle {
     @extend %t-title7;
     position: relative;
     top: ($baseline/4);
@@ -324,38 +324,41 @@ p, ul, ol, dl {
       }
     }
 
-    // layout with actions
+    // layout with navigation
     &.has-navigation {
 
+      .nav-actions {
+        bottom: -($baseline*1.5);
+      }
+
       .navigation-link {
+        @extend %cont-truncated;
         display: inline-block;
-        overflow: hidden; 
         max-width: 150px;
-        color: inherit;
-        text-overflow: ellipsis;
-        white-space: nowrap;
 
-        &:hover {
-          color: $blue-s1;
+        &.navigation-current {
+          @extend %ui-disabled;
+          color: $gray;
 
-          &:after {
-          	color: $gray-l2;
+          &:before {
+            color: $gray;
           }
         }
       }
 
-      .navigation-link:after {
-          content: "/";
-          margin: 0px $baseline/4;
-          color: inherit;
+      .navigation-link:before {
+        content: " / ";
+        margin: ($baseline/4);
+        color: $gray;
 
-          &:hover {
-          	color: inherit;
-          }
+        &:hover {
+          color: $gray;
         }
+      }
 
-      .nav-actions {
-        bottom: -($baseline*1.5);
+      .navigation .navigation-link:first-child:before {
+        content: "";
+        margin: 0;
       }
     }
   }

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%);

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
+}

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 {
 

cms/static/sass/elements/_xblocks.scss

+// 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;
+    }
+  }
+}
+

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';

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;

cms/static/sass/views/_container.scss

 // studio - views - container
 // ==========================
+// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level.
 
-body.course.container,.view-container {
+// 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.
 
-  .main-wrapper {
-    margin-top: ($baseline*2);
-  }
-
-  //Problem Selector tab menu requirements
-  .js .tabs .tab {
-   display: none;
-  }
-  //end problem selector reqs
-
-
-  .unit-body.published {
-    .components > li {
-      border: none;
-
-      .rendered-component {
-        padding: 0 $baseline;
-      }
-    }
-  }
-
-  .content-primary {
-    clear: both;
-    float: left;
-    width: 70%;
-
-    .unit-name-input {
-      padding: $baseline 2*$baseline;
-
-      label {
-        display: block;
-      }
-
-      input {
-        width: 100%;
-        font-size: 20px;
-      }
-    }
-
-    .breadcrumbs {
-      border-radius: 3px 3px 0 0;
-      border-bottom: 1px solid #cbd1db;
-      @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
-      background-color: #edf1f5;
-      box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
-      @include clearfix;
-
-      li {
-        float: left;
-      }
-
-      a,
-      .current-page {
-        display: block;
-        padding: 15px 35px 15px 30px;
-        font-size: 14px;
-        background: url(../img/breadcrumb-arrow.png) no-repeat right center;
-      }
-    }
-
-    h2 {
-      margin: 30px 40px 30px 0;
-      color: #646464;
-      font-size: 19px;
-      font-weight: 300;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-    }
-    // ====================
-
-    // Component List Meta
-    .components {
-
-      > li {
-        position: relative;
-        z-index: 10;
-        margin: $baseline 2*$baseline;
-
-        .title {
-          margin: 0 0 15px 0;
-          color: $mediumGrey;
-
-          .value {
-          }
-        }
-
-        // ====================
-
-        // New Components
-        &.new-component-item {
-          margin: $baseline 0px;
-          border-top: 1px solid $mediumGrey;
-          box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
-          background-color: $lightGrey;
-          margin-bottom: 0px;
-          padding-bottom: $baseline;
-
-          .new-component-button {
-            display: block;
-            padding: $baseline;
-            text-align: center;
-            color: #edf1f5;
-          }
-
-          h5 {
-            margin: $baseline 0px;
-            color: #fff;
-            font-weight: 600;
-            font-size: 18px;
-          }
-
-          .rendered-component {
-            display: none;
-            background: #fff;
-            border-radius: 3px 3px 0 0;
-          }
-
-          .new-component-type {
-
-            a,
-            li {
-              display: inline-block;
-            }
-
-            a {
-              border: 1px solid $mediumGrey;
-              width: 100px;
-              height: 100px;
-              color: #fff;
-              margin-right: 15px;
-              margin-bottom: $baseline;
-              border-radius: 8px;
-              font-size: 15px;
-              line-height: 14px;
-              text-align: center;
-              box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
-
-              .name {
-                position: absolute;
-                bottom: 5px;
-                left: 0;
-                width: 100%;
-                padding: $baseline/2;
-                @include box-sizing(border-box);
-                color: #fff;
-              }
-            }
-          }
-
-          .new-component-templates {
-            display: none;
-            margin: $baseline 2*$baseline;
-            border-radius: 3px;
-            border: 1px solid $mediumGrey;
-            background-color: #fff;
-            box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
-            @include clearfix;
-
-            .cancel-button {
-              margin: $baseline 0px $baseline/2 $baseline/2;
-              @include white-button;
-            }
-
-            .problem-type-tabs {
-              display: none;
-            }
-
-            // specific menu types
-            &.new-component-problem {
-              padding-bottom: $baseline/2;
-
-              [class^="icon-"], .editor-indicator {
-                display: inline-block;
-              }
-
-              .problem-type-tabs {
-                display: inline-block;
-              }
-            }
-          }
-
-          .new-component-type,
-          .new-component-template {
-            @include clearfix;
-
-            a {
-              position: relative;
-              border: 1px solid $darkGreen;
-              background: tint($green,20%);
-              color: #fff;
-
-              &:hover {
-                background: $brightGreen;
-              }
-            }
-          }
-
-          .problem-type-tabs {
-            list-style-type: none;
-            border-radius: 0;
-            width: 100%;
-            @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-            background-color: $lightBluishGrey;
-            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
-
-            li:first-child {
-              margin-left: $baseline;
-            }
-
-            li {
-              float:left;
-              display:inline-block;
-              text-align:center;
-              width: auto;
-              @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-              background-color: tint($lightBluishGrey, 10%);
-              box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
-              opacity: 0.8;
-
-              &:hover {
-                opacity: 0.9;
-                background-color: tint($lightBluishGrey, 20%);
-              }
-
-              &.ui-state-active {
-                border: 0px;
-                @include active;
-                opacity: 1.0;
-              }
-            }
-
-            a {
-              display: block;
-              padding: 15px 25px;
-              font-size: 15px;
-              line-height: 16px;
-              text-align: center;
-              color: #3c3c3c;
-              text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-            }
-          }
-
-          .new-component-template {
-
-            a {
-              @include transition(none);
-              background: #fff;
-              border: 0px;
-              color: #3c3c3c;
-
-              &:hover {
-                @include transition(background-color $tmg-f2 linear 0s);
-                background: tint($green,30%);
-                color: #fff;
-              }
-            }
-
-            li {
-                border:none;
-                border-bottom: 1px dashed $lightGrey;
-                color: #fff;
-            }
-
-            li:first-child {
-              a {
-                border-top: 0px;
-              }
-            }
-
-            li:nth-child(2) {
-              a {
-                border-radius: 0px;
-              }
-            }
-
-            a {
-              @include clearfix();
-              display: block;
-              padding: 7px $baseline;
-              border-bottom: none;
-              font-weight: 500;
-
-              .name {
-                float: left;
-
-                [class^="icon-"] {
-                  @include transition(opacity $tmg-f2 linear 0s);
-                  display: inline-block;
-                  top: 1px;
-                  margin-right: 5px;
-                  opacity: 0.5;
-                  width: 17;
-                  height: 21px;
-                  vertical-align: middle;
-                }
-              }
-
-              .editor-indicator {
-                @include transition(opacity $tmg-f2 linear 0s);
-                float: right;
-                position: relative;
-                top: 3px;
-                font-size: 12px;
-                opacity: 0.3;
-              }
-
-              [class^="icon-"], .editor-indicator {
-                display: none;
-              }
-
-              &:hover {
-                color: #fff;
-
-                [class^="icon-"] {
-                  opacity: 1.0;
-                }
-
-                .editor-indicator {
-                  opacity: 1.0;
-                }
-              }
-            }
-
-            // specific editor types
-            .empty {
-
-              a {
-                line-height: 1.4;
-                font-weight: 400;
-                background: #fff;
-                color: #3c3c3c;
-
-
-                &:hover {
-                background: tint($green,30%);
-                color: #fff;
-              }
-              }
-            }
-          }
-
-          .new-component {
-            text-align: center;
-
-            h5 {
-              color: $darkGreen;
-            }
-
-          }
-        }
-
-      .wrapper-alert-error {
-          margin-top: ($baseline*1.25);
-          box-shadow: none;
-          border-top: 5px solid $red-l1;
-
-          .copy,
-          .title {
-            color: $white;
-          }
-
-      }
-
-
-      }
-    }
-
-    // ====================
-
-    // Component Drag and Drop, Non-Edit Module Rendering, Styling
-    .component {
-      border: 1px solid $lightBluishGrey2;
-      border-radius: 3px;
-      background: #fff;
-      @include transition(none);
-
-      &:hover {
-        border-color: #6696d7;
-
-        .drag-handle {
-          background-color: $blue;
-          border-color: $blue;
-        }
-      }
-
-      &.editing {
-        border: 1px solid $lightBluishGrey2;
-        z-index: auto;
-
-        .drag-handle,
-        .component-actions {
-          display: none;
-        }
-      }
-
-      &.component-placeholder {
-        border-color: #6696d7;
-      }
-
-      .drag-handle {
-        position: absolute;
-        display: block;
-        top: -1px;
-        right: -16px;
-        z-index: 10;
-        width: 15px;
-        height: 100%;
-        border-radius: 0 3px 3px 0;
-        border: 1px solid $lightBluishGrey2;
-        background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
-        cursor: move;
-        @include transition(none);
-      }
-    }
-
-    .xmodule_display {
-      padding: 2*$baseline $baseline $baseline;
-      overflow-x: auto;
-
-      h1 {
-        float: none;
-        margin-left: 0;
-      }
-    }
-
-    // UI: DnD - specific elems/cases - unit
-    .courseware-unit {
-
-      // STATE: was dropped
-      &.was-dropped {
-
-        > .section-item {
-          background-color: $ui-update-color !important; // nasty, but needed for specificity
-        }
-      }
-    }
-
-    // ====================
-
-    // Component Editing
-    .wrapper-component-editor {
-      z-index: 9999;
-      position: relative;
-      background: $white;
-    }
-
-    .component-editor {
-      @include edit-box;
-      box-shadow: none;
-      display: none;
-      padding: 0;
-      border-radius: 2px 2px 0 0;
-
-      h3 {
-        margin-bottom: $baseline/2;
-        font-size: 18px;
-        font-weight: 700;
-      }
-
-      h5 {
-        margin-bottom: 8px;
-        color: #fff;
-        font-weight: 700;
-      }
-
-      .row {
-        margin-bottom: 0px;
-      }
-
-      // Module Actions, also used for Static Pages
-      .module-actions {
-        box-shadow: inset 0 1px 2px $shadow;
-        border-top: 1px solid $gray-l1;
-        padding: ($baseline*0.75) $baseline;
-        background: $gray-l6;
-
-        .action {
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: ($baseline/4);
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-
-        .action-primary {
-          @include blue-button;
-          @extend %t-action2;
-          @include transition(all .15s);
-          display: inline-block;
-          padding: ($baseline/5) $baseline;
-          font-weight: 600;
-          text-transform: uppercase;
-        }
-
-        .action-secondary {
-          @include grey-button;
-          @extend %t-action2;
-          @include transition(all .15s);
-          display: inline-block;
-          padding: ($baseline/5) $baseline;
-          font-weight: 600;
-          text-transform: uppercase;
-        }
-      }
-    }
-  }
-}
-
-// Edit Header (Component Name, Mode-Editor, Mode-Settings)
-.component-edit-header {
-  @include box-sizing(border-box);
-  padding: 18px 0 18px $baseline;
-  top: 0;
-  right: 0;
-  background-color: $blue;
-  border-bottom: 1px solid $blue-d2;
-  color: $white;
-
-  //Component Name
-  .component-name {
-    @extend %t-copy-sub1;
-    width: 50%;
-    color: $white;
-    font-weight: 600;
-
-    em {
-      display: inline-block;
-      margin-right: ($baseline/4);
-      font-weight: 400;
-      color: $white;
-    }
-  }
-
-  //Nav-Edit Modes
-  .nav-edit-modes {
-    list-style: none;
-    right: 0;
-    top: 0;
-    position: absolute;
-    padding: 12px ($baseline*0.75);
-
-    .mode {
-      display: inline-block;
-      margin-left: 8px;
-
-      &.inactive-mode{
-        display: none;
-      }
-
-      &.active-mode a {
-
-        @include blue-button;
-
-        &.is-set {
-          @include linear-gradient($blue, $blue);
-          color: $blue-d1;
-          box-shadow: inset 0 1px 2px 1px $shadow-l1;
-          background-color: $blue-d4;
-          cursor: default;
-
-          &:hover {
-            box-shadow: inset 0 1px 2px 1px  $shadow;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Editor Wrapper
-.wrapper-comp-editor {
-  display: block;
-
-  // Because the editor may be a CodeMirror editor (which must be visible at the time it is created
-  // in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active".
-  &.is-inactive {
-    display: none;
-  }
-}
-
-// Settings Wrapper
-.wrapper-comp-settings {
-  display: none;
-
-  &.is-active {
-    display: block;
-  }
-
-  //settings-list
-  .list-input.settings-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    overflow: auto;
-    max-height: 400px;
-
-    //chrome scrollbar visibility correction
-    &::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 11px;
-      height: 11px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 8px;
-      border: 2px solid $gray-l2;
-      background-color: rgba(0, 0, 0, .5);
-    }
-
-    //component-setting-entry
-    .field.comp-setting-entry {
-      background-color: $white;
-      padding: $baseline;
-      border-bottom: 1px solid $gray-l2;
-      opacity: 0.7;
-
-      &:last-child {
-        //margin-bottom: 0;
-      }
-
-      //no required component settings currently
-      &.required {
-        label {
-          //font-weight: 600;
-        }
-        label:after {
-          //margin-left: ($baseline/4);
-          //content: "*";
-        }
-      }
-
-      &:hover {
-        @include transition(opacity $tmg-f2 ease-in-out 0s);
-        opacity: 1.0;
-      }
-
-      &.is-set {
-        opacity: 1.0;
-        background-color: $white;
-
-        .setting-input {
-          color: $blue-l1;
-        }
-      }
-
-      .wrapper-comp-setting {
-        display: inline-block;
-        min-width: 300px;
-        width: 55%;
-        top: 0;
-        vertical-align: top;
-        margin-bottom:5px;
-        position: relative;
-      }
-
-      .setting-label {
-        @extend %t-copy-sub1;
-        @include transition(color $tmg-f2 ease-in-out 0s);
-        vertical-align: middle;
-        display: inline-block;
-        position: relative;
-        left: 0;
-        width: 33%;
-        min-width: 100px;
-        margin-right: ($baseline/2);
-        font-weight: 600;
-
-        &.is-focused {
-          color: $blue;
-        }
-      }
-
-      input, select, input[type="number"] {
-        @include placeholder($gray-l4);
-        @include font-size(16);
-        @include size(100%,100%);
-        padding: ($baseline/2);
-        min-width: 100px;
-        width: 45%;
-
-        //&.long {
-          //
-        //}
-
-        //&.short {
-        //}
+// UI: container page view
+body.view-container {
 
-        //&.error {
-        // border-color: $red;
-        //}
-
-        //&:focus {
-        //  + .tip {
-        //    color: $gray;
-        //  }
-        border-radius: 3px;
-        border: 1px solid $gray-l2;
-        text-overflow: ellipsis;
-      }
-
-      //Allows users to copy full value of disabled inputs.
-      input.is-disabled{
-        text-overflow: clip;
-        opacity: .5;
-      }
-
-      input[type="number"] {
-
-        width: 38.5%;
-        box-shadow: 0 1px 2px $shadow-l1 inset;
-        //For webkit browsers which render number fields differently, make input wider.
-        -moz-column-width: {
-          width: 32%;
-        }
-
-        &:active {
-          background-color: #FFFCF1;
-        }
-      }
-
-      select {
-        //box-shadow: 0 1px 2px $shadow-l1 inset;
-
-        &:focus {
-          box-shadow: 0 0 1px $shadow;
-          @include transition(opacity $tmg-f2 ease-in-out 0s);
-          background-color: $yellow;
-        }
-
-        &:active {
-          background-color: $yellow;
-        }
-      }
-
-      .action.setting-clear {
-        @include font-size(11);
-        color: $gray;
-        width: 25px;
-        height: 25px;
-        vertical-align: middle;
-        padding: 5px;
-        border-radius: 50%;
-        margin: 0 $baseline/2;
-        box-shadow: none;
-        text-shadow: none;
-        border: 1px solid $gray-l1;
-        background-color: $gray-l4;
-
-        &:hover {
-          box-shadow: 0 1px 1px $shadow;
-          @include transition(opacity $tmg-f2 ease-in-out 0s);
-          background-color: $blue-s3;
-          border: 1px solid $blue-s3;
-          color: $white;
-        }
-
-        &.inactive {
-          visibility: hidden;
-        }
-      }
-
-      .setting-help {
-        @include font-size(12);
-        display: inline-block;
-        font-color: $gray-l6;
-        min-width: ($baseline*10);
-        width: 35%;
-        vertical-align: top;
-      }
-
-
-
-      // TYPE: enumerated lists of metadata sets
-      .metadata-list-enum {
-
-        * {
-          @include box-sizing(border-box);
-        }
-
-        // label
-        .setting-label {
-          vertical-align: top;
-          margin-top: ($baseline/2);
-        }
-
-        // inputs and labels
-        .wrapper-list-settings {
-          @include size(45%,100%);
-          display: inline-block;
-          min-width: ($baseline*5);
-
-          // enumerated fields
-          .list-settings {
-            margin: 0;
-
-            .list-settings-item {
-              margin-bottom: ($baseline/2);
-            }
-
-            // inputs
-            .input {
-              width: 80%;
-              margin-right: ($baseline/2);
-              vertical-align: middle;
-            }
-          }
-        }
-
-        // actions
-        .create-action, .remove-action, .setting-clear {
-
-        }
-
-        .setting-clear {
-          vertical-align: top;
-          margin-top: ($baseline/4);
-        }
-
-        .create-setting {
-          @extend %ui-btn-flat-outline;
-          @extend %t-action3;
-          display: block;
-          width: 100%;
-          padding: ($baseline/2);
-          font-weight: 600;
-
-          *[class^="icon-"] {
-            margin-right: ($baseline/4);
-          }
-
-          // STATE: disabled
-          &.is-disabled {
-
-          }
-        }
-
-        .remove-setting {
-          @include transition(color 0.25s ease-in-out);
-          @include font-size(20);
-          display: inline-block;
-          background: transparent;
-          color: $blue-l3;
-
-          &:hover {
-            color: $blue;
-          }
-
-          // STATE: disabled
-          &.is-disabled {
-
-          }
-        }
-      }
-    }
-  }
-}
-// ====================
-
-// Editing Units from Courseware
-//uses similar styling as static-pages.scss
-body.unit {
-
-  .component {
-    padding-top: 30px;
-
-
-    .wrapper-component-action-header {
-      @include box-sizing(border-box);
-      position: absolute;
-      width: 100%;
-      padding: $baseline/4 $baseline/2;
-      top: 0;
-      left: 0;
-      border-bottom: 1px solid $gray-l4;
-      background: $gray-l5;
-    }
-
-    .component-header {
-      display: inline-block;
-      width: 50%;
-      vertical-align: middle;
-    }
-
-    .component-actions {
-      display: inline-block;
-      float: right;
-      vertical-align: middle;
-      text-align: center;
-    }
-
-    &.editing {
-      padding-top: 0;
-    }
-
-    .drag-handle {
-      display: none;
-    }
-  }
-}
-
-// ====================
-
-// Component Header Actions
-// uses similar styling as assets.scss, static-pages.scss
-
-body.unit {
-
-  .component-actions {
-
-    .action-item {
-      display: inline-block;
-      margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
-
-      .action-button {
-        @include transition(all $tmg-f2 ease-in-out 0s);
-        display: block;
-        padding: 0 $baseline/2;
-        width: auto;
-        height: ($baseline*1.5);
-        border-radius: 3px;
-        color: $gray-l1;
-
-        &:hover {
-          background-color: $blue;
-          color: $gray-l6;
-        }
-
-        .action-button-text {
-          padding-left: 1px;
-          vertical-align: bottom;
-          line-height: 17px;
-        }
-
-        &.delete-button:hover {
-          background-color: $gray-l1;
-        }
-      }
-
-      [class^="icon-"] {
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-  }
-}
-
-// ====================
-
-// Unit Page Sidebar
-
-.content-supplementary {
-
-  label {
-    @extend %t-title8;
-  }
-}
-
-.unit-settings {
-
-  .window-contents {
-    padding: $baseline/2 $baseline;
-  }
-
-  .unit-actions {
+  .mast {
     border-bottom: none;
     padding-bottom: 0;
   }
 
-  .published-alert {
-    display: none;
-    padding: $baseline/2;
-    border: 1px solid #edbd3c;
-    border-radius: 3px;
-    background: #fbf6e1;
-    font-size: 14px;
-    line-height: 1.4;
-
-    div {
-      margin-top: 15px;
-    }
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
   }
 
-
-
-  input[type="radio"] {
-      margin-right: 7px;
+  .content-primary {
+    margin-right: flex-gutter();
+    width: flex-grid(9,12);
   }
 
-  .status {
-    @extend %t-copy-sub2;
+  .content-supplementary {
+    width: flex-grid(3,12);
 
-    strong {
-      font-weight: 700;
+    label {
+      @extend %t-title8;
     }
   }
-
-  .preview-button, .view-button {
-    @include white-button;
-    margin-bottom: $baseline/2;
-  }
-
-  .publish-button {
-    @include orange-button;
-  }
-
-  .delete-button {
-    @include blue-button;
-  }
-
-  .delete-draft {
-    display: inline-block;
-  }
-
-  .delete-button,
-  .preview-button,
-  .publish-button,
-  .view-button {
-    font-size: 11px;
-    margin-top: $baseline/2;
-    padding: 6px 15px 8px;
-  }
 }
 
-.unit-history {
-  &.collapsed {
-    h4 {
-      border-bottom: none;
-      border-radius: 3px;
-    }
-
-    .window-contents {
-      display: none;
-    }
-  }
-
-  ol {
-    border: 1px solid #ced2db;
+// UI: xblock rendering
+body.view-container  .content-primary{
 
-    li {
-      display: block;
-      padding: 6px 8px 8px $baseline/2;
-      background: #edf1f5;
-      font-size: 12px;
+  .wrapper-xblock {
+    @extend %wrap-xblock;
 
-      &:hover {
-        background: #fffcf1;
-
-        .item-actions {
-          display: block;
-        }
-      }
-
-      &.checked {
-        background: #d1dae3;
-      }
+    // CASE: page level xblock rendering
+    &.level-page {
+      margin: 0;
 
-      .item-actions {
+      .xblock-header {
         display: none;
       }
-
-      input[type="radio"] {
-        margin-right: 7px;
-      }
     }
-  }
-}
-
-.unit-location {
-
-  // unit id
-  .wrapper-unit-id {
 
-    .unit-id {
+    // CASE: nesting level xblock rendering
+    &.level-nesting {
+      border: none;
+      padding-bottom: $baseline;
+      box-shadow: none;
 
-      .label {
-        @extend %t-title7;
-        margin-bottom: ($baseline/4);
-        color: $gray-d1;
+      &:hover {
+        @include transition(all $tmg-f2 linear 0s);
+        background-color: $gray-l7;
+        box-shadow: 0 0 1px $shadow-d2 inset;
       }
 
-      .value {
-        margin-bottom: 0;
+      .xblock-header {
+        @include ui-flexbox();
+        margin-bottom: ($baseline/2);
+        border-bottom: none;
+        background: none;
       }
     }
-  }
-
-  .url {
-    box-shadow: none;
-    width: 100%;
-    margin-bottom: $baseline/2;
-  }
-
-  .draft-tag,
-  .hidden-tag,
-  .private-tag,
-  .has-new-draft-tag {
-    font-size: 8px;
-  }
 
-  .unit-tree-location {
-
-    .section-name {
-      @extend %t-title8;
-    }
-
-
-    .subsection,
-    .courseware-unit {
-      margin: ($baseline/4) 0 0 ($baseline);
-    }
-
-    .courseware-unit .section-item {
-      background-color: transparent;
-    }
-
-    .section-item {
-      @include transition(background $tmg-avg ease-in-out 0);
-      @include box-sizing(border-box);
-      @extend %t-copy-sub2;
-      display: inline-block;
-      width: 100%;
-      background: $gray-l5;
-      padding: 6px 8px 8px 16px;
-      vertical-align: top;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      color: $gray;
+    // CASE: element level xblock rendering
+    &.level-element {
+      margin: 0 ($baseline*2) $baseline ($baseline*2);
+      box-shadow: none;
 
       &:hover {
-        background: $blue-l5;
-        color: $blue;
-      }
-
-      &.editing {
-        background-color: $orange-l3;
-      }
-
-      .public-item {
-        color: $black;
-      }
-
-      .private-item {
-        color: $gray-l1;
-      }
-
-      .draft-item {
-        color: $yellow-d1;
+        @include transition(all $tmg-f2 linear 0s);
+        border-color: $blue;
       }
 
-      .public-item:hover,
-      .private-item:hover,
-      .draft-item:hover {
-        color: $blue;
-      }
-
-      .draft-item:after,
-      .public-item:after,
-      .private-item:after {
-        @include font-size(9);
-        margin-left: 3px;
-        font-weight: 600;
-        text-transform: uppercase;
+      .xblock-header {
+        margin-bottom: 0;
+        border-bottom: 1px solid $gray-l4;
+        background-color: $gray-l6;
+        font-weight: 300;
       }
 
-      .draft-item:after {
-        content: "- draft";
+      .xblock-render {
+        margin: $baseline;
       }
 
-      .private-item:after {
-        content: "- private";
-      }
-    }
+      // STATE: xBlock containers styled as rows.
+      &.xblock-type-container {
 
-    .new-unit-item {
-      @extend %ui-btn-flat-outline;
-      @extend %t-action4;
-      width: 90%;
-      margin: 0 0 ($baseline/2) ($baseline/4);
-      border: 1px solid transparent;
-      padding: ($baseline/4) ($baseline/2);
-      font-weight: normal;
-      color: $gray-l2;
-      text-align: left;
+        .xblock-header {
+          margin-bottom: 0;
+          border-bottom: 0;
+          border-radius: ($baseline/5);
+        }
 
-      &:hover {
-        box-shadow: none;
-        background-image: none;
+        .xblock-render {
+          display: none;
+        }
       }
     }
   }
 }
-
-.edit-state-draft {
-  .visibility,
-
-  .edit-draft-message,
-  .view-button {
-    display: none;
-  }
-
-  .published-alert {
-    display: block;
-  }
-}
-
-.edit-state-public {
-  .delete-draft,
-  .wrapper-component-action-header,
-  .new-component-item,
-  .editing-draft-alert,
-  .publish-draft-message,
-  .preview-button {
-    display: none;
-  }
-
-  .published-alert {
-    display: block;
-  }
-
-  .drag-handle {
-    display: none !important;
-  }
-}
-
-.edit-state-private {
-  .delete-draft,
-  .publish-draft,
-  .editing-draft-alert,
-  .create-draft,
-  .view-button {
-    display: none;
-  }
-}
-// ====================
-
-// Latex Compiler
-.launch-latex-compiler {
-  background-color: $white;
-  padding: $baseline/2 0 $baseline/2 $baseline;
-  border-bottom: 1px solid $gray-l2;
-  opacity: 0.8;
-
-
-  &:hover {
-    @include transition(opacity $tmg-f2 ease-in-out 0s);
-    opacity: 1.0s;
-  }
-}
-
-//  hides latex compiler button if settings mode is-active
-div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler{
- display: none;
-}

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 {

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;

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;
+  }
+}

cms/templates/container.html

-<%inherit file="base.html" />
-<%!
-from django.core.urlresolvers import reverse
-from django.utils.translation import ugettext as _
-%>
-<%block name="title">${_("Container")}</%block>
-<%block name="bodyclass">is-signedin course uploads view-container</%block>
-
-<%namespace name='static' file='static_content.html'/>
-<%namespace name="units" file="widgets/units.html" />
-
-<%block name="header_extras">
-% for template_name in [ ]:
-<script type="text/template" id="${template_name}-tpl">
-    <%static:include path="js/${template_name}.underscore" />
-</script>
-% endfor
-</%block>
-
-<%block name="jsextra">
-<script type='text/javascript'>
-    require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit", "jquery.ui"],
-            function(doc, $, ModuleModel, UnitEditView, ui) {
-                var model;
-                window.unit_location_analytics = '${unit_locator}';
-
-                // tabs
-                $('.tab-group').tabs();
-
-                model = new ModuleModel({
-                    id: '${unit_locator}',
-                    state: '${unit_state}'
-                });
-                new UnitEditView({
-                    el: $('.wrapper'),
-                    model: model
-                });
-
-                $('.new-component-template').each(function(){
-                    $emptyEditor = $(this).find('.empty');
-                    $(this).prepend($emptyEditor);
-                });
-            });
-</script>
-
-</%block>
-
-<%block name="content">
-
-
-<div class="wrapper-mast wrapper">
-    <header class="mast has-actions has-navigation">
-        <h1 class="page-header">
-            <small class="navigation navigation-parents">
-                <a href="#" class="navigation-link navigation-parent-previous">${_("Parent of Unit Page")}</a>
-                <a href="#" class="navigation-link navigation-parent">${_("Unit Page Super Long Title Name Goes Here Yeah Whats Up Parent")}</a>
-            </small>
-            <span class="sr">&gt; </span>
-            <span class="container-page-name">${_("Container")}</span>
-        </h1>
-
-        <nav class="nav-actions">
-            <h3 class="sr">${_("Page Actions")}</h3>
-            <ul>
-                <li class="nav-item">
-                    <a href="#" class="button upload-button new-button"><i class="icon-plus"></i> ${_("Upload New File")}</a>
-                </li>
-            </ul>
-        </nav>
-    </header>
-</div>
-
-<div class="wrapper-content wrapper">
-    <section class="content-area">
-        <article class="content-primary window">
-            <p class="unit-name-input"><label for="unit-display-name-input">${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" id="unit-display-name-input" class="unit-display-name-input" /></p>
-            <ol class="components">
-                % for locator in components:
-                <li class="component" data-locator="${locator}"/>
-                % endfor
-            </ol>
-        </article>
-
-        <aside class="content-supplementary" role="complimentary">
-            <div class="bit">
-                <h3 class="title-3">${_("What can I do on this page?")}</h3>
-                <ul class="list-details">
-                    <li class="item-detail">${_("Not much since this is read-only! TODO: need some real doc here...")}</li>
-                </ul>
-            </div>
-        </aside>
-    </section>
-</div>
-
-</%block>
-
-<%block name="view_alerts">
-<!-- alert: save confirmed with close -->
-<div class="wrapper wrapper-alert wrapper-alert-confirmation" role="status">
-    <div class="alert confirmation">
-        <i class="icon-ok"></i>
-
-        <div class="copy">
-            <h2 class="title title-3">${_('Your file has been deleted.')}</h2>
-        </div>
-
-        <a href="" rel="view" class="action action-alert-close">
-            <i class="icon-remove-sign"></i>
-            <span class="label">${_('close alert')}</span>
-        </a>
-    </div>
-</div>
-</%block>

cms/templates/js/asset.underscore

@@ -17,7 +17,7 @@
     <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly>
 </td>
 <td class="actions-col">
-    <ul>
+    <ul class="actions-list">
         <li class="action-item action-delete">
             <a href="#" data-tooltip="<%= gettext('Delete this asset') %>" class="remove-asset-button action-button"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext('Delete this asset') %></span></a>
         </li>

cms/templates/ux/reference/container.html

+<%inherit file="../../base.html" />
+<%!
+from django.core.urlresolvers import reverse
+from django.utils.translation import ugettext as _
+%>
+<%block name="title">${_("Container")}</%block>
+<%block name="bodyclass">is-signedin course uploads view-container</%block>
+
+<%namespace name='static' file='../../static_content.html'/>
+<%namespace name="units" file="../../widgets/units.html" />
+
+<%block name="content">
+<div id="content">
+
+<div class="wrapper-mast wrapper">
+    <header class="mast has-navigation">
+        <h1 class="page-header">
+            <small class="navigation navigation-parents">
+                <a href="#" class="navigation-link navigation-parent-previous">Parent of Unit Page</a>
+                <a href="#" class="navigation-link navigation-parent">Unit Page Super Long Title Name Goes Here Yeah Whats Up Parent</a>
+                <a href="#" class="navigation-link navigation-current">Container Name</a>
+            </small>
+        </h1>
+
+        <nav class="nav-actions">
+            <h3 class="sr">Page Actions</h3>
+            <ul>
+                <li class="sr nav-item">
+                    No Actions
+                </li>
+            </ul>
+        </nav>
+    </header>
+</div>
+<div class="wrapper-content wrapper">
+    <div class="inner-wrapper">
+        <section class="content-area">
+            <article class="content-primary">
+                <section class="wrapper-xblock level-page">
+                    <header class="xblock-header">
+                        <div class="header-details">
+                            Container Name
+                        </div>
+                        <div class="header-actions">
+                            <ul class="actions-list">
+                                <li class="action-item action-edit">
+                                    <a href="#" class="edit-button action-button">
+                                        <i class="icon-edit"></i>
+                                        <span class="action-button-text">Edit</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </header>
+                    <article class="xblock-render">
+                        <ol class="xblock-list">
+                            <li class="xblock-list-item">
+                                <section class="wrapper-xblock level-nesting is-collapsible">
+                                    <header class="xblock-header">
+                                        <div class="header-details">
+                                            <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
+                                                <i class="icon-caret-down ui-toggle-expansion"></i>
+                                                <span class="sr">Expand or Collapse</span>
+                                            </a>
+                                            <span>Condition 1</span>
+                                        </div>
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="sr action-item">No Actions</li>
+                                            </ul>
+                                        </div>
+                                    </header>
+                                    <article class="xblock-render">
+                                        <ol class="xblock-list">
+                                            <li class="xblock-list-item">
+                                                <section class="wrapper-xblock level-element">
+                                                    <header class="xblock-header">
+                                                        <div class="header-details">
+                                                            Video
+                                                        </div>
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit">
+                                                                    <a href="#" class="edit-button action-button">
+                                                                        <i class="icon-edit"></i>
+                                                                        <span class="action-button-text">Edit</span>
+                                                                    </a>
+                                                                </li>
+                                                                <li class="action-item action-duplicate">
+                                                                    <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                                                                        <i class="icon-copy"></i>
+                                                                        <span class="sr">Duplicate this component</span>
+                                                                    </a>
+                                                                </li>
+                                                                <li class="action-item action-delete">
+                                                                    <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                                                                        <i class="icon-trash"></i>
+                                                                        <span class="sr">Delete this component</span>
+                                                                    </a>
+                                                                </li>
+                                                            </ul>
+                                                        </div>
+                                                    </header>
+                                                    <article class="xblock-render">
+                                                        <section class="xblock xblock-student_view xmodule_display xmodule_VideoModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_72b5a0d74e8c4ed4a4d4e6bf67837c09/handler" data-type="Video" data-block-type="video">
+
+
+                                                            <h2>Video</h2>
+
+                                                            <div id="video_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" class="video closed is-initialized" data-streams="1.00:OEoXaMPEzfM" data-save-state-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_72b5a0d74e8c4ed4a4d4e6bf67837c09/handler/xmodule_handler/save_user_state" data-caption-data-dir="None" data-show-captions="true" data-general-speed="1.0" data-speed="null" data-start="0.0" data-end="0.0" data-caption-asset-path="/c4x/AndyA/ABT101/asset/subs_" data-autoplay="False" data-yt-test-timeout="1500" data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/" data-autohide-html5="False" tabindex="-1">
+                                                                <div class="focus_grabber first" tabindex="-1"></div>
+
+                                                                <div class="tc-wrapper">
+                                                                    <a href="#before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" class="nav-skip sr">Skip to a navigable version of this video transcript.</a>
+
+                                                                    <article class="video-wrapper">
+                                                                        <span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
+                                                                        <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
+                                                                        <div class="video-player-pre"></div>
+                                                                        <section class="video-player">
+                                                                            <iframe id="i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;html5=1&amp;origin=http%3A%2F%2Flocalhost%3A8001" style="height: 411.75px; width: 732px; top: -22.875px; left: 0px;"></iframe>
+                                                                            <h3 class="hidden">ERROR: No playable video sources found!</h3>
+                                                                        </section>
+                                                                        <div class="video-player-post"></div>
+                                                                        <section class="video-controls" style="">
+                                                                            <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Video position" aria-disabled="false" tabindex="-1" style=""><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Video position" aria-disabled="false" aria-valuetext="0 seconds" style="left: 0%;"></a></div>
+                                                                            <div>
+                                                                                <ul class="vcr">
+                                                                                    <li><a class="video_control play" href="#" title="Play" role="button" aria-disabled="false"></a></li>
+                                                                                    <li><div class="vidtime">0:00 / 1:56</div></li>
+                                                                                </ul>
+                                                                                <div class="secondary-controls"><div class="speeds">
+                                                                                    <a href="#" title="Speeds" role="button" aria-disabled="false">
+                                                                                        <h3>Speed</h3>
+                                                                                        <p class="active">1.0x</p>
+                                                                                    </a>
+                                                                                    <ol class="video_speeds"><li data-speed="2.0"><a class="speed_link" href="#">2.0x</a></li><li data-speed="1.50"><a class="speed_link" href="#">1.50x</a></li><li data-speed="1.0" class="active"><a class="speed_link" href="#">1.0x</a></li><li data-speed="0.50"><a class="speed_link" href="#">0.50x</a></li></ol>
+                                                                                </div><div class="volume">
+                                                                                    <a href="#" title="Volume" role="button" aria-disabled="false" aria-label="Volume"></a>
+                                                                                    <div class="volume-slider-container">
+                                                                                        <div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Volume" aria-disabled="false" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="Maximum" style="bottom: 100%;"></a></div>
+                                                                                    </div>
+                                                                                </div>
+
+
+                                                                                    <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill browser</a>
+                                                                                    <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false" style="display: inline;">HD off</a>
+
+                                                                                    <a href="#" class="hide-subtitles" title="Turn on captions" role="button" aria-disabled="false" style="display: none;">Turn on captions</a>
+                                                                                </div>
+                                                                            </div>
+                                                                        </section>
+                                                                        <a class="nav-skip sr" id="before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" href="#after-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09">Skip to end of transcript.</a>
+                                                                    </article>
+
+                                                                    <ol id="transcript-captions" class="subtitles" tabindex="0" title="Captions" role="group" aria-label="Activating an item in this group will spool the video to the corresponding time point. To skip transcript, go to previous item." style="max-height: 411px;">
+                                                                        <li style=""></li>
+                                                                    </ol>
+                                                                </div>
+
+                                                                <a class="nav-skip sr" id="after-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09" href="#before-transcript_i4x-AndyA-ABT101-video-72b5a0d74e8c4ed4a4d4e6bf67837c09">Go back to start of transcript.</a>
+
+                                                                <div class="focus_grabber last" tabindex="-1"></div>
+                                                                <ul class="wrapper-downloads">
+                                                                </ul>
+                                                            </div>
+
+                                                        </section>
+                                                    </article>
+                                                </section>
+                                            </li><li class="xblock-list-item">
+                                            <section class="wrapper-xblock xblock-type-container level-element">
+                                                <header class="xblock-header">
+                                                    <div class="header-details">
+                                                        Randomize Block
+                                                    </div>
+                                                    <div class="header-actions">
+                                                        <ul class="actions-list">
+                                                            <li class="action-item action-view">
+                                                                <a href="#" class="action-button">
+                                                                    <span class="action-button-text">View</span>
+                                                                    <i class="icon-arrow-right"></i>
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </header>
+                                                <article class="xblock-render">Shows Element - Example Randomize Block could be here.</article>
+                                            </section>
+                                        </li><li class="xblock-list-item">
+                                            <section class="wrapper-xblock level-element">
+                                                <header class="xblock-header">
+                                                    <div class="header-details">
+                                                        Element Level Header
+                                                    </div>
+                                                    <div class="header-actions">
+                                                        <ul class="actions-list">
+                                                            <li class="action-item action-edit">
+                                                                <a href="#" class="edit-button action-button">
+                                                                    <i class="icon-edit"></i>
+                                                                    <span class="action-button-text">Edit</span>
+                                                                </a>
+                                                            </li>
+                                                            <li class="action-item action-duplicate">
+                                                                <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                                                                    <i class="icon-copy"></i>
+                                                                    <span class="sr">Duplicate this component</span>
+                                                                </a>
+                                                            </li>
+                                                            <li class="action-item action-delete">
+                                                                <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                                                                    <i class="icon-trash"></i>
+                                                                    <span class="sr">Delete this component</span>
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </header>
+                                                <article class="xblock-render" style="height:200px;">Shows Element - Example HTML could be here.</article>
+                                            </section>
+                                        </li>
+                                        </ol>
+                                    </article>
+                                </section>
+                            </li>
+                            <li class="xblock-list-item xblock-list-item">
+                                <section class="wrapper-xblock level-nesting is-collapsible">
+                                    <header class="xblock-header">
+                                        <div class="header-details">
+                                            <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
+                                                <i class="icon-caret-down ui-toggle-expansion"></i>
+                                                <span class="sr">Expand or Collapse</span>
+                                            </a>
+                                            <span>Condition 2</span>
+                                        </div>
+                                        <div class="header-actions">
+                                            <ul class="actions-list">
+                                                <li class="sr action-item">No Actions</li>
+                                            </ul>
+                                        </div>
+                                    </header>
+                                    <article class="xblock-render">
+                                        <ol class="xblock-list">
+                                            <li class="xblock-list-item">
+                                                <section class="wrapper-xblock level-element">
+                                                    <header class="xblock-header">
+                                                        <div class="header-details">
+                                                            Video
+                                                        </div>
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit">
+                                                                    <a href="#" class="edit-button action-button">
+                                                                        <i class="icon-edit"></i>
+                                                                        <span class="action-button-text">Edit</span>
+                                                                    </a>
+                                                                </li>
+                                                                <li class="action-item action-duplicate">
+                                                                    <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                                                                        <i class="icon-copy"></i>
+                                                                        <span class="sr">Duplicate this component</span>
+                                                                    </a>
+                                                                </li>
+                                                                <li class="action-item action-delete">
+                                                                    <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                                                                        <i class="icon-trash"></i>
+                                                                        <span class="sr">Delete this component</span>
+                                                                    </a>
+                                                                </li>
+                                                                <ul>
+                                                                </ul></ul></div>
+                                                    </header>
+                                                    <article class="xblock-render" >Shows Element - Example Video could be here. </article>
+                                                </section>
+                                            </li><li class="xblock-list-item">
+                                            <section class="wrapper-xblock level-element">
+                                                <header class="xblock-header">
+                                                    <div class="header-details">
+                                                        Common Problem
+                                                    </div>
+                                                    <div class="header-actions">
+                                                        <ul class="actions-list">
+                                                            <li class="action-item action-edit">
+                                                                <a href="#" class="edit-button action-button">
+                                                                    <i class="icon-edit"></i>
+                                                                    <span class="action-button-text">Edit</span>
+                                                                </a>
+                                                            </li>
+                                                            <li class="action-item action-duplicate">
+                                                                <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                                                                    <i class="icon-copy"></i>
+                                                                    <span class="sr">Duplicate this component</span>
+                                                                </a>
+                                                            </li>
+                                                            <li class="action-item action-delete">
+                                                                <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                                                                    <i class="icon-trash"></i>
+                                                                    <span class="sr">Delete this component</span>
+                                                                </a>
+                                                            </li>
+                                                            <ul>
+                                                            </ul></ul></div>
+                                                </header>
+                                                <article class="xblock-render">
+                                                    <section class="xblock xblock-student_view xmodule_display xmodule_CapaModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler" data-type="Problem" data-block-type="problem">
+                                                        <section id="problem_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb" class="problems-wrapper" data-problem-id="i4x://AndyA/ABT101/problem/46d2b65d793549e2876729d55df9a2cb" data-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler/xmodule_handler" data-progress_status="none" data-progress_detail="0/1">
+
+
+                                                            <h2 class="problem-header">
+                                                                Multiple Choice
+                                                            </h2>
+
+                                                            <section class="problem-progress">(1 point possible)</section>
+
+                                                            <section class="problem">
+                                                                <div>
+                                                                    <p>
+                                                                        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.</p>
+                                                                    <p> 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.
+                                                                    </p>
+                                                                    <p>What Apple device competed with the portable CD player?</p>
+                              <span><form class="choicegroup capa_inputtype" id="inputtype_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1">
+                                  <div class="indicator_container">
+                                      <span class="unanswered" style="display:inline-block;" id="status_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1"></span>
+                                  </div>
+
+                                  <fieldset>
+
+                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipad">
+                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipad" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_ipad"> The iPad
+
+                                      </label>
+                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_beatles">
+                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_beatles" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_beatles"> Napster
+
+                                      </label>
+                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipod">
+                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_ipod" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_ipod"> The iPod
+
+                                      </label>
+                                      <label for="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_peeler">
+                                          <input type="radio" name="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" id="input_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1_choice_peeler" aria-describedby="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1" value="choice_peeler"> The vegetable peeler
+
+                                      </label>
+                                      <span id="answer_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_2_1"></span>
+                                  </fieldset>
+
+                              </form></span>
+                                                                    <section class="solution-span">
+                                                                        <span id="solution_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb_solution_1"></span>
+                                                                    </section></div>
+
+                                                                <section class="action">
+                                                                    <input type="hidden" name="problem_id" value="Multiple Choice">
+
+                                                                    <input class="check Check" type="button" value="Check">
+                                                                </section>
+                                                            </section>
+                                                        </section>
+
+                                                    </section>
+                                                </article>
+                                            </section>
+                                        </li><li class="xblock-list-item">
+                                            <section class="wrapper-xblock level-element">
+                                                <header class="xblock-header">
+                                                    <div class="header-details">
+                                                        HTML
+                                                    </div>
+                                                    <div class="header-actions">
+                                                        <ul class="actions-list">
+                                                            <li class="action-item action-edit">
+                                                                <a href="#" class="edit-button action-button">
+                                                                    <i class="icon-edit"></i>
+                                                                    <span class="action-button-text">Edit</span>
+                                                                </a>
+                                                            </li>
+                                                            <li class="action-item action-duplicate">
+                                                                <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                                                                    <i class="icon-copy"></i>
+                                                                    <span class="sr">Duplicate this component</span>
+                                                                </a>
+                                                            </li>
+                                                            <li class="action-item action-delete">
+                                                                <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                                                                    <i class="icon-trash"></i>
+                                                                    <span class="sr">Delete this component</span>
+                                                                </a>
+                                                            </li>
+                                                            <ul>
+                                                            </ul></ul></div>
+                                                </header>
+                                                <article class="xblock-render">
+                                                    <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_html;_c8fb4780eb554aec95c6231680eb82cf/handler" data-type="HTMLModule" data-block-type="html">
+                                                        <ol>
+                                                            <li>
+                                                                <h2> September 21 </h2>
+                                                                <section class="update-description">
+                                                                    <section class="primary">
+                                                                        <p> Words of encouragement! This is a short note that most students will read. </p>
+                                                                        <p class="author">Anant  Agarwal (6.002x Principal Instructor)</p>
+                                                                    </section>
+                                                                    <p></p><h3>Primary versus Secondary Updates:</h3> Unfortunately, the internet throws a lot of text at students, and they
+                                                                    do not read everything that they are given. However, many students <em>do</em> 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.<p></p>
+                                                                    <p></p><h3>Star Forum Poster</h3>
+                                                                    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.
+                                                                    <p></p>
+                                                                </section>
+                                                            </li>
+                                                        </ol>
+
+                                                    </section>
+                                                </article>
+                                            </section>
+                                        </li>
+                                        </ol>
+                                    </article>
+                                </section>
+                            </li>
+                        </ol>
+                </article>
+                </section>
+            </article>
+            <aside class="content-supplementary" role="complimentary">
+                <div class="bit">
+                    <h3 class="title-3">Container Reference Page</h3>
+                    <ul class="list-details">
+                        <li class="item-detail">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.</li>
+                    </ul>
+                </div>
+            </aside>
+        </section>
+    </div>
+</div>
+
+
+</div>
+</%block>

cms/templates/ux/reference/index.html

+<%inherit file="../../base.html" />
+<%block name="title">UX Style Reference</%block>
+<%block name="bodyclass">is-signedin course uploads view-container</%block>
+
+<%block name="content">
+<div class="main-wrapper">
+    <div class="inner-wrapper">
+        <div class="main-column">
+            <article class="window unit-body">
+                <h1>UX Style Reference</h1>
+
+                <ol class="components">
+                    <li class="component">
+                        <div class="wrapper wrapper-component-action-header">
+                            <h2>Page Types</h2>
+                        </div>
+                        <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
+                            <ul>
+                                <li><a href="container.html">Container page</a></li>
+                                <li><a href="unit.html">Unit page</a></li>
+                            </ul>
+                        </section>
+                    </li>
+                </ol>
+            </article>
+        </div>
+    </div>
+</div>
+</%block>

cms/templates/ux/reference/unit.html

+<%inherit file="../../base.html" />
+<%!
+from django.core.urlresolvers import reverse
+from django.utils.translation import ugettext as _
+%>
+<%namespace name="units" file="../../widgets/units.html" />
+<%block name="title">${_("Individual Unit")}</%block>
+<%block name="bodyclass">is-signedin course unit view-unit</%block>
+
+<%block name="content">
+<div class="main-wrapper edit-state-private" data-locator="andya.AA101.2014_T1/branch/draft/block/vertical68b">
+<div class="inner-wrapper">
+<div class="alert editing-draft-alert">
+    <p class="alert-message"><strong>You are editing a draft.</strong>
+    </p>
+    <a href="//courses.edx.org/courses/andya/AA101/2014_T1/jump_to/i4x://andya/AA101/vertical/68bbc21110f2474f9b17ad3ede9aea60" target="_blank" class="alert-action secondary">View the Live Version</a>
+</div>
+<div class="main-column">
+<article class="unit-body window">
+<p class="unit-name-input">
+    <label for="unit-display-name-input">Display Name:</label>
+    <input type="text" value="New Unit" id="unit-display-name-input" class="unit-display-name-input">
+</p>
+<ol class="components ui-sortable">
+    <li class="component" data-locator="andya.AA101.2014_T1/branch/draft/block/htmlc8f">
+        <div class="wrapper wrapper-component-editor">
+            <div class="component-editor">
+                <div class="component-edit-header">
+                    <span class="component-name"></span>
+                    <ul class="nav-edit-modes">
+                        <li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" role="tab">
+                            <a href="#">Editor</a>
+                        </li>
+                        <li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" role="tab">
+                            <a href="#">Settings</a>
+                        </li>
+                    </ul>
+                </div> <!-- Editor Header -->
+
+                <div class="component-edit-modes">
+                    <div class="module-editor">
+                        <section class="xblock xblock-studio_view xmodule_edit xmodule_HtmlDescriptor" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_html;_c8fb4780eb554aec95c6231680eb82cf/handler" data-type="HTMLEditingDescriptor" data-block-type="html">
+                            <div class="wrapper-comp-editor" id="editor-tab" data-base-asset-url="/c4x/andya/AA101/asset/">
+                                <section class="html-editor editor">
+                                    <ul class="editor-tabs">
+                                        <li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
+                                        <li><a href="#" class="html-tab tab" data-tab="advanced">HTML</a></li>
+                                    </ul>
+
+                                    <div class="row">
+                                        <textarea class="tiny-mce">&lt;ol&gt;
+                                            &lt;li&gt;
+                                            &lt;h2&gt; September 21 &lt;/h2&gt;
+                                            &lt;section class='update-description'&gt;
+                                            &lt;section class='primary'&gt;
+                                            &lt;p&gt; Words of encouragement! This is a short note that most students will read. &lt;/p&gt;
+                                            &lt;p class='author'&gt;Anant  Agarwal (6.002x Principal Instructor)&lt;/p&gt;
+                                            &lt;/section&gt;
+                                            &lt;p&gt;&lt;h3&gt;Primary versus Secondary Updates:&lt;/h3&gt; Unfortunately, the internet throws a lot of text at students, and they
+                                            do not read everything that they are given. However, many students &lt;em&gt;do&lt;/em&gt; 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.&lt;/p&gt;
+                                            &lt;p&gt;&lt;h3&gt;Star Forum Poster&lt;/h3&gt;
+                                            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.
+                                            &lt;/p&gt;
+                                            &lt;/section&gt;
+                                            &lt;/li&gt;
+                                            &lt;/ol&gt;
+                                        </textarea>
+                                        <textarea name="" class="edit-box">&lt;ol&gt;
+                                            &lt;li&gt;
+                                            &lt;h2&gt; September 21 &lt;/h2&gt;
+                                            &lt;section class='update-description'&gt;
+                                            &lt;section class='primary'&gt;
+                                            &lt;p&gt; Words of encouragement! This is a short note that most students will read. &lt;/p&gt;
+                                            &lt;p class='author'&gt;Anant  Agarwal (6.002x Principal Instructor)&lt;/p&gt;
+                                            &lt;/section&gt;
+                                            &lt;p&gt;&lt;h3&gt;Primary versus Secondary Updates:&lt;/h3&gt; Unfortunately, the internet throws a lot of text at students, and they
+                                            do not read everything that they are given. However, many students &lt;em&gt;do&lt;/em&gt; 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.&lt;/p&gt;
+                                            &lt;p&gt;&lt;h3&gt;Star Forum Poster&lt;/h3&gt;
+                                            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.
+                                            &lt;/p&gt;
+                                            &lt;/section&gt;
+                                            &lt;/li&gt;
+                                            &lt;/ol&gt;
+                                        </textarea>
+                                    </div>
+                                </section>
+                            </div>
+                            <div class="wrapper-comp-settings metadata_edit" id="settings-tab" data-metadata="{&quot;display_name&quot;: {&quot;default_value&quot;: &quot;Text&quot;, &quot;explicitly_set&quot;: true, &quot;display_name&quot;: &quot;Display Name&quot;, &quot;help&quot;: &quot;This name appears in the horizontal navigation at the top of the page.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;Announcement&quot;, &quot;field_name&quot;: &quot;display_name&quot;, &quot;options&quot;: []}}">
+                            </div>
+                        </section>
+                    </div>
+                </div>
+                <div class="row module-actions">
+                    <a href="#" class="save-button action-primary action">Save</a>
+                    <a href="#" class="cancel-button action-secondary action">Cancel</a>
+                </div> <!-- Module Actions-->
+            </div>
+        </div>
+        <div class="wrapper wrapper-component-action-header">
+            <div class="component-header">
+                Announcement
+            </div>
+            <ul class="component-actions">
+                <li class="action-item action-edit">
+                    <a href="#" class="edit-button action-button">
+                        <i class="icon-edit"></i>
+                        <span class="action-button-text">Edit</span>
+                    </a>
+                </li>
+                <li class="action-item action-duplicate">
+                    <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                        <i class="icon-copy"></i>
+                        <span class="sr">Duplicate this component</span>
+                    </a>
+                </li>
+                <li class="action-item action-delete">
+                    <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                        <i class="icon-trash"></i>
+                        <span class="sr">Delete this component</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <span data-tooltip="Drag to reorder" class="drag-handle"></span>
+        <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_html;_c8fb4780eb554aec95c6231680eb82cf/handler" data-type="HTMLModule" data-block-type="html">
+            <ol>
+                <li>
+                    <h2> September 21 </h2>
+                    <section class="update-description">
+                        <section class="primary">
+                            <p> Words of encouragement! This is a short note that most students will read. </p>
+                            <p class="author">Anant  Agarwal (6.002x Principal Instructor)</p>
+                        </section>
+                        <p></p><h3>Primary versus Secondary Updates:</h3> Unfortunately, the internet throws a lot of text at students, and they
+                        do not read everything that they are given. However, many students <em>do</em> 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.<p></p>
+                        <p></p><h3>Star Forum Poster</h3>
+                        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.
+                        <p></p>
+                    </section>
+                </li>
+            </ol>
+        </section>
+        </li>
+        <li class="component" data-locator="andya.AA101.2014_T1/branch/draft/block/videoda3">
+
+
+        <div class="wrapper wrapper-component-editor">
+        <div class="component-editor">
+        <div class="component-edit-header">
+            <span class="component-name"></span>
+            <ul class="nav-edit-modes">
+                <li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" role="tab">
+                    <a href="#">Editor</a>
+                </li>
+                <li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" role="tab">
+                    <a href="#">Settings</a>
+                </li>
+            </ul>
+        </div> <!-- Editor Header -->
+
+        <div class="component-edit-modes">
+        <div class="module-editor">
+        <section class="xblock xblock-studio_view xmodule_edit xmodule_VideoDescriptor" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_video;_da30d8c1da6d43268152e19089ecc2fa/handler" data-type="TabsEditingDescriptor" data-block-type="video">
+
+        <div class="wrapper-comp-editor" id="editor-tab-i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa" data-html_id="i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa">
+        <section class="editor-with-tabs">
+        <div class="edit-header">
+            <span class="component-name"></span>
+            <ul class="editor-tabs">
+                <li class="inner_tab_wrap"><a href="#tab-i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa-0" class="tab current">Basic</a></li>
+                <li class="inner_tab_wrap"><a href="#tab-i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa-1" class="tab ">Advanced</a></li>
+            </ul>
+        </div>
+        <div class="tabs-wrapper">
+        <div class="component-tab " id="tab-i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa-0">
+
+        <div class="wrapper-comp-settings basic_metadata_edit" data-metadata="{&quot;display_name&quot;: {&quot;default_value&quot;: &quot;Video&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Display Name&quot;, &quot;help&quot;: &quot;Display name for this module.&quot;, &quot;field_name&quot;: &quot;display_name&quot;, &quot;value&quot;: &quot;Video&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;options&quot;: []}, &quot;video_url&quot;: {&quot;default_value&quot;: [&quot;http://youtu.be/OEoXaMPEzfM&quot;], &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Video URL&quot;, &quot;help&quot;: &quot;A YouTube URL or a link to a file hosted anywhere on the web.&quot;, &quot;field_name&quot;: &quot;video_url&quot;, &quot;value&quot;: [&quot;http://youtu.be/OEoXaMPEzfM&quot;], &quot;type&quot;: &quot;VideoList&quot;, &quot;options&quot;: []}}">
+            <ul class="list-input settings-list">
+
+                <li class="field comp-setting-entry metadata_entry">
+                    <div class="wrapper-comp-setting">
+                        <label class="label setting-label" for="metadata-string-entry_28">Display Name</label>
+                        <input class="input setting-input" type="text" id="metadata-string-entry_28" value="Video">
+                        <button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
+                            <i class="icon-undo"></i><span class="sr">"Clear Value"</span>
+                        </button>
+                    </div>
+                    <span class="tip setting-help">Display name for this module.</span>
+
+                </li>
+
+                <li class="field comp-setting-entry metadata_entry">
+                    <div class="wrapper-comp-setting metadata-videolist-enum">
+                        <label class="label setting-label" for="metadata-videolist-entry_33">Video URL</label>
+                        <div class="wrapper-videolist-settings">
+                            <div class="wrapper-videolist-url videolist-settings-item"><input type="text" id="metadata-videolist-entry_33" class="input videolist-url" value="http://youtu.be/OEoXaMPEzfM" placeholder="http://youtube.com/"></div>
+                            <div class="tip videolist-url-tip setting-help">A YouTube URL or a link to a file hosted anywhere on the web.</div>
+                            <div class="wrapper-videolist-urls">
+                                <a href="#" class="collapse-action collapse-setting">
+                                    <i class="icon-plus"></i>Add more video sources <span class="sr">Video URL</span>
+                                </a>
+                                <div class="videolist-extra-videos">
+                                    <span class="tip videolist-extra-videos-tip setting-help">To be sure all students can view the video, we recommend providing alternate versions of the same video: mp4, webm and youtube (if available).</span>
+                                    <ol class="videolist-settings">
+                                        <li class="videolist-settings-item">
+                                            <input type="text" class="input" value="" placeholder="http://somesite.com/video.mp4">
+                                        </li>
+                                        <li class="videolist-settings-item">
+                                            <input type="text" class="input" value="" placeholder=".webm">
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="transcripts-status">
+                        <label class="label setting-label transcripts-label">Timed Transcript</label>
+                        <div class="wrapper-transcripts-message">
+                            <div class="transcripts-message-status status-error"><i class="icon-remove"></i>No Timed Transcript</div>
+                            <p class="transcripts-message">
+                                We dont have a timed transcript for this video on edX, but we found a transcript for this video on YouTube. Would you like to import it to edX?
+                            </p>
+                            <div class="transcripts-file-uploader">
+                                <div class="progress-bar is-invisible">
+                                    <div class="progress-fill"></div>
+                                </div>
+                                <form class="file-chooser" action="/transcripts/upload" method="post" enctype="multipart/form-data">
+                                    <input type="file" class="file-input" name="file" accept=".srt">
+                                    <input type="hidden" name="locator" value="andya.AA101.2014_T1/branch/draft/block/videoda3">
+                                    <input type="hidden" name="video_list" value="[{&quot;mode&quot;:&quot;youtube&quot;,&quot;video&quot;:&quot;OEoXaMPEzfM&quot;,&quot;type&quot;:&quot;youtube&quot;}]">
+                                </form>
+
+                            </div>
+                            <p class="transcripts-error-message is-invisible">
+                                Error.
+                            </p>
+                            <div class="wrapper-transcripts-buttons">
+                                <button class="action setting-upload" type="button" name="setting-upload" value="Upload New Timed Transcript" data-tooltip="Upload New Timed Transcript">
+                                    <span>Upload New Timed Transcript</span>
+                                </button>
+                                <button class="action setting-import" type="button" name="setting-import" value="Import from YouTube" data-tooltip="Import from YouTube">
+                                    <span>Import from YouTube</span>
+                                </button>
+                            </div>
+
+                        </div>
+                    </div>
+
+                </li>
+            </ul>
+        </div>
+    </div>
+<div class="component-tab is-inactive" id="tab-i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa-1">
+
+
+
+    <div class="wrapper-comp-settings metadata_edit" id="settings-tab" data-metadata="{&quot;youtube_id_1_25&quot;: {&quot;default_value&quot;: &quot;&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Youtube ID for 1.25x speed&quot;, &quot;help&quot;: &quot;Optional, for older browsers: the Youtube ID for the 1.25x speed video.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;&quot;, &quot;field_name&quot;: &quot;youtube_id_1_25&quot;, &quot;options&quot;: []}, &quot;download_video&quot;: {&quot;default_value&quot;: false, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Video Download Allowed&quot;, &quot;help&quot;: &quot;Show a link beneath the video to allow students to download the video. Note: You must add at least one video source below.&quot;, &quot;type&quot;: &quot;Select&quot;, &quot;value&quot;: false, &quot;field_name&quot;: &quot;download_video&quot;, &quot;options&quot;: [{&quot;display_name&quot;: &quot;True&quot;, &quot;value&quot;: true}, {&quot;display_name&quot;: &quot;False&quot;, &quot;value&quot;: false}]}, &quot;display_name&quot;: {&quot;default_value&quot;: &quot;Video&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Display Name&quot;, &quot;help&quot;: &quot;Display name for this module.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;Video&quot;, &quot;field_name&quot;: &quot;display_name&quot;, &quot;options&quot;: []}, &quot;sub&quot;: {&quot;default_value&quot;: &quot;&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;HTML5 Transcript&quot;, &quot;help&quot;: &quot;The name of the timed transcript track (for non-Youtube videos).&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;&quot;, &quot;field_name&quot;: &quot;sub&quot;, &quot;options&quot;: []}, &quot;start_time&quot;: {&quot;default_value&quot;: &quot;00:00:00&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Start Time&quot;, &quot;help&quot;: &quot;Start time for the video (HH:MM:SS). Max value is 23:59:59.&quot;, &quot;type&quot;: &quot;RelativeTime&quot;, &quot;value&quot;: &quot;00:00:00&quot;, &quot;field_name&quot;: &quot;start_time&quot;, &quot;options&quot;: []}, &quot;youtube_id_1_0&quot;: {&quot;default_value&quot;: &quot;OEoXaMPEzfM&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Youtube ID&quot;, &quot;help&quot;: &quot;This is the Youtube ID reference for the normal speed video.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;OEoXaMPEzfM&quot;, &quot;field_name&quot;: &quot;youtube_id_1_0&quot;, &quot;options&quot;: []}, &quot;html5_sources&quot;: {&quot;default_value&quot;: [], &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Video Sources&quot;, &quot;help&quot;: &quot;A list of filenames to be used with HTML5 video. The first supported filetype will be displayed.&quot;, &quot;type&quot;: &quot;List&quot;, &quot;value&quot;: [], &quot;field_name&quot;: &quot;html5_sources&quot;, &quot;options&quot;: []}, &quot;show_captions&quot;: {&quot;default_value&quot;: true, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Show Transcript&quot;, &quot;help&quot;: &quot;This controls whether or not captions are shown by default.&quot;, &quot;type&quot;: &quot;Select&quot;, &quot;value&quot;: true, &quot;field_name&quot;: &quot;show_captions&quot;, &quot;options&quot;: [{&quot;display_name&quot;: &quot;True&quot;, &quot;value&quot;: true}, {&quot;display_name&quot;: &quot;False&quot;, &quot;value&quot;: false}]}, &quot;download_track&quot;: {&quot;default_value&quot;: false, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Transcript Download Allowed&quot;, &quot;help&quot;: &quot;Show a link beneath the video to allow students to download the transcript. Note: You must add a link to the HTML5 Transcript field above.&quot;, &quot;type&quot;: &quot;Select&quot;, &quot;value&quot;: false, &quot;field_name&quot;: &quot;download_track&quot;, &quot;options&quot;: [{&quot;display_name&quot;: &quot;True&quot;, &quot;value&quot;: true}, {&quot;display_name&quot;: &quot;False&quot;, &quot;value&quot;: false}]}, &quot;youtube_id_1_5&quot;: {&quot;default_value&quot;: &quot;&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Youtube ID for 1.5x speed&quot;, &quot;help&quot;: &quot;Optional, for older browsers: the Youtube ID for the 1.5x speed video.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;&quot;, &quot;field_name&quot;: &quot;youtube_id_1_5&quot;, &quot;options&quot;: []}, &quot;youtube_id_0_75&quot;: {&quot;default_value&quot;: &quot;&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Youtube ID for .75x speed&quot;, &quot;help&quot;: &quot;Optional, for older browsers: the Youtube ID for the .75x speed video.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;&quot;, &quot;field_name&quot;: &quot;youtube_id_0_75&quot;, &quot;options&quot;: []}, &quot;end_time&quot;: {&quot;default_value&quot;: &quot;00:00:00&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;End Time&quot;, &quot;help&quot;: &quot;End time for the video (HH:MM:SS). Max value is 23:59:59.&quot;, &quot;type&quot;: &quot;RelativeTime&quot;, &quot;value&quot;: &quot;00:00:00&quot;, &quot;field_name&quot;: &quot;end_time&quot;, &quot;options&quot;: []}}"></div>
+
+
+            </div>
+        </div>
+    </section>
+</div>
+
+
+        </section>
+    </div>
+</div>
+<div class="row module-actions">
+    <a href="#" class="save-button action-primary action">Save</a>
+    <a href="#" class="cancel-button action-secondary action">Cancel</a>
+</div> <!-- Module Actions-->
+</div>
+</div>
+<div class="wrapper wrapper-component-action-header">
+    <div class="component-header">
+        Video
+    </div>
+    <ul class="component-actions">
+        <li class="action-item action-edit">
+            <a href="#" class="edit-button action-button">
+                <i class="icon-edit"></i>
+                <span class="action-button-text">Edit</span>
+            </a>
+        </li>
+        <li class="action-item action-duplicate">
+            <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                <i class="icon-copy"></i>
+                <span class="sr">Duplicate this component</span>
+            </a>
+        </li>
+        <li class="action-item action-delete">
+            <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                <i class="icon-trash"></i>
+                <span class="sr">Delete this component</span>
+            </a>
+        </li>
+    </ul>
+</div>
+<span data-tooltip="Drag to reorder" class="drag-handle"></span>
+<section class="xblock xblock-student_view xmodule_display xmodule_VideoModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_video;_da30d8c1da6d43268152e19089ecc2fa/handler" data-type="Video" data-block-type="video">
+
+
+    <h2>Video</h2>
+
+    <div id="video_i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa" class="video closed is-initialized" data-streams="1.00:OEoXaMPEzfM" data-save-state-url="/preview/xblock/i4x:;_;_andya;_AA101;_video;_da30d8c1da6d43268152e19089ecc2fa/handler/xmodule_handler/save_user_state" data-caption-data-dir="None" data-show-captions="true" data-general-speed="1.0" data-speed="null" data-start="0.0" data-end="0.0" data-caption-asset-path="/c4x/andya/AA101/asset/subs_" data-autoplay="False" data-yt-test-timeout="1500" data-yt-test-url="https://gdata.youtube.com/feeds/api/videos/" data-autohide-html5="False" tabindex="-1">
+        <div class="focus_grabber first" tabindex="-1"></div>
+
+        <div class="tc-wrapper">
+            <a href="#before-transcript_i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa" class="nav-skip sr">Skip to a navigable version of this video's transcript.</a>
+
+            <article class="video-wrapper">
+                <span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
+                <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
+                <div class="video-player-pre"></div>
+                <section class="video-player">
+                    <iframe id="i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;html5=1&amp;origin=https%3A%2F%2Fstudio.edx.org" style="height: 434.25px; width: 772px; top: 2.875px; left: 0px;"></iframe>
+                    <h3 class="hidden">ERROR: No playable video sources found!</h3>
+                </section>
+                <div class="video-player-post"></div>
+                <section class="video-controls" style="">
+                    <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Video position" aria-disabled="false" tabindex="-1" style=""><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Video position" aria-disabled="false" aria-valuetext="0 seconds" style="left: 0%;"></a></div>
+                    <div>
+                        <ul class="vcr">
+                            <li><a class="video_control play" href="#" title="Play" role="button" aria-disabled="false"></a></li>
+                            <li><div class="vidtime">0:00 / 1:56</div></li>
+                        </ul>
+                        <div class="secondary-controls"><div class="speeds">
+                            <a href="#" title="Speeds" role="button" aria-disabled="false">
+                                <h3>Speed</h3>
+                                <p class="active">1.0x</p>
+                            </a>
+                            <ol class="video_speeds"><li data-speed="2.0"><a class="speed_link" href="#">2.0x</a></li><li data-speed="1.50"><a class="speed_link" href="#">1.50x</a></li><li data-speed="1.0" class="active"><a class="speed_link" href="#">1.0x</a></li><li data-speed="0.50"><a class="speed_link" href="#">0.50x</a></li></ol>
+                        </div><div class="volume">
+                            <a href="#" title="Volume" role="button" aria-disabled="false" aria-label="Volume"></a>
+                            <div class="volume-slider-container">
+                                <div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Volume" aria-disabled="false" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="Maximum" style="bottom: 100%;"></a></div>
+                            </div>
+                        </div>
+
+
+                            <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill browser</a>
+                            <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false" style="display: inline;">HD off</a>
+
+                            <a href="#" class="hide-subtitles" title="Turn on captions" role="button" aria-disabled="false" style="display: none;">Turn on captions</a>
+                        </div>
+                    </div>
+                </section>
+                <a class="nav-skip sr" id="before-transcript_i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa" href="#after-transcript_i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa">Skip to end of transcript.</a>
+            </article>
+
+            <ol id="transcript-captions" class="subtitles" tabindex="0" title="Captions" role="group" aria-label="Activating an item in this group will spool the video to the corresponding time point. To skip transcript, go to previous item." style="max-height: 434px;">
+                <li style=""></li>
+            </ol>
+        </div>
+
+        <a class="nav-skip sr" id="after-transcript_i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa" href="#before-transcript_i4x-andya-AA101-video-da30d8c1da6d43268152e19089ecc2fa">Go back to start of transcript.</a>
+
+        <div class="focus_grabber last" tabindex="-1"></div>
+        <ul class="wrapper-downloads">
+        </ul>
+    </div>
+
+</section>
+
+
+</li>
+<li class="xblock-list-item">
+    <section class="wrapper-xblock level-element xblock-type-container">
+        <header class="xblock-header">
+            <div class="header-details">
+                Randomize Block
+            </div>
+            <div class="header-actions">
+                <ul class="actions-list">
+                    <li class="action-item action-view">
+                        <a href="container.html" class="action-button">
+                            <span class="action-button-text">View</span>
+                            <i class="icon-arrow-right"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </header>
+        <article class="xblock-render">Shows Element - Example Randomize Block could be here.</article>
+    </section>
+</li>
+<li class="component" data-locator="andya.AA101.2014_T1/branch/draft/block/problem2fa">
+<div class="wrapper wrapper-component-editor">
+<div class="component-editor">
+<div class="component-edit-header">
+    <span class="component-name"></span>
+    <ul class="nav-edit-modes">
+        <li id="editor-mode" class="mode active-mode" aria-controls="editor-tab" role="tab">
+            <a href="#">Editor</a>
+        </li>
+        <li id="settings-mode" class="mode active-mode" aria-controls="settings-tab" role="tab">
+            <a href="#">Settings</a>
+        </li>
+    </ul>
+</div> <!-- Editor Header -->
+
+<div class="component-edit-modes">
+    <div class="module-editor">
+        <section class="xblock xblock-studio_view xmodule_edit xmodule_CapaDescriptor" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_problem;_2fa3ab8048514b73b36e8807a42b3525/handler" data-type="MarkdownEditingDescriptor" data-block-type="problem">
+
+
+
+            <div class="wrapper-comp-editor" id="editor-tab">
+                <section class="problem-editor editor">
+                    <div class="row">
+                        <div class="editor-bar">
+                            <ul class="format-buttons">
+                                <li><a href="#" class="header-button" data-tooltip="Heading 1"><span class="problem-editor-icon heading1"></span></a></li>
+                                <li><a href="#" class="multiple-choice-button" data-tooltip="Multiple Choice"><span class="problem-editor-icon multiple-choice"></span></a></li>
+                                <li><a href="#" class="checks-button" data-tooltip="Checkboxes"><span class="problem-editor-icon checks"></span></a></li>
+                                <li><a href="#" class="string-button" data-tooltip="Text Input"><span class="problem-editor-icon string"></span></a></li>
+                                <li><a href="#" class="number-button" data-tooltip="Numerical Input"><span class="problem-editor-icon number"></span></a></li>
+                                <li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
+                                <li><a href="#" class="explanation-button" data-tooltip="Explanation"><span class="problem-editor-icon explanation"></span></a></li>
+                            </ul>
+                            <ul class="editor-tabs">
+                                <li><a href="#" class="xml-tab advanced-toggle" data-tab="xml">Advanced Editor</a></li>
+                                <li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
+                            </ul>
+                        </div>
+                        <textarea class="markdown-box"></textarea>
+                        <textarea class="xml-box" rows="8" cols="40">&lt;problem&gt;&lt;/problem&gt;</textarea>
+                    </div>
+                </section>
+
+                <script type="text/template" id="simple-editor-cheatsheet">
+                    <article class="simple-editor-cheatsheet">
+                        <div class="cheatsheet-wrapper">
+                            <div class="row">
+                                <h6>Heading 1</h6>
+                                <div class="col sample heading-1">
+                                    <img src="/static/a0efe6e/img/header-example.e174a18baef2.png" />
+                                </div>
+                                <div class="col">
+<pre><code>H1
+    =====
+</pre>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <h6>Multiple Choice</h6>
+                                <div class="col sample multiple-choice">
+                                    <img src="/static/a0efe6e/img/choice-example.c9baf5bb43c8.png" />
+                                </div>
+                                <div class="col">
+<pre><code>( ) red
+    ( ) green
+    (x) blue</code></pre>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <h6>Checkboxes</h6>
+                                <div class="col sample check-multiple">
+                                    <img src="/static/a0efe6e/img/multi-example.19d6b4760d59.png" />
+                                </div>
+                                <div class="col">
+<pre><code>[x] earth
+    [ ] wind
+    [x] water</code></pre>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <h6>Text Input</h6>
+                                <div class="col sample string-response">
+                                    <img src="/static/a0efe6e/img/string-example.3515ad7cd1aa.png" />
+                                </div>
+                                <div class="col">
+                    <pre><code>= dog
+                        or= cat
+                        or= mouse</code></pre>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <h6>Numerical Input</h6>
+                                <div class="col sample numerical-response">
+                                    <img src="/static/a0efe6e/img/number-example.7809d7d48790.png" />
+                                </div>
+                                <div class="col">
+                                    <pre><code>= 3.14 +- 2%</code></pre>
+                                    <pre><code>= [3.14, 3.15)</code></pre>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <h6>Dropdown</h6>
+                                <div class="col sample option-reponse">
+                                    <img src="/static/a0efe6e/img/select-example.d829349cdb8f.png" />
+                                </div>
+                                <div class="col">
+                                    <pre><code>[[wrong, (right)]]</code></pre>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <h6>Explanation</h6>
+                                <div class="col sample explanation">
+                                    <img src="/static/a0efe6e/img/explanation-example.91c7eb9dfd65.png" />
+                                </div>
+                                <div class="col">
+                                    <pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                </script>
+            </div>
+
+
+
+
+
+            <div class="wrapper-comp-settings metadata_edit" id="settings-tab" data-metadata="{&quot;showanswer&quot;: {&quot;default_value&quot;: &quot;finished&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Show Answer&quot;, &quot;help&quot;: &quot;Defines when to show the answer to the problem. A default value can be set in Advanced Settings.&quot;, &quot;type&quot;: &quot;Select&quot;, &quot;value&quot;: &quot;finished&quot;, &quot;field_name&quot;: &quot;showanswer&quot;, &quot;options&quot;: [{&quot;display_name&quot;: &quot;Always&quot;, &quot;value&quot;: &quot;always&quot;}, {&quot;display_name&quot;: &quot;Answered&quot;, &quot;value&quot;: &quot;answered&quot;}, {&quot;display_name&quot;: &quot;Attempted&quot;, &quot;value&quot;: &quot;attempted&quot;}, {&quot;display_name&quot;: &quot;Closed&quot;, &quot;value&quot;: &quot;closed&quot;}, {&quot;display_name&quot;: &quot;Finished&quot;, &quot;value&quot;: &quot;finished&quot;}, {&quot;display_name&quot;: &quot;Past Due&quot;, &quot;value&quot;: &quot;past_due&quot;}, {&quot;display_name&quot;: &quot;Never&quot;, &quot;value&quot;: &quot;never&quot;}]}, &quot;display_name&quot;: {&quot;default_value&quot;: &quot;Blank Advanced Problem&quot;, &quot;explicitly_set&quot;: true, &quot;display_name&quot;: &quot;Display Name&quot;, &quot;help&quot;: &quot;This name appears in the horizontal navigation at the top of the page.&quot;, &quot;type&quot;: &quot;Generic&quot;, &quot;value&quot;: &quot;Blank Common Problem&quot;, &quot;field_name&quot;: &quot;display_name&quot;, &quot;options&quot;: []}, &quot;weight&quot;: {&quot;default_value&quot;: null, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Problem Weight&quot;, &quot;help&quot;: &quot;Defines the number of points each problem is worth. If the value is not set, each response field in the problem is worth one point.&quot;, &quot;type&quot;: &quot;Float&quot;, &quot;value&quot;: null, &quot;field_name&quot;: &quot;weight&quot;, &quot;options&quot;: {&quot;step&quot;: 0.1, &quot;min&quot;: 0}}, &quot;rerandomize&quot;: {&quot;default_value&quot;: &quot;never&quot;, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Randomization&quot;, &quot;help&quot;: &quot;Defines how often inputs are randomized when a student loads the problem. This setting only applies to problems that can have randomly generated numeric values. A default value can be set in Advanced Settings.&quot;, &quot;type&quot;: &quot;Select&quot;, &quot;value&quot;: &quot;never&quot;, &quot;field_name&quot;: &quot;rerandomize&quot;, &quot;options&quot;: [{&quot;display_name&quot;: &quot;Always&quot;, &quot;value&quot;: &quot;always&quot;}, {&quot;display_name&quot;: &quot;On Reset&quot;, &quot;value&quot;: &quot;onreset&quot;}, {&quot;display_name&quot;: &quot;Never&quot;, &quot;value&quot;: &quot;never&quot;}, {&quot;display_name&quot;: &quot;Per Student&quot;, &quot;value&quot;: &quot;per_student&quot;}]}, &quot;max_attempts&quot;: {&quot;default_value&quot;: null, &quot;explicitly_set&quot;: false, &quot;display_name&quot;: &quot;Maximum Attempts&quot;, &quot;help&quot;: &quot;Defines the number of times a student can try to answer this problem. If the value is not set, infinite attempts are allowed.&quot;, &quot;type&quot;: &quot;Integer&quot;, &quot;value&quot;: null, &quot;field_name&quot;: &quot;max_attempts&quot;, &quot;options&quot;: {&quot;min&quot;: 0}}}"></div>
+
+
+        </section>
+
+    </div>
+</div>
+<div class="row module-actions">
+    <a href="#" class="save-button action-primary action">Save</a>
+    <a href="#" class="cancel-button action-secondary action">Cancel</a>
+</div> <!-- Module Actions-->
+</div>
+</div>
+<div class="wrapper wrapper-component-action-header">
+    <div class="component-header">
+        Blank Common Problem
+    </div>
+    <ul class="component-actions">
+        <li class="action-item action-edit">
+            <a href="#" class="edit-button action-button">
+                <i class="icon-edit"></i>
+                <span class="action-button-text">Edit</span>
+            </a>
+        </li>
+        <li class="action-item action-duplicate">
+            <a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+                <i class="icon-copy"></i>
+                <span class="sr">Duplicate this component</span>
+            </a>
+        </li>
+        <li class="action-item action-delete">
+            <a href="#" data-tooltip="Delete" class="delete-button action-button">
+                <i class="icon-trash"></i>
+                <span class="sr">Delete this component</span>
+            </a>
+        </li>
+    </ul>
+</div>
+<span data-tooltip="Drag to reorder" class="drag-handle"></span>
+<section class="xblock xblock-student_view xmodule_display xmodule_CapaModule" data-runtime-version="1" data-init="XBlockToXModuleShim" data-handler-prefix="/preview/xblock/i4x:;_;_andya;_AA101;_problem;_2fa3ab8048514b73b36e8807a42b3525/handler" data-type="Problem" data-block-type="problem">
+    <section id="problem_i4x-andya-AA101-problem-2fa3ab8048514b73b36e8807a42b3525" class="problems-wrapper" data-problem-id="i4x://andya/AA101/problem/2fa3ab8048514b73b36e8807a42b3525" data-url="/preview/xblock/i4x:;_;_andya;_AA101;_problem;_2fa3ab8048514b73b36e8807a42b3525/handler/xmodule_handler" data-progress_status="0" data-progress_detail="0">
+
+
+        <h2 class="problem-header">
+            Blank Common Problem
+        </h2>
+
+        <section class="problem-progress">(0 points)</section>
+
+        <section class="problem">
+            <div></div>
+
+            <section class="action">
+                <input type="hidden" name="problem_id" value="Blank Common Problem">
+
+                <input class="check Check" type="button" value="Check">
+                <button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
+            </section>
+        </section>
+    </section>
+
+</section>
+
+
+</li><li class="new-component-item adding">
+    <div class="new-component">
+        <h5>Add New Component</h5>
+        <ul class="new-component-type">
+            <li>
+                <a href="#" class="multiple-templates" data-type="advanced">
+                    <span class="large-template-icon large-advanced-icon"></span>
+                    <span class="name">advanced</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="single-template" data-type="discussion" data-category="discussion">
+                    <span class="large-template-icon large-discussion-icon"></span>
+                    <span class="name">discussion</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="multiple-templates" data-type="html">
+                    <span class="large-template-icon large-html-icon"></span>
+                    <span class="name">html</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="multiple-templates" data-type="problem">
+                    <span class="large-template-icon large-problem-icon"></span>
+                    <span class="name">problem</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="single-template" data-type="video" data-category="video">
+                    <span class="large-template-icon large-video-icon"></span>
+                    <span class="name">video</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="new-component-templates new-component-advanced">
+        <div class="tab current" id="tab1">
+            <ul class="new-component-template"><li class="editor-md empty">
+                <a href="#" data-category="word_cloud">
+                    <span class="name">Word cloud</span>
+                </a>
+            </li>
+
+
+
+            </ul>
+        </div>
+        <a href="#" class="cancel-button">Cancel</a>
+    </div>
+    <div class="new-component-templates new-component-html">
+        <div class="tab current" id="tab1">
+            <ul class="new-component-template"><li class="editor-md empty">
+                <a href="#" data-category="html">
+                    <span class="name">Text</span>
+                </a>
+            </li>
+                <li class="editor-md">
+                    <a href="#" data-category="html" data-boilerplate="announcement.yaml">
+                        <span class="name">Announcement</span>
+                    </a>
+                </li>
+
+                <li class="editor-md">
+                    <a href="#" data-category="html" data-boilerplate="anon_user_id.yaml">
+                        <span class="name">Anonymous User ID</span>
+                    </a>
+                </li>
+
+
+
+
+                <li class="editor-md">
+                    <a href="#" data-category="html" data-boilerplate="zooming_image.yaml">
+                        <span class="name">Zooming Image</span>
+                    </a>
+                </li>
+
+            </ul>
+        </div>
+        <a href="#" class="cancel-button">Cancel</a>
+    </div>
+    <div class="new-component-templates new-component-problem">
+        <div class="tab-group tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
+            <ul class="problem-type-tabs nav-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
+                <li class="current ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab1" aria-labelledby="ui-id-1" aria-selected="true">
+                    <a class="link-tab ui-tabs-anchor" href="#tab1" role="presentation" tabindex="-1" id="ui-id-1">Common Problem Types</a>
+                </li>
+                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab2" aria-labelledby="ui-id-2" aria-selected="false">
+                    <a class="link-tab ui-tabs-anchor" href="#tab2" role="presentation" tabindex="-1" id="ui-id-2">Advanced</a>
+                </li>
+            </ul>
+            <div class="tab current ui-tabs-panel ui-widget-content ui-corner-bottom" id="tab1" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
+                <ul class="new-component-template">
+
+                    <li class="editor-md">
+                        <a href="#" data-category="problem" data-boilerplate="blank_common.yaml">
+                            <span class="name">Blank Common Problem</span>
+                        </a>
+                    </li>
+
+                    <li class="editor-md">
+                        <a href="#" data-category="problem" data-boilerplate="checkboxes_response.yaml">
+                            <span class="name">Checkboxes</span>
+                        </a>
+                    </li>
+
+
+
+
+
+                    <li class="editor-md">
+                        <a href="#" data-category="problem" data-boilerplate="optionresponse.yaml">
+                            <span class="name">Dropdown</span>
+                        </a>
+                    </li>
+
+
+
+                    <li class="editor-md">
+                        <a href="#" data-category="problem" data-boilerplate="multiplechoice.yaml">
+                            <span class="name">Multiple Choice</span>
+                        </a>
+                    </li>
+
+                    <li class="editor-md">
+                        <a href="#" data-category="problem" data-boilerplate="numericalresponse.yaml">
+                            <span class="name">Numerical Input</span>
+                        </a>
+                    </li>
+
+
+                    <li class="editor-md">
+                        <a href="#" data-category="problem" data-boilerplate="string_response.yaml">
+                            <span class="name">Text Input</span>
+                        </a>
+                    </li>
+
+                </ul>
+            </div>
+            <div class="tab ui-tabs-panel ui-widget-content ui-corner-bottom" id="tab2" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
+                <ul class="new-component-template">
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="None">
+                            <span class="name">Blank Advanced Problem</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="circuitschematic.yaml">
+                            <span class="name">Circuit Schematic Builder</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="jsinput_response.yaml">
+                            <span class="name">Custom Javascript Display and Grading</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="customgrader.yaml">
+                            <span class="name">Custom Python-Evaluated Input</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="drag_and_drop.yaml">
+                            <span class="name">Drag and Drop</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="imageresponse.yaml">
+                            <span class="name">Image Mapped Input</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="forumularesponse.yaml">
+                            <span class="name">Math Expression Input</span>
+                        </a>
+                    </li>
+                    <li class="editor-manual">
+                        <a href="#" data-category="problem" data-boilerplate="problem_with_hint.yaml">
+                            <span class="name">Problem with Adaptive Hint</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <a href="#" class="cancel-button">Cancel</a>
+    </div>
+</li>
+</ol>
+</article>
+</div>
+
+
+<div class="sidebar">
+    <div class="unit-settings window">
+        <h4 class="header">Unit Settings</h4>
+        <div class="window-contents">
+            <div class="row visibility">
+                <label for="visibility-select" class="inline-label">Visibility:</label>
+                <select name="visibility-select" id="visibility-select" class="visibility-select">
+                    <option value="public">Public</option>
+                    <option value="private">Private</option>
+                </select>
+            </div>
+            <div class="row published-alert">
+                <p class="edit-draft-message">This unit has been published. To make changes, you must <a href="#" class="create-draft">edit a draft</a>.</p>
+                <p class="publish-draft-message">This is a draft of the published unit. To update the live version, you must <a href="#" class="publish-draft">replace it with this draft</a>.</p>
+            </div>
+            <div class="row status">
+                <p>This unit is scheduled to be released to <strong>students</strong>
+                    on <strong>Jan 01, 2030 at 00:00 UTC</strong>
+                    with the subsection <a href="/subsection/andya.AA101.2014_T1/branch/draft/block/sequentialfd4">Lesson 1</a>
+                </p>
+            </div>
+            <div class="row unit-actions">
+                <a href="#" class="delete-draft delete-button">Delete Draft</a>
+                <a href="//preview.edx.org/courses/andya/AA101/2014_T1/courseware/9d45ad78b67d484f9e60a2f152baf7c5/fd437235f8c54759a1e7c39d746d212e/1" target="_blank" class="preview-button">Preview</a>
+                <a href="//courses.edx.org/courses/andya/AA101/2014_T1/jump_to/i4x://andya/AA101/vertical/68bbc21110f2474f9b17ad3ede9aea60" target="_blank" class="view-button">View Live</a>
+            </div>
+        </div>
+    </div>
+    <div class="window unit-location">
+        <h4 class="header">Unit Location</h4>
+        <div class="window-contents">
+            <div class="row wrapper-unit-id">
+                <p class="unit-id">
+                    <label for="unit-location-id-input">Unit Identifier:</label>
+                    <input type="text" class="url value" id="unit-location-id-input" value="68bbc21110f2474f9b17ad3ede9aea60" readonly="">
+                </p>
+            </div>
+            <div class="unit-tree-location">
+                <ol>
+                    <li class="section">
+                        <a href="/course/andya.AA101.2014_T1/branch/draft/block/2014_T1" class="section-item section-name">
+                            <span class="section-name">Week 1</span>
+                        </a>
+                        <ol>
+                            <li class="subsection">
+                                <a href="/subsection/andya.AA101.2014_T1/branch/draft/block/sequentialfd4" class="section-item">
+                                    <span class="subsection-name"><span class="subsection-name-value">Lesson 1</span></span>
+                                </a>
+
+                                <ol class="sortable-unit-list">
+
+
+
+                                    <li class="courseware-unit unit is-draggable" data-locator="andya.AA101.2014_T1/branch/draft/block/vertical68b" data-parent="andya.AA101.2014_T1/branch/draft/block/sequentialfd4">
+
+                                        <span class="draggable-drop-indicator draggable-drop-indicator-before"><i class="icon-caret-right"></i></span>
+
+
+
+                                        <div class="section-item editing">
+                                            <a href="/unit/andya.AA101.2014_T1/branch/draft/block/vertical68b" class="private-item">
+                                                <span class="unit-name">New Unit</span>
+                                            </a>
+                                        </div>
+
+                                        <span class="draggable-drop-indicator draggable-drop-indicator-after"><i class="icon-caret-right"></i></span>
+
+                                    </li>
+
+                                    <li class="courseware-unit unit is-draggable" data-locator="andya.AA101.2014_T1/branch/draft/block/vertical95e" data-parent="andya.AA101.2014_T1/branch/draft/block/sequentialfd4">
+
+                                        <span class="draggable-drop-indicator draggable-drop-indicator-before"><i class="icon-caret-right"></i></span>
+
+
+
+                                        <div class="section-item ">
+                                            <a href="/unit/andya.AA101.2014_T1/branch/draft/block/vertical95e" class="private-item">
+                                                <span class="unit-name">Discussion</span>
+                                            </a>
+                                        </div>
+
+                                        <span class="draggable-drop-indicator draggable-drop-indicator-after"><i class="icon-caret-right"></i></span>
+
+                                    </li>
+                                    <li class="courseware-unit add-new-unit">
+                                        <span class="draggable-drop-indicator draggable-drop-indicator-initial"><i class="icon-caret-right"></i></span>
+
+
+                                        <a href="#" class="new-unit-item" data-category="vertical" data-parent="andya.AA101.2014_T1/branch/draft/block/sequentialfd4">
+                                            <i class="icon-plus"></i> New Unit
+                                        </a>
+                                    </li>
+                                </ol>
+
+                            </li>
+                        </ol>
+                    </li>
+                </ol>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+</div>
+</%block>

cms/urls.py

@@ -70,7 +70,6 @@ urlpatterns += patterns(
     url(r'(?ix)^course($|/){}$'.format(parsers.URL_RE_SOURCE), 'course_handler'),
     url(r'(?ix)^subsection($|/){}$'.format(parsers.URL_RE_SOURCE), 'subsection_handler'),
     url(r'(?ix)^unit($|/){}$'.format(parsers.URL_RE_SOURCE), 'unit_handler'),
-    url(r'(?ix)^container($|/){}$'.format(parsers.URL_RE_SOURCE), 'container_handler'),
     url(r'(?ix)^checklists/{}(/)?(?P<checklist_index>\d+)?$'.format(parsers.URL_RE_SOURCE), 'checklists_handler'),
     url(r'(?ix)^orphan/{}$'.format(parsers.URL_RE_SOURCE), 'orphan_handler'),
     url(r'(?ix)^assets/{}(/)?(?P<asset_id>.+)?$'.format(parsers.URL_RE_SOURCE), 'assets_handler'),

common/static/sass/_mixins.scss

@@ -43,6 +43,43 @@
 
 // ====================
 
+// mixins - flex support
+@mixin ui-flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+// extends - justify-content right for display:flex alignment in older browsers
+%ui-justify-right-flex {
+  -webkit-box-pack: end;
+  -moz-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: end;
+  justify-content: flex-end;
+}
+
+// extends - justify-content left for display:flex alignment in older browsers
+%ui-justify-left-flex {
+  -webkit-box-pack: start;
+  -moz-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: flex-start;
+}
+
+// extends - align items center for display:flex alignment in older browsers
+%ui-align-center-flex {
+  -webkit-flex-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+// ====================
+
 // extends - UI - used for page/view-level wrappers (for centering/grids)
 %ui-wrapper {
   @include clearfix();