Merge pull request #2507 from edx/marco/studio/container-view
styling for a generic container view in Studio built on top of base styles for xblocks rendered in Studio. Also includes UX reference template area for unit and container pages.
This commit is contained in:
marcotuts
@@ -56,7 +56,7 @@ h1 {
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
|
||||
.subtitle {
|
||||
.navigation, .subtitle {
|
||||
@extend %t-title7;
|
||||
position: relative;
|
||||
top: ($baseline/4);
|
||||
@@ -323,6 +323,44 @@ p, ul, ol, dl {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
}
|
||||
|
||||
// layout with navigation
|
||||
&.has-navigation {
|
||||
|
||||
.nav-actions {
|
||||
bottom: -($baseline*1.5);
|
||||
}
|
||||
|
||||
.navigation-link {
|
||||
@extend %cont-truncated;
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
|
||||
&.navigation-current {
|
||||
@extend %ui-disabled;
|
||||
color: $gray;
|
||||
|
||||
&:before {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-link:before {
|
||||
content: " / ";
|
||||
margin: ($baseline/4);
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation .navigation-link:first-child:before {
|
||||
content: "";
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// page metadata/action bar
|
||||
|
||||
@@ -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%);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
|
||||
77
cms/static/sass/elements/_xblocks.scss
Normal file
77
cms/static/sass/elements/_xblocks.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
// studio - elements - xblock rendering
|
||||
// ==========================
|
||||
|
||||
// extends - UI archetypes - xblock rendering
|
||||
%wrap-xblock {
|
||||
margin: ($baseline/2);
|
||||
border: 1px solid $gray-l4;
|
||||
border-radius: ($baseline/5);
|
||||
background: $white;
|
||||
box-shadow: 0px 1px 1px $shadow-l1;
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 1px $shadow;
|
||||
}
|
||||
|
||||
// UI: xblock header
|
||||
.xblock-header {
|
||||
@include box-sizing(border-box);
|
||||
@include ui-flexbox();
|
||||
@extend %ui-align-center-flex;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
border-radius: ($baseline/5) ($baseline/5) 0 0;
|
||||
min-height: ($baseline*2.5);
|
||||
background-color: $gray-l6;
|
||||
|
||||
.header-details {
|
||||
@extend %cont-truncated;
|
||||
@extend %ui-justify-left-flex;
|
||||
@include ui-flexbox();
|
||||
padding-left: flex-gutter();
|
||||
width: flex-grid(6,12);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
@include ui-flexbox();
|
||||
@extend %ui-justify-right-flex;
|
||||
width: flex-grid(6,12);
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: xblock render
|
||||
.xblock-render {
|
||||
@extend %anim-fadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// UI: xblocks - calls-to-action
|
||||
.wrapper-xblock .header-actions {
|
||||
@extend %actions-header;
|
||||
}
|
||||
|
||||
// UI: xblock is collapsible
|
||||
.wrapper-xblock.is-collapsible {
|
||||
|
||||
.expand-collapse {
|
||||
@extend %expand-collapse;
|
||||
margin: 0 ($baseline/4);
|
||||
}
|
||||
|
||||
&.collapsed .xblock-render {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-view {
|
||||
|
||||
.action-button-text {
|
||||
padding-right: ($baseline/5);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
@import 'elements/typography';
|
||||
@import 'elements/icons'; // references to icons used
|
||||
@import 'elements/controls'; // buttons, link styles, sliders, etc.
|
||||
@import 'elements/xblocks'; // studio rendering chrome for xblocks
|
||||
|
||||
// base - specific views
|
||||
@import 'views/account';
|
||||
@@ -41,6 +42,7 @@
|
||||
@import 'views/static-pages';
|
||||
@import 'views/subsection';
|
||||
@import 'views/unit';
|
||||
@import 'views/container';
|
||||
@import 'views/users';
|
||||
@import 'views/checklists';
|
||||
@import 'views/textbooks';
|
||||
|
||||
@@ -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;
|
||||
|
||||
105
cms/static/sass/views/_container.scss
Normal file
105
cms/static/sass/views/_container.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
// studio - views - container
|
||||
// ==========================
|
||||
// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level.
|
||||
|
||||
// For containers rendered at the element level, the container is rendered in a way that allows the user to navigate to a separate container page for that container making its children populate the nesting and element levels.
|
||||
|
||||
// UI: container page view
|
||||
body.view-container {
|
||||
|
||||
.mast {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.content-primary, .content-supplementary {
|
||||
@include box-sizing(border-box);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.content-primary {
|
||||
margin-right: flex-gutter();
|
||||
width: flex-grid(9,12);
|
||||
}
|
||||
|
||||
.content-supplementary {
|
||||
width: flex-grid(3,12);
|
||||
|
||||
label {
|
||||
@extend %t-title8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UI: xblock rendering
|
||||
body.view-container .content-primary{
|
||||
|
||||
.wrapper-xblock {
|
||||
@extend %wrap-xblock;
|
||||
|
||||
// CASE: page level xblock rendering
|
||||
&.level-page {
|
||||
margin: 0;
|
||||
|
||||
.xblock-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: nesting level xblock rendering
|
||||
&.level-nesting {
|
||||
border: none;
|
||||
padding-bottom: $baseline;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
background-color: $gray-l7;
|
||||
box-shadow: 0 0 1px $shadow-d2 inset;
|
||||
}
|
||||
|
||||
.xblock-header {
|
||||
@include ui-flexbox();
|
||||
margin-bottom: ($baseline/2);
|
||||
border-bottom: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: element level xblock rendering
|
||||
&.level-element {
|
||||
margin: 0 ($baseline*2) $baseline ($baseline*2);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@include transition(all $tmg-f2 linear 0s);
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
.xblock-header {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid $gray-l4;
|
||||
background-color: $gray-l6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
margin: $baseline;
|
||||
}
|
||||
|
||||
// STATE: xBlock containers styled as rows.
|
||||
&.xblock-type-container {
|
||||
|
||||
.xblock-header {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
border-radius: ($baseline/5);
|
||||
}
|
||||
|
||||
.xblock-render {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
.component-actions {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
float: right;
|
||||
margin-right: $baseline*2;
|
||||
padding: 8px 0px;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
442
cms/templates/ux/reference/container.html
Normal file
442
cms/templates/ux/reference/container.html
Normal file
@@ -0,0 +1,442 @@
|
||||
<%inherit file="../../base.html" />
|
||||
<%!
|
||||
from django.core.urlresolvers import reverse
|
||||
from django.utils.translation import ugettext as _
|
||||
%>
|
||||
<%block name="title">${_("Container")}</%block>
|
||||
<%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&wmode=transparent&rel=0&showinfo=0&enablejsapi=1&modestbranding=1&html5=1&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>
|
||||
29
cms/templates/ux/reference/index.html
Normal file
29
cms/templates/ux/reference/index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<%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>
|
||||
886
cms/templates/ux/reference/unit.html
Normal file
886
cms/templates/ux/reference/unit.html
Normal file
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user