fcc0231d4d
This is the changes for STUD-1244, which introduces the ability for Studio to display arbitrarily nested xblocks. In this change, a new container page is introduced which can display nested xblocks. In particular, the xblock type of 'vertical' is special cased to be shown inline as a collapsible section. The unit page is mostly unchanged, except that container xblock's are shown as a link to their container page, rather than being shown inline.
137 lines
3.0 KiB
SCSS
137 lines
3.0 KiB
SCSS
// 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;
|
|
}
|
|
|
|
.xblock-render {
|
|
margin: 0 $baseline $baseline $baseline;
|
|
}
|
|
|
|
// STATE: nesting level xblock is collapsed
|
|
&.collapsed {
|
|
padding-bottom: 0;
|
|
background-color: $gray-l7;
|
|
box-shadow: 0 0 1px $shadow-d2 inset;
|
|
}
|
|
}
|
|
|
|
// CASE: element level xblock rendering
|
|
&.level-element {
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
border-color: $blue;
|
|
}
|
|
|
|
.xblock-header {
|
|
display: flex;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// UI: xblocks - internal styling
|
|
|
|
// In order to ensure visual consistency across the unit and container pages, certain styles need to be applied to render on the container page until they are also cleaned up and applied differently on the unit page.
|
|
.wrapper-xblock {
|
|
|
|
// UI: xblocks - internal headings for problems and video components
|
|
h2 {
|
|
margin: 30px 40px 30px 0;
|
|
color: #646464;
|
|
font-size: 19px;
|
|
font-weight: 300;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|