Skip to content

E
edx-platform
Commit 59af4457 by Brian Talbot Committed by Julian Arni
Options

Studio: revises general layout/styling of import view and adds in detail… 

Studio: revises general layout/styling of import view and adds in detail progress feedback after import (WIP)

Studio: removes import progress bar HTML and Sass; hides import status by default

Studio: revises import file upload success copy; sets up showing/hiding states for import status and additional messages

Studio: revises iconography and adds in success step in import status feedback

Studio: adds hidden styling back into import status UI
parent a1088275
Showing with 316 additions and 150 deletions
cms/static/sass/views/_import.scss
// studio - views - course import // studio - views - course import
// ==================== // ====================
@-webkit-keyframes opacity {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes opacity {
0% { opacity: 1; }
100% { opacity: 0; }
}
.view-import { .view-import {
.import-overview { .content-primary, .content-supplementary {
@extend %ui-window; @include box-sizing(border-box);
@include clearfix;
padding: 30px 40px;
}
.description {
float: left; float: left;
width: 62%; }
margin-right: 3%;
font-size: 14px;
h2 {
font-weight: 700;
font-size: 19px;
margin-bottom: 20px;
}
strong { .content-primary {
font-weight: 700; width: flex-grid(9,12);
} margin-right: flex-gutter();
}
p + p { .content-supplementary {
margin-top: 20px; width: flex-grid(3,12);
}
} }
// UI: import form
.import-form { .import-form {
float: left;
width: 35%;
padding: 25px 30px 35px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $mediumGrey; @extend .ui-window;
border-radius: 3px; padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
background: $lightGrey;
text-align: center; > .title {
@extend .t-title4;
h2 {
margin-bottom: 30px;
font-size: 26px;
font-weight: 300;
} }
.file-name-block, .file-name-block,
.error-block { .error-block {
display: none; display: none;
margin-bottom: 15px; margin-bottom: $baseline;
font-size: 13px;
} }
.error-block { .error-block {
color: $error-red; color: $error-red;
} }
.status-block {
display: none;
font-size: 13px;
}
.choose-file-button {
@include blue-button;
padding: 10px 50px 11px;
font-size: 17px;
}
.choose-file-button-inline {
display: block;
}
.file-input { .file-input {
display: none; display: none;
} }
}
.submit-button { // ====================
@include orange-button;
display: none; // UI: default
max-width: 100%; .action-choose-file {
padding: 8px 20px 10px; @extend .btn-primary-blue;
white-space: normal; @extend .t-action1;
} display: block;
margin: $baseline 0;
padding: ($baseline*0.75) $baseline;
} }
// ====================
// UI: elem - file selection
.wrapper-file-name {
@extend .ui-well;
margin: $baseline 0;
padding: $baseline ($baseline*1.5);
background-color: $gray-l4;
.progress-bar { .title {
display: none; @extend .t-copy-lead1;
width: 350px; margin-bottom: ($baseline*0.75);
height: 30px; overflow-x: hidden;
margin: 30px auto 10px; text-overflow: ellipsis;
border: 1px solid $blue;
&.loaded { .label {
border-color: #66b93d; margin-right: ($baseline/2);
}
.progress-fill { .file-name {
background: #66b93d; font-weight: bold;
} }
} }
}
.progress-fill { // artifact styling needed for current page behavior logic
width: 0%; .submit-button {
height: 30px; @extend .btn-primary-green;
background: $blue; @extend .t-action1;
color: #fff; display: none;
line-height: 48px; width: 100%;
padding: ($baseline*0.75) $baseline;
}
} }
}
div.status-info-block { // ====================
display: none;
text-align: left;
}
.not-started {
opacity: 0.4;
}
.not-started span { // UI: upload progress
display: none; .wrapper-status {
} @include transition(opacity $tmg-f2 ease-in-out 0);
opacity: 1.0;
.done { // STATE: hidden
opacity: 0.7; &.is-hidden {
} opacity: 0.0;
display: none;
}
.done span { > .title {
display: none; @extend .t-title4;
} margin-bottom: $baseline;
border-bottom: 1px solid $gray-l3;
padding-bottom: ($baseline/2);
}
// elem - progress list
.list-progress {
width: flex-grid(9, 9);
.status-visual {
position: relative;
float: left;
width: flex-grid(1,9);
*[class^="icon-"] {
@include transition(opacity $tmg-f1 ease-in-out 0);
@include font-size(22);
position: absolute;
top: ($baseline/2);
left: $baseline;
}
}
.in-progress span { .status-detail {
-webkit-animation-name: opacity; float: left;
-webkit-animation-duration: 1s; width: flex-grid(8,9);
-webkit-animation-iteration-count: infinite; margin-left: ($baseline*3);
-moz-animation-name: opacity; .title {
-moz-animation-duration: 1s; @extend .t-title5;
-moz-animation-iteration-count: infinite; font-weight: 600;
} }
.in-progress span:nth-child(2) { .copy {
-webkit-animation-delay: 300ms; @extend .t-copy-base;
-moz-animation-delay: 300ms; color: $gray-l2;
} }
}
.in-progress span:nth-child(3) { .item-progresspoint {
-webkit-animation-delay: 600ms; @include clearfix();
-moz-animation-delay: 600ms; @include transition(opacity $tmg-f1 ease-in-out 0);
margin-bottom: $baseline;
border-bottom: 1px solid $gray-l4;
padding-bottom: $baseline;
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
// TYPE: success
&.item-progresspoint-success {
}
// STATE: not started
&.is-not-started {
opacity: 0.5;
.icon-warning-sign {
visibility: hidden;
opacity: 0.0;
}
.icon-cog {
visibility: visible;
opacity: 1.0;
}
.icon-check {
opacity: 0.3;
}
}
// STATE: started
&.is-started {
.icon-warning-sign {
visibility: hidden;
opacity: 0.0;
}
.icon-cog {
visibility: visible;
opacity: 1.0;
}
}
// STATE: completed
&.is-complete {
.icon-cog {
visibility: visible;
opacity: 1.0;
}
.icon-warning-sign {
visibility: hidden;
opacity: 0.0;
}
*[class^="icon-"] {
color: $green;
}
.status-detail .title {
color: $green;
}
}
// STATE: error
&.has-error {
.icon-cog {
visibility: hidden;
opacity: 0.0;
}
.icon-warning-sign {
visibility: visible;
opacity: 1.0;
}
*[class^="icon-"] {
color: $red;
}
.status-detail .title, .status-detail .copy {
color: $red;
}
}
}
}
}
} }
cms/templates/import.html
...@@ -17,45 +17,135 @@ ...@@ -17,45 +17,135 @@
</header> </header>
</div> </div>
<div class="main-wrapper"> <div class="wrapper-content wrapper">
<div class="inner-wrapper"> <section class="content">
<article class="import-overview"> <article class="content-primary" role="main">
<div class="description">
<p><strong>${_("Importing a new course will delete all content currently associated with your course and replace it with the contents of the uploaded file.")}</strong></p> <div class="introduction">
## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated <p>${_("You may import existing course structure and content into Studio.")}</p>
<p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
<p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p> <p>${_("Importing is not something to take lightly as the course content you successfully upload will replace your current content and cannot be reversed. Please be certain you want to replace your course's content.")}</p>
</div> </div>
<form id="fileupload" method="post" enctype="multipart/form-data" <form id="fileupload" method="post" enctype="multipart/form-data"
class="import-form" url="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}"> class="import-form" url="${reverse('import_course', kwargs=dict(org=context_course.location.org, course=context_course.location.course, name=context_course.location.name))}">
<h2>${_("Course to import:")}</h2>
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}" />
<h2 class="title">${_("Select a File (.tar.gz format) to Replace Your Course Content")}</h2>
<p class="error-block"></p> <p class="error-block"></p>
<a href="#" class="choose-file-button">${_("Choose File")}</a>
<p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">${_("change")}</a></p> <a href="#" class="action action-choose-file choose-file-button">${_("Choose File")}</a>
<input type="file" name="course-data" class="file-input" >
<input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" > <div class="wrapper wrapper-file-name file-name-block">
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"> <h3 class="title">
<div id="status-info-block" class="status-info-block"> <span class="label">File Chosen:</span>
<p class="status-info not-started"> <span class="file-name"></span>
<i class="icon-check-empty"></i> </h3>
Unpacking
</p> <input type="file" name="course-data" class="file-input" />
<p class="status-info not-started">
<i class="icon-check-empty"></i> <input type="submit" value="${_('Replace my course with the one above')}" class="submit-button" />
Verifying
</p>
<p class="status-info not-started">
<i class="icon-check-empty"></i>
Importing
</p>
</div> </div>
<div class="progress-bar">
<div class="progress-fill"></div> <div class="wrapper wrapper-status is-hidden">
<div class="percent">0%</div> <h3 class="title">${_("Course Import Status")}</h3>
<ol class="status-progress list-progress">
<li class="item-progresspoint item-progresspoint-upload is-complete">
<span class="deco status-visual">
<i class="icon-cog"></i>
<i class="icon-warning-sign"></i>
</span>
<div class="status-detail">
<h3 class="title">${_("Uploading")}</h3>
<p class="copy">${_("Transferring your file to our servers")}</p>
</div>
</li>
<li class="item-progresspoint item-progresspoint-unpack is-started">
<span class="deco status-visual">
<i class="icon-cog icon-spin"></i>
<i class="icon-warning-sign"></i>
</span>
<div class="status-detail">
<h3 class="title">${_("Unpacking")}</h3>
<p class="copy">${_("Expanding and preparing folder/file structure")}</p>
</div>
</li>
<li class="item-progresspoint item-progresspoint-unpack has-error">
<span class="deco status-visual">
<i class="icon-cog"></i>
<i class="icon-warning-sign"></i>
</span>
<div class="status-detail">
<h3 class="title">${_("Unpacking")}</h3>
<p class="copy is-updated">${_("We're sorry something went wrong with the import of your course data. Please try again.")}</p>
</div>
</li>
<li class="item-progresspoint item-progresspoint-verify is-not-started">
<span class="deco status-visual">
<i class="icon-cog"></i>
<i class="icon-warning-sign"></i>
</span>
<div class="status-detail">
<h3 class="title">${_("Verifying")}</h3>
<p class="copy">${_("Reviewing semantics, syntax, and required data")}</p>
</div>
</li>
<li class="item-progresspoint item-progresspoint-import is-not-started">
<span class="deco status-visual">
<i class="icon-cog"></i>
<i class="icon-warning-sign"></i>
</span>
<div class="status-detail">
<h3 class="title">${_("Import Complete")}</h3>
<p class="copy">${_("Replacing previous course content with imported content")}</p>
</div>
</li>
<li class="item-progresspoint item-progresspoint-success is-not-started">
<span class="deco status-visual">
<i class="icon-check"></i>
</span>
<div class="status-detail">
<h3 class="title">${_("Success")}</h3>
<p class="copy">${_("Your imported content has now replaced all other course content")}</p>
</div>
</li>
</ol>
</div> </div>
</form> </form>
</article> </article>
</div>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">${_("Current Content & Importing")}</h3>
<p>${_("Importing a new course will delete all content currently associated with your course and replace it with the contents of the uploaded file.")}</p>
</div>
<div class="bit">
<h3 class="title-3">${_("Gzipped Tar Files (.tar.gz) Only")}</h3>
## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
<p>${_("File uploads must be gzipped tar files (.tar.gz) containing, at a minimum, a {filename} file.").format(filename='<code>course.xml</code>')}</p>
</div>
<div class="bit">
<h3 class="title-3">${_("Warning: Auto-generated Nodes")}</h3>
## Translators: ".tar.gz" is a file extension, and files with that extension are called "gzipped tar files": these terms should not be translated
<p>${_("Please note that if your course has any problems with auto-generated {nodename} nodes, re-importing your course could cause the loss of student data associated with those problems.").format(nodename='<code>url_name</code>')}</p>
</div>
</aside>
</section>
</div> </div>
</%block> </%block>
......
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