Skip to content

E
edx-platform
Commit 578c96a8 by Chris Committed by Greg Price
Options

Studio video upload feature template and styling 

Co-authored-by: Greg Price <gprice@edx.org>
parent 61cb5159
Showing with 395 additions and 292 deletions
cms/static/js/factories/asset_index.js
......@@ -9,7 +9,7 @@ define([
assets.url = config.assetCallbackUrl;
assetsView = new AssetsView({
collection: assets,
el: $('.assets-wrapper'),
el: $('.wrapper-assets'),
uploadChunkSizeInMBs: config.uploadChunkSizeInMBs,
maxFileSizeInMBs: config.maxFileSizeInMBs,
maxFileSizeRedirectUrl: config.maxFileSizeRedirectUrl
......
cms/static/js/views/assets.js
......@@ -65,7 +65,7 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
this.pagingFooter.render();
// Hide the contents until the collection has loaded the first time
this.$('.asset-library').hide();
this.$('.assets-library').hide();
this.$('.no-asset-content').hide();
}
return tableBody;
......@@ -85,7 +85,7 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
}
);
}
self.$('.asset-library').toggle(hasAssets);
self.$('.assets-library').toggle(hasAssets);
self.$('.no-asset-content').toggle(!hasAssets);
return this;
},
......
cms/static/sass/elements/_uploaded-assets.scss 0 → 100644
.wrapper-assets {
.assets-library {
@include clearfix();
.assets-title {
@extend %t-strong;
margin-top: ($baseline*2);
margin-bottom: ($baseline*2);
}
.meta-wrap {
margin-bottom: $baseline;
}
.meta {
@extend %t-copy-sub2;
display: inline-block;
vertical-align: top;
width: flex-grid(9, 12);
color: $gray-l1;
.count-current-shown,
.count-total,
.sort-order {
@extend %t-strong;
}
}
.pagination {
@include clearfix;
display: inline-block;
width: flex-grid(3, 12);
&.pagination-compact {
@include text-align(right);
}
&.pagination-full {
display: block;
width: flex-grid(4, 12);
margin: $baseline auto;
}
.nav-item {
position: relative;
display: inline-block;
}
.nav-link {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
padding: ($baseline/4) ($baseline*0.75);
&.previous {
margin-right: ($baseline/2);
}
&.next {
margin-left: ($baseline/2);
}
&:hover {
background-color: $blue;
border-radius: 3px;
color: $white;
}
&.is-disabled {
background-color: transparent;
color: $gray-l2;
pointer-events: none;
}
}
.nav-label {
@extend .sr;
}
.pagination-form,
.current-page,
.page-divider,
.total-pages {
display: inline-block;
}
.current-page,
.page-number-input,
.total-pages {
@extend %t-copy-base;
@extend %t-strong;
width: ($baseline*2.5);
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $gray;
}
.current-page {
@extend %ui-depth1;
position: absolute;
@include left(-($baseline/4));
}
.page-divider {
@extend %t-title4;
@extend %t-regular;
vertical-align: middle;
color: $gray-l2;
}
.pagination-form {
@extend %ui-depth2;
position: relative;
.page-number-label,
.submit-pagination-form {
@extend .sr;
}
.page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent;
border-bottom: 1px dotted $gray-l2;
border-radius: 0;
box-shadow: none;
background: none;
&:hover {
background-color: $white;
opacity: 0.6;
}
&:focus {
// borrowing the base input focus styles to match overall app
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
opacity: 1.0;
box-shadow: 0 0 3px $shadow-d1 inset;
background-color: $white;
border: 1px solid transparent;
border-radius: 3px;
}
}
}
}
.assets-table {
width: 100%;
font-size: 80%;
word-wrap: break-word;
th {
@extend %t-copy-sub2;
background-color: $gray-l5;
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
vertical-align: middle;
text-align: left;
color: $gray;
.column-sort-link {
cursor: pointer;
color: $blue;
}
.current-sort {
@extend %t-strong;
border-bottom: 1px solid $gray-l3;
}
&.embed-col {
padding-left: ($baseline*0.75);
padding-right: ($baseline*0.75);
}
}
td {
padding: ($baseline/2);
vertical-align: middle;
text-align: left;
}
tbody {
box-shadow: 0 2px 2px $shadow-l1;
border: 1px solid $gray-l4;
background: $white;
tr {
@include transition(all $tmg-f2 ease-in-out 0s);
border-top: 1px solid $gray-l4;
.name-col {
@extend %t-strong;
}
.status-col {
text-transform: uppercase;
}
&:first-child {
border-top: none;
}
&:nth-child(odd) {
background-color: $gray-l6;
}
a {
color: $gray-d1;
&:hover {
color: $blue;
}
}
&.is-locked {
background-image: url('../images/bg-micro-stripes.png');
background-position: 0 0;
background-repeat: repeat;
}
&:hover {
background-color: $blue-l5;
.date-col,
.embed-col,
.embed-col .embeddable-xml-input {
color: $gray;
}
}
}
.thumb-col {
padding: ($baseline/2) $baseline;
.thumb {
width: 100px;
}
img {
width: 100%;
}
}
.name-col {
.title {
@extend %t-copy-sub1;
display: inline-block;
max-width: 200px;
overflow: hidden;
}
}
.date-col {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-copy-sub2;
color: $gray-l2;
}
.embed-col {
@include transition(all $tmg-f2 ease-in-out 0s);
padding-left: ($baseline*0.75);
color: $gray-l2;
.embeddable-xml-input {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-copy-sub2;
box-shadow: none;
border: 1px solid transparent;
background: none;
width: 100%;
color: $gray-l2;
&:focus {
background-color: $white;
box-shadow: 0 1px 5px $shadow-l1 inset;
border: 1px solid $gray-l3;
}
}
}
.actions-col {
padding: ($baseline/2);
text-align: center;
}
}
}
}
}
cms/static/sass/style-app-extend1-rtl.scss
......@@ -31,6 +31,7 @@
@import 'elements/xblocks'; // studio rendering chrome for xblocks
@import 'elements/modules'; // content module patterns
@import 'elements/layout'; // various standard layouts
@import 'elements/uploaded-assets'; // layout for asset tables
// base - specific views
@import 'views/account';
......@@ -51,6 +52,7 @@
@import 'views/textbooks';
@import 'views/export-git';
@import 'views/group-configuration';
@import 'views/video-upload';
// base - contexts
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
......
cms/static/sass/style-app-extend1.scss
......@@ -32,6 +32,7 @@
@import 'elements/xblocks'; // studio rendering chrome for xblocks
@import 'elements/modules'; // content module patterns
@import 'elements/layout'; // various standard layouts
@import 'elements/uploaded-assets'; // layout for asset tables
// base - specific views
@import 'views/account';
......@@ -52,6 +53,7 @@
@import 'views/textbooks';
@import 'views/export-git';
@import 'views/group-configuration';
@import 'views/video-upload';
// base - contexts
@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
......
cms/static/sass/views/_assets.scss
......@@ -42,287 +42,6 @@
}
}
.asset-library {
@include clearfix;
.meta-wrap {
margin-bottom: $baseline;
}
.meta {
@extend %t-copy-sub2;
display: inline-block;
vertical-align: top;
width: flex-grid(9, 12);
color: $gray-l1;
.count-current-shown,
.count-total,
.sort-order {
@extend %t-strong;
}
}
.pagination {
@include clearfix;
display: inline-block;
width: flex-grid(3, 12);
&.pagination-compact {
@include text-align(right);
}
&.pagination-full {
display: block;
width: flex-grid(4, 12);
margin: $baseline auto;
}
.nav-item {
position: relative;
display: inline-block;
}
.nav-link {
@include transition(all $tmg-f2 ease-in-out 0s);
display: block;
padding: ($baseline/4) ($baseline*0.75);
&.previous {
margin-right: ($baseline/2);
}
&.next {
margin-left: ($baseline/2);
}
&:hover {
background-color: $blue;
border-radius: 3px;
color: $white;
}
&.is-disabled {
background-color: transparent;
color: $gray-l2;
pointer-events: none;
}
}
.nav-label {
@extend .sr;
}
.pagination-form,
.current-page,
.page-divider,
.total-pages {
display: inline-block;
}
.current-page,
.page-number-input,
.total-pages {
@extend %t-copy-base;
@extend %t-strong;
width: ($baseline*2.5);
margin: 0 ($baseline*0.75);
padding: ($baseline/4);
text-align: center;
color: $gray;
}
.current-page {
@extend %ui-depth1;
position: absolute;
@include left(-($baseline/4));
}
.page-divider {
@extend %t-title4;
@extend %t-regular;
vertical-align: middle;
color: $gray-l2;
}
.pagination-form {
@extend %ui-depth2;
position: relative;
.page-number-label,
.submit-pagination-form {
@extend .sr;
}
.page-number-input {
@include transition(all $tmg-f2 ease-in-out 0s);
border: 1px solid transparent;
border-bottom: 1px dotted $gray-l2;
border-radius: 0;
box-shadow: none;
background: none;
&:hover {
background-color: $white;
opacity: 0.6;
}
&:focus {
// borrowing the base input focus styles to match overall app
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
opacity: 1.0;
box-shadow: 0 0 3px $shadow-d1 inset;
background-color: $white;
border: 1px solid transparent;
border-radius: 3px;
}
}
}
}
table {
width: 100%;
word-wrap: break-word;
th {
@extend %t-copy-sub2;
background-color: $gray-l5;
padding: 0 ($baseline/2) ($baseline*0.75) ($baseline/2);
vertical-align: middle;
text-align: left;
color: $gray;
.column-sort-link {
cursor: pointer;
color: $blue;
}
.current-sort {
@extend %t-strong;
border-bottom: 1px solid $gray-l3;
}
// CASE: embed column
&.embed-col {
padding-left: ($baseline*0.75);
padding-right: ($baseline*0.75);
}
}
td {
padding: ($baseline/2);
vertical-align: middle;
text-align: left;
}
tbody {
box-shadow: 0 2px 2px $shadow-l1;
border: 1px solid $gray-l4;
background: $white;
tr {
@include transition(all $tmg-f2 ease-in-out 0s);
border-top: 1px solid $gray-l4;
&:first-child {
border-top: none;
}
&:nth-child(odd) {
background-color: $gray-l6;
}
a {
color: $gray-d1;
&:hover {
color: $blue;
}
}
&.is-locked {
background-image: url('../images/bg-micro-stripes.png');
background-position: 0 0;
background-repeat: repeat;
}
&:hover {
background-color: $blue-l5;
.date-col,
.embed-col,
.embed-col .embeddable-xml-input {
color: $gray;
}
}
}
.thumb-col {
padding: ($baseline/2) $baseline;
.thumb {
width: 100px;
}
img {
width: 100%;
}
}
.name-col {
.title {
@extend %t-copy-sub1;
display: inline-block;
max-width: 200px;
overflow: hidden;
}
}
.date-col {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-copy-sub2;
color: $gray-l2;
}
.embed-col {
@include transition(all $tmg-f2 ease-in-out 0s);
padding-left: ($baseline*0.75);
color: $gray-l2;
.embeddable-xml-input {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-copy-sub2;
box-shadow: none;
border: 1px solid transparent;
background: none;
width: 100%;
color: $gray-l2;
&:focus {
background-color: $white;
box-shadow: 0 1px 5px $shadow-l1 inset;
border: 1px solid $gray-l3;
}
}
}
.actions-col {
padding: ($baseline/2);
text-align: center;
}
}
}
}
// UI: assets - calls-to-action
.actions-list {
@extend %actions-list;
......
cms/static/sass/views/_video-upload.scss 0 → 100644
.view-video-uploads {
.content-primary, .content-supplementary {
@include box-sizing(border-box);
}
.content-primary {
@extend .ui-col-wide;
}
.content-supplementary {
@extend .ui-col-narrow;
}
.nav-actions {
.icon-cloud-upload {
@extend %t-copy;
vertical-align: bottom;
margin-right: ($baseline/5);
}
}
.file-upload-form {
@include clearfix();
margin-bottom: ($baseline*1.5);
width: 100%;
.file-drop-area {
border: 2px dashed $gray-l3;
border-radius: ($baseline/5);
padding: ($baseline*3);
background: $white;
text-align: center;
&:hover,
&.is-dragged {
background: $blue-l5;
border-style: solid;
border-color: $blue-l4;
}
}
}
.active-video-upload-container {
margin-bottom: ($baseline*2);
.active-video-upload-list {
@extend %cont-no-list;
.active-video-upload {
display: inline-block;
min-height: ($baseline*4);
width: (flex-grid(4) - 1.85);
margin: (flex-gutter() - 1.85);
border: 1px solid $gray-l3;
border-radius: ($baseline/5);
padding: ($baseline/2);
vertical-align: top;
.video-detail-name {
@extend %cont-truncated;
@extend %t-strong;
margin-bottom: ($baseline/2);
font-size: 90%;
}
.video-detail-status {
@include font-size(12);
@include line-height(12);
&.error {
color: $color-error;
}
&.success {
color: $color-ready;
}
}
&:hover {
@include transition(all $tmg-f3);
background: $white;
}
}
}
}
.button {
@extend %ui-btn-non;
}
}
cms/templates/asset_index.html
......@@ -51,7 +51,7 @@
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="assets-wrapper"/>
<div class="wrapper-assets" />
<div class="ui-loading">
<p><span class="spin"><i class="icon-refresh"></i></span> <span class="copy">${_("Loading&hellip;")}</span></p>
</div>
......
cms/templates/js/asset-library.underscore
<div class="asset-library">
<div class="assets-library">
<div id="asset-paging-header"></div>
<table>
<table class="assets-table">
<caption class="sr"><%= gettext("List of uploaded files and assets in this course") %></caption>
<colgroup>
<col class="thumb-cols" />
......@@ -21,13 +20,12 @@
<th class="actions-col"><span class="sr"><%= gettext("Actions") %></span></th>
</tr>
</thead>
<tbody id="asset-table-body" ></tbody>
<tbody id="asset-table-body"></tbody>
</table>
<div id="asset-paging-footer"></div>
</div>
<div class="no-asset-content">
<p><%= gettext("You haven't added any assets to this course yet.") %> <a href="#" class="button upload-button new-button"><i class="icon-plus"></i><%= gettext("Upload your first asset") %></a></p>
</div>
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