Skip to content

E
edx-platform
Commit 6fcd35cf by marcotuts
Options

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.
parents eda6961e a8417df7
Showing with 419 additions and 45 deletions
cms/static/sass/_base.scss
......@@ -56,7 +56,7 @@ h1 {
font-weight: 600;
color: $gray-d3;
.subtitle {
.navigation, .subtitle {
@extend %t-title7;
position: relative;
top: ($baseline/4);
......@@ -323,6 +323,44 @@ p, ul, ol, dl {
bottom: -($baseline*1.5);
}
}
// layout with navigation
&.has-navigation {
.nav-actions {
bottom: -($baseline*1.5);
}
.navigation-link {
@extend %cont-truncated;
display: inline-block;
max-width: 150px;
&.navigation-current {
@extend %ui-disabled;
color: $gray;
&:before {
color: $gray;
}
}
}
.navigation-link:before {
content: " / ";
margin: ($baseline/4);
color: $gray;
&:hover {
color: $gray;
}
}
.navigation .navigation-link:first-child:before {
content: "";
margin: 0;
}
}
}
// page metadata/action bar
......
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 0 → 100644
// 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';
......@@ -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';
......
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 0 → 100644
// 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;
}
}
}
}
}
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/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/index.html 0 → 100644
<%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>
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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment