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 @@
body.course.textbooks {
.no-textbook-content {
margin: $baseline*2;
padding: $baseline*2;
background-color: #ddd;
text-align: center;
}
form {
@include box-sizing(border-box);
@include box-shadow(0 1px 2px $shadow-l1);
......@@ -17,14 +24,22 @@ body.course.textbooks {
.action-add-chapter {
@extend .t-action2;
@include grey-button;
//@include grey-button;
@include transition(all .15s);
display: block;
width: 100%;
margin-bottom: ($baseline*1.5);
border: 1px solid #B3C4DA;
padding: ($baseline/5) $baseline;
border-radius: 5px;
border: none;
padding: $baseline;
background-color: #DFE5EF;
color: #8EABBE;
font-weight: 600;
&:hover {
background: #5597DD;
color: #fff;
}
}
.action-primary {
......@@ -214,5 +229,16 @@ body.course.textbooks {
}
}
.wrapper-prompt-assetupload .prompt {
width: $baseline*20;
h2 {
color: $gray;
font-weight: bold;
}
}
}
......@@ -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>
<button class="action action-uploadasset"><%= gettext("Upload Asset") %></button>
</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>
<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>
<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">
<li class="add-textbook-name field text required">
<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">
<h3><%= title %></h3>
<p><%= message %></p>
<h2><%= title %></h2>
<p id="prompt-assetupload-description" class="message"><%= message %></p>
<input type="file" name="file" />
<% if(uploading) { %>
<% if (uploadedBytes && totalBytes) { %>
......@@ -10,7 +14,17 @@
<% } %>
<% } %>
<div class="actions">
<input type="button" class="button action-upload" value="Upload" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
<input type="button" class="button action-cancel" value="Cancel" />
<h3 class="sr"><%= gettext('Form Actions') %></h3>
<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>
</form>
</div>
</div>
......@@ -115,6 +115,9 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
})
var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model})
$(".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({
......@@ -169,6 +172,9 @@ CMS.Views.UploadDialog = Backbone.View.extend({
removeSelf: function(e) {
if(e && e.preventDefault) { e.preventDefault(); }
this.remove();
$body.removeClass('prompt-is-shown');
$('.wrapper-prompt').removeClass('is-shown').attr('aria-hidden','true');
},
upload: function(e) {
this.model.set('uploading', true);
......@@ -220,6 +226,8 @@ $(function() {
})
})
</script>
</%block>
<%block name="content">
......@@ -253,7 +261,17 @@ $(function() {
</ul>
</nav>
</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>
</section>
</div>
</%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