initial html, sass, and js for textbook uploader; added alternate upload CTA in content area
This commit is contained in:
committed by
David Baumgold
parent
cd7a448384
commit
109ccf6c5d
@@ -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 {
|
|||||||
|
|
||||||
.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 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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>
|
<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>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<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">
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
|
<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 @@
|
|||||||
<% } %>
|
<% } %>
|
||||||
<% } %>
|
<% } %>
|
||||||
<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({
|
|||||||
})
|
})
|
||||||
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({
|
|||||||
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() {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
</%block>
|
</%block>
|
||||||
|
|
||||||
<%block name="content">
|
<%block name="content">
|
||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user