Skip to content

E
edx-platform
Commit e41214b1 by Brian Talbot Committed by cahrens
Options

Studio: revises the styling for the export view to sync with the import view's UI

parent 763ff9c8
Showing with 271 additions and 93 deletions
cms/djangoapps/contentstore/tests/test_import_export.py
......@@ -219,7 +219,7 @@ class ExportTestCase(CourseTestCase):
"""
resp = self.client.get_html(self.url)
self.assertEquals(resp.status_code, 200)
self.assertContains(resp, "Download Files")
self.assertContains(resp, "Export a Copy of My Course Data")
def test_export_json_unsupported(self):
"""
......
cms/static/sass/_base.scss
......@@ -417,70 +417,6 @@ p, ul, ol, dl {
> section {
margin: 0 0 $baseline 0;
}
.bit {
@extend %t-copy-sub1;
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
color: $gray-l1;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
h3 {
@extend %t-title7;
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
}
p {
margin: 0 0 $baseline 0;
&:last-child {
margin-bottom: 0;
}
}
// actions
.list-actions {
@extend %cont-no-list;
.action-item {
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
}
}
// navigation
.nav-related, .nav-page {
.nav-item {
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
}
}
}
}
// ====================
......
cms/static/sass/elements/_system-help.scss
......@@ -211,3 +211,71 @@
color: $gray;
}
}
// ====================
// informational bits (rename once UI pattern is further defined)
.bit {
@extend %t-copy-sub1;
margin: 0 0 $baseline 0;
border-bottom: 1px solid $gray-l4;
padding: 0 0 $baseline 0;
color: $gray-l1;
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
h3, .title {
@extend %t-title7;
margin: 0 0 ($baseline/4) 0;
color: $gray-d2;
font-weight: 600;
}
p, .copy {
margin: 0 0 $baseline 0;
&:last-child {
margin-bottom: 0;
}
}
// actions
.list-actions {
@extend %cont-no-list;
.action-item {
@extend %wipe-last-child;
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
}
}
// details
.list-details {
@extend %cont-no-list;
.item-detail {
@extend %wipe-last-child;
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
}
}
// navigation
.nav-related, .nav-page {
@extend %cont-no-list;
.nav-item {
@extend %wipe-last-child;
margin-bottom: ($baseline/4);
border-bottom: 1px dotted $gray-l4;
padding-bottom: ($baseline/4);
}
}
}
cms/static/sass/views/_export.scss
......@@ -3,12 +3,92 @@
.view-export {
.export-overview {
// UI: basic layout
.content-primary, .content-supplementary {
@include box-sizing(border-box);
float: left;
}
.content-primary {
width: flex-grid(9,12);
margin-right: flex-gutter();
}
.content-supplementary {
width: flex-grid(3,12);
}
// UI: introduction
.introduction {
.title {
@extend %cont-text-sr;
}
}
// UI: export controls
.export-controls {
@include box-sizing(border-box);
@extend %ui-window;
@include clearfix;
padding: 30px 40px;
padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
.title {
@extend %t-title4;
}
.action-export {
@extend %btn-primary-blue;
@extend %t-action1;
display: block;
margin: $baseline 0;
padding: ($baseline*0.75) $baseline;
}
.action {
[class^="icon"] {
@extend %t-icon2;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
.copy {
display: inline-block;
vertical-align: middle;
}
}
}
// UI: export rules
.export-contents {
@include clearfix();
margin: ($baseline*2) 0;
.export-includes, .export-excludes {
width: flex-grid(4,9);
.item-detail {
@extend %t-copy-sub1;
@extend %wipe-last-child;
padding-bottom: ($baseline/4);
border-bottom: 1px solid $gray-l4;
margin-bottom: ($baseline/4);
}
}
.export-includes {
float: left;
}
.export-excludes {
float: right;
}
}
// OLD
.description {
float: left;
width: 62%;
......
cms/static/sass/views/_import.scss
......@@ -17,6 +17,13 @@
width: flex-grid(3,12);
}
// UI: export controls
.export-controls {
@extend %ui-window;
@include clearfix;
padding: 30px 40px;
}
// UI: import form
.import-form {
@include box-sizing(border-box);
......@@ -46,11 +53,23 @@
// UI: default
.action-choose-file {
@extend %btn-primary-blue;
@extend %btn-primary-green;
@extend %t-action1;
display: block;
margin: $baseline 0;
padding: ($baseline*0.75) $baseline;
[class^="icon"] {
@extend %t-icon2;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
.copy {
display: inline-block;
vertical-align: middle;
}
}
// ====================
......
cms/templates/export.html
......@@ -86,36 +86,81 @@ require(["domReady!", "gettext", "js/views/feedback_prompt"], function(doc, gett
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<article class="export-overview">
<div class="description">
<h2>${_("About Exporting Courses")}</h2>
## Translators: ".tar.gz" is a file extension, and should not be translated
<p>${_("When exporting your course, you will receive a .tar.gz formatted file that contains the following course data:")}</p>
<ul>
<li>${_("Course Structure (Sections and sub-section ordering)")}</li>
<li>${_("Individual Units")}</li>
<li>${_("Individual Problems")}</li>
<li>${_("Static Pages")}</li>
<li>${_("Course Assets")}</li>
</ul>
<div class="introduction">
<h2 class="title">${_("About Exporting Courses")}</h2>
<div class="copy">
## Translators: ".tar.gz" is a file extension, and should not be translated
<p>${_("Your course export <strong>will not include</strong>: student data, forum/discussion data, course settings, certificates, grading information, or user data.")}</p>
<p>${_("You can export this course to edit it outside of Studio. Select the Export Course Content button below to download a .{em_start}tar.gz{em_end} file that contains the course content.").format(em_start='<strong>', em_end="</strong>")}</p>
</div>
</div>
<!-- default state -->
<div class="export-form-wrapper">
<form method="post" enctype="multipart/form-data" class="export-form">
<h2>${_("Export Course:")}</h2>
<div class="export-controls">
<h2 class="title">${_("Export a Copy of My Course Data")}</h2>
<a href="${export_url}" class="button-export">${_("Download Files")}</a>
</form>
<ul class="list-actions">
<li class="item-action">
<a class="action action-export action-primary" href="${export_url}">
<i class="icon-download"></i>
<span class="copy">${_("Export Course Content")}</span>
</a>
</li>
</ul>
</div>
<div class="export-contents">
<div class="export-includes">
<h3 class="title-3">${_("Data {em_start}exported with{em_end} your course:").format(em_start='<strong>', em_end="</strong>")}</h3>
<ul class="list-details list-export-includes">
<li class="item-detail">${_("Course Content (all Sections, Sub-sections, and Units)")}</li>
<li class="item-detail">${_("Course Structure")}</li>
<li class="item-detail">${_("Individual Problems")}</li>
<li class="item-detail">${_("Static Pages")}</li>
<li class="item-detail">${_("Course Assets")}</li>
<li class="item-detail">${_("Course Settings")}</li>
</ul>
</div>
<div class="export-excludes">
<h3 class="title-3">${_("Data {em_start}not exported{em_end} with your course:").format(em_start='<strong>', em_end="</strong>")}</h3>
<ul class="list-details list-export-excludes">
<li class="item-detail">${_("User Data")}</li>
<li class="item-detail">${_("Course Team Data")}</li>
<li class="item-detail">${_("Forum/discussion Data")}</li>
<li class="item-detail">${_("Certificates")}</li>
</ul>
</div>
</div>
</article>
</div>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">${_("Why export my course?")}</h3>
<ul class="list-details">
<li class="item-detail">${_("Edit the course XML directly, then import the modified course.")}</li>
<li class="item-detail">${_("Store a backup of your course in its current state.")}</li>
<li class="item-detail">${_("Import the course into another course instance, to create a customized version of your course.")}</li>
</ul>
</div>
<div class="bit">
<h3 class="title-3">${_("Opening the downloaded file")}</h3>
<p>${_("Extract the .tar.gz with an archive program on your computer. Extracted data includes the course.xml file, as well as subfolders containing course content.")}</p>
</div>
<div class="bit">
## Translators: ".tar.gz" is a file extension, and should not be translated
<h3 class="title-3">${_("Course Team Data")}</h3>
<p>${_("Note that course team data is not exported, and that course team data is not changed when importing a course.")}</p>
</div>
</aside>
</section>
</div>
</%block>
cms/templates/import.html
......@@ -34,7 +34,10 @@
<p class="error-block"></p>
<a href="#" class="action action-choose-file choose-file-button">${_("Choose File")}</a>
<a href="#" class="action action-choose-file choose-file-button">
<i class="icon-upload"></i>
<span class="copy">${_("Choose a File to Import")}</span>
</a>
<div class="wrapper wrapper-file-name file-name-block">
<h3 class="title">
......@@ -132,6 +135,13 @@
## 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>
<div class="bit">
## Translators: ".tar.gz" is a file extension, and should not be translated
<h3 class="title-3">${_("Course Team Info and Exporting/Importing")}</h3>
<p>${_("Please note that when importing course content, your course team info will not be changed by the imported course's information.")}</p>
</div>
</aside>
</section>
</div>
......
common/static/sass/_mixins.scss
......@@ -80,6 +80,26 @@
%ui-depth5 { z-index: 100000; }
// extends - UI - utility - nth-type style clearing
%wipe-first-child {
&:first-child {
margin-top: 0;
border-top: none;
padding-top: 0;
}
}
// extends - UI - utility - nth-type style clearing
%wipe-last-child {
&:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
}
// extends - UI - buttons
%ui-btn {
@include box-sizing(border-box);
......
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