Commit 109ccf6c by Frances Botsford Committed by David Baumgold

initial html, sass, and js for textbook uploader; added alternate upload CTA in content area

parent cd7a4483
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
body.course.textbooks { body.course.textbooks {
.no-textbook-content {
margin: $baseline*2;
padding: $baseline*2;
background-color: #ddd;
text-align: center;
}
form { form {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(0 1px 2px $shadow-l1); @include box-shadow(0 1px 2px $shadow-l1);
...@@ -17,14 +24,22 @@ body.course.textbooks { ...@@ -17,14 +24,22 @@ body.course.textbooks {
.action-add-chapter { .action-add-chapter {
@extend .t-action2; @extend .t-action2;
@include grey-button; //@include grey-button;
@include transition(all .15s); @include transition(all .15s);
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
border: 1px solid #B3C4DA; border-radius: 5px;
padding: ($baseline/5) $baseline; border: none;
padding: $baseline;
background-color: #DFE5EF;
color: #8EABBE;
font-weight: 600; font-weight: 600;
&:hover {
background: #5597DD;
color: #fff;
}
} }
.action-primary { .action-primary {
...@@ -214,5 +229,16 @@ body.course.textbooks { ...@@ -214,5 +229,16 @@ body.course.textbooks {
} }
} }
.wrapper-prompt-assetupload .prompt {
width: $baseline*20;
h2 {
color: $gray;
font-weight: bold;
}
}
} }
...@@ -10,5 +10,5 @@ ...@@ -10,5 +10,5 @@
<span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span> <span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>
<button class="action action-uploadasset"><%= gettext("Upload Asset") %></button> <button class="action action-uploadasset"><%= gettext("Upload Asset") %></button>
</div> </div>
<a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr">delete chapter</span></a> <a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
</li> </li>
<form id="edit_textbook_form" class="edit-textbook"> <form id="edit_textbook_form" class="edit-textbook">
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div> <div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div>
<fieldset> <fieldset>
<legend class="sr">Required information to edit or add a textbook and chapters</legend> <legend class="sr"><%= gettext("Required information to edit or add a textbook and chapters") %></legend>
<ol class="list-input"> <ol class="list-input">
<li class="add-textbook-name field text required"> <li class="add-textbook-name field text required">
<div class="input-wrap"> <div class="input-wrap">
......
<div id="prompt-assetupload" class="wrapper wrapper-prompt wrapper-prompt-assetupload" aria-describedby="prompt-assetupload-description" aria-labelledby="prompt-assetupload-title" role="dialog" aria-hidden="false">
<div class="prompt confirm">
<div class="copy">
<form class="upload-dialog" method="POST" action="<%= url %>" enctype="multipart/form-data"> <form class="upload-dialog" method="POST" action="<%= url %>" enctype="multipart/form-data">
<h3><%= title %></h3> <h2><%= title %></h2>
<p><%= message %></p> <p id="prompt-assetupload-description" class="message"><%= message %></p>
<input type="file" name="file" /> <input type="file" name="file" />
<% if(uploading) { %> <% if(uploading) { %>
<% if (uploadedBytes && totalBytes) { %> <% if (uploadedBytes && totalBytes) { %>
...@@ -10,7 +14,17 @@ ...@@ -10,7 +14,17 @@
<% } %> <% } %>
<% } %> <% } %>
<div class="actions"> <div class="actions">
<input type="button" class="button action-upload" value="Upload" <% if (!selectedFile) { %>disabled="disabled"<% } %> /> <h3 class="sr"><%= gettext('Form Actions') %></h3>
<input type="button" class="button action-cancel" value="Cancel" /> <ul>
<li class="nav-item">
<input type="button" class="button action-upload" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
</li>
<li class="nav-item">
<input type="button" class="button action-cancel" value="<%= gettext('Cancel') %>" />
</li>
</ul>
</div> </div>
</form> </form>
</div>
</div>
...@@ -115,6 +115,9 @@ CMS.Views.ChapterEdit = Backbone.View.extend({ ...@@ -115,6 +115,9 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
}) })
var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model}) var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model})
$(".wrapper-view").append(view.render().el) $(".wrapper-view").append(view.render().el)
$body.addClass('prompt-is-shown');
$('.wrapper-prompt').addClass('is-shown').attr('aria-hidden','false');
} }
}) })
CMS.Models.FileUpload = Backbone.Model.extend({ CMS.Models.FileUpload = Backbone.Model.extend({
...@@ -169,6 +172,9 @@ CMS.Views.UploadDialog = Backbone.View.extend({ ...@@ -169,6 +172,9 @@ CMS.Views.UploadDialog = Backbone.View.extend({
removeSelf: function(e) { removeSelf: function(e) {
if(e && e.preventDefault) { e.preventDefault(); } if(e && e.preventDefault) { e.preventDefault(); }
this.remove(); this.remove();
$body.removeClass('prompt-is-shown');
$('.wrapper-prompt').removeClass('is-shown').attr('aria-hidden','true');
}, },
upload: function(e) { upload: function(e) {
this.model.set('uploading', true); this.model.set('uploading', true);
...@@ -220,6 +226,8 @@ $(function() { ...@@ -220,6 +226,8 @@ $(function() {
}) })
}) })
</script> </script>
</%block> </%block>
<%block name="content"> <%block name="content">
...@@ -253,7 +261,17 @@ $(function() { ...@@ -253,7 +261,17 @@ $(function() {
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="no-textbook-content">
<p>You haven't added any textbooks to this course yet.</p>
<p><a href="#" class="button upload-button new-button">Add your first textbook</a></p>
</div>
</div> </div>
</section> </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