Skip to content

E
edx-platform
Commit 2321a2c5 by Frances Botsford Committed by David Baumgold
Options

more updates to PDF textbook UI

parent ef81556c
Showing with 155 additions and 82 deletions
cms/static/js/models/textbook.js
......@@ -59,14 +59,14 @@ CMS.Models.Textbook = Backbone.AssociatedModel.extend({
},
validate: function(attrs, options) {
if (!attrs.name) {
return "name is required";
return "Textbook name is required";
}
if (attrs.chapters.length === 0) {
return "at least one asset is required";
return "Please add at least one asset";
} else if (attrs.chapters.length === 1) {
// only asset_path is required: we don't need a name
if (!attrs.chapters.first().get('asset_path')) {
return "at least one asset is required";
return "Please add at least one asset";
}
} else {
// validate all chapters
......@@ -77,7 +77,7 @@ CMS.Models.Textbook = Backbone.AssociatedModel.extend({
}
});
if(!allChaptersValid) {
return "invalid chapter";
return "All chapters must have a name and asset";
}
}
}
......@@ -119,9 +119,9 @@ CMS.Models.Chapter = Backbone.AssociatedModel.extend({
},
validate: function(attrs, options) {
if(!attrs.name && !attrs.asset_path) {
return "name and asset_path are both required";
return "Chapter name and asset_path are both required";
} else if(!attrs.name) {
return "name is required";
return "Chapter name is required";
} else if (!attrs.asset_path) {
return "asset_path is required";
}
......
cms/static/sass/views/_textbooks.scss
......@@ -105,12 +105,8 @@ body.course.textbooks {
margin-right: ($baseline/4);
.view {
color: $gray;
@include font-size(12);
&:hover {
color: $blue;
}
@include blue-button;
@extend .t-action4;
}
.edit {
......@@ -119,7 +115,13 @@ body.course.textbooks {
}
.delete {
@include grey-button;
@extend .btn-non;
span {
@extend .text-sr;
}
}
}
......@@ -292,6 +294,16 @@ body.course.textbooks {
margin-top: ($baseline/4);
color: $gray-l3;
}
&.error {
label {
color: $red;
}
input {
border-color: $red;
}
}
}
.field-group {
......@@ -312,16 +324,10 @@ body.course.textbooks {
}
.action-upload {
@extend .t-action4;
@include blue-button;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
@extend .btn-flat-outline;
position: absolute;
top: 3px;
right: 0;
padding: 1px ($baseline/2) 2px ($baseline/2);
}
}
......@@ -330,11 +336,12 @@ body.course.textbooks {
@include transition(color 0.25s ease-in-out);
@include font-size(18);
display: inline-block;
float: right;
margin-top: ($baseline*2);
border: 0;
padding: 0;
background: transparent;
color: $gray-l1;
color: $blue-l3;
&:hover {
color: $blue;
......@@ -345,21 +352,13 @@ body.course.textbooks {
.action-add-chapter {
@extend .t-action2;
@include transition(all .15s);
@extend .btn-flat-outline;
@include font-size(16);
display: block;
width: 100%;
margin: ($baseline*1.5) 0 0 0;
border-radius: 5px;
border: none;
padding: $baseline;
background-color: $blue-l3;
color: $white;
padding: ($baseline/2);
font-weight: 600;
&:hover {
background: #5597DD;
}
}
}
}
......@@ -388,12 +387,14 @@ body.course.textbooks {
}
.dialog {
@include box-shadow(0px 0px 7px $shadow-d1);
@include box-sizing(border-box);
@include border-radius(($baseline/5));
background-color: $white;
background-color: $gray-l4;
display: inline-block;
vertical-align: middle;
width: $baseline*23;
padding: 7px;
text-align: left;
.title {
......@@ -409,70 +410,81 @@ body.course.textbooks {
}
.error {
@extend .t-copy-sub2;
margin-top: ($baseline*.75);
font-weight: 600;
color: $red;
color: $white;
}
form {
border: 7px solid #333333;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
background-color: transparent;
padding: 0;
.form-content {
@include box-shadow(0 0 3px $shadow-d1);
padding: ($baseline*1.5);
background-color: $white;
}
input[type="file"] {
@include font-size(12);
}
.wrapper-progress {
@include box-shadow(inset 0 0 3px $shadow-d1);
display: block;
.status-upload {
height: 30px;
margin-top: $baseline;
border-radius: ($baseline*.75);
background-color: $gray-l5;
padding: 1px 8px 2px 8px;
height: 25px;
progress {
display: inline-block;
vertical-align: middle;
width: 100%;
border: none;
.wrapper-progress {
@include box-shadow(inset 0 0 3px $shadow-d1);
display: block;
border-radius: ($baseline*.75);
background-color: $gray-l5;
padding: 1px 8px 2px 8px;
height: 25px;
&::-webkit-progress-bar {
background-color: transparent;
progress {
display: inline-block;
vertical-align: middle;
width: 100%;
border: none;
border-radius: ($baseline*.75);
}
background-color: $gray-l5;
&::-webkit-progress-bar {
background-color: transparent;
border-radius: ($baseline*.75);
}
&::-webkit-progress-value {
background-color: $pink;
border-radius: ($baseline*.75);
}
&::-moz-progress-bar {
background-color: $pink;
border-radius: ($baseline*.75);
}
&::-webkit-progress-value {
background-color: $pink;
border-radius: ($baseline*.75);
}
&::-moz-progress-bar {
background-color: $pink;
border-radius: ($baseline*.75);
}
.success {
color: $green;
[class^="icon-"] {
@include font-size(20);
display: inline-block;
margin-right: ($baseline/4);
vertical-align: text-bottom;
}
}
}
}
}
.actions {
@include box-shadow(inset 0 1px 2px $shadow);
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
background: $gray-l6;
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
.action-item {
@extend .t-action4;
@include font-size(12);
display: inline-block;
margin-right: ($baseline*0.75);
......@@ -483,19 +495,28 @@ body.course.textbooks {
.action-upload {
@extend .btn-primary-blue;
font-weight: 600;
color: $white;
font-weight: 600;
&[disabled="disabled"] {
background-color: $gray-l4;
color: $gray;
border: 1px solid $gray;
}
}
.action-cancel {
@extend .t-action4;
border: 0;
background: none;
font-weight: 600;
color: $blue;
&:hover {
color: $blue-s3;
}
}
}
......
cms/templates/js/edit-chapter.underscore
......@@ -9,4 +9,4 @@
<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-upload"><%= gettext("Upload Asset") %></button>
</div>
<a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
<a href="" class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
cms/templates/js/edit-textbook.underscore
<form class="edit-textbook" id="edit_textbook_form">
<div class="wrapper-form">
<% if (error) { %>
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error">
<div id="edit_textbook_error" class="message message-status message-status error is-shown" name="edit_textbook_error">
<%= error %>
</div>
<% } %>
......
cms/templates/js/show-textbook.underscore
......@@ -34,13 +34,13 @@
<ul class="actions textbook-actions">
<li class="action action-view">
<a href="#" class="view"><%= gettext("view in course") %></a>
<button class="view"><%= gettext("View Live") %></button>
</li>
<li class="action action-edit">
<button class="edit"><%= gettext("Edit") %></button>
</li>
<li class="action action-delete">
<button class="delete"><%= gettext("Delete") %></button>
<button class="delete action-icon"><i class="icon-trash"></i><span><%= gettext("Delete") %></span></button>
</li>
</ul>
......
cms/templates/js/upload-dialog.underscore
......@@ -9,23 +9,33 @@
<form class="upload-dialog" method="POST" action="<%= url %>" enctype="multipart/form-data">
<div class="form-content">
<h2 class="title"><%= title %></h2>
<% if(error) {%>
<div id="upload_error" class="message message-status message-status error is-shown" name="upload_error">
<p><%= error %></p>
</div>
<% } %>
<p id="dialog-assetupload-description" class="message"><%= message %></p>
<input type="file" name="file" />
<% if(error) {%><p class="error"><%= error %></p><% } %>
<% if(uploading) { %>
<% if (uploadedBytes && totalBytes) { %>
<div class="status-upload">
<% if(uploading) { %>
<div class="wrapper-progress">
<progress value="<%= uploadedBytes %>" max="<%= totalBytes %>"><%= uploadedBytes/totalBytes*100 %>%</progress>
<% if (uploadedBytes && totalBytes) { %>
<progress value="<%= uploadedBytes %>" max="<%= totalBytes %>"><%= uploadedBytes/totalBytes*100 %>%</progress>
<% } else { %>
<progress></progress>
<% } %>
</div>
<% } else { %>
<progress></progress>
<% } %>
<% } %>
<% if(finished) { %>
<strong><%= gettext("Success!") %></strong>
<% } %>
<% if(finished) { %>
<p class="success"><i class="icon-ok"></i><%= gettext("Success!") %></p>
<% } %>
</div>
</div>
<div class="actions">
<h3 class="sr"><%= gettext('Form Actions') %></h3>
<ul>
......
common/static/sass/_mixins.scss
......@@ -190,6 +190,48 @@
}
}
.btn-flat-outline {
@extend .t-action4;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
border-radius: ($baseline/4);
border: 1px solid $blue-l2;
padding: 1px ($baseline/2) 2px ($baseline/2);
background-color: $white;
color: $blue-l2;
&:hover {
border: 1px solid $blue;
background-color: $blue;
color: $white;
}
&.is-disabled,
&[disabled="disabled"]{
border: 1px solid $gray-l2;
background-color: $gray-l4;
color: $gray-l2;
pointer-events: none;
}
}
.btn-non {
@include transition(all .15s);
border: none;
border-radius: ($baseline/4);
background: none;
padding: 3px ($baseline/2);
vertical-align: middle;
color: $gray-l1;
&:hover {
background-color: $gray-l1;
color: $white;
}
}
// UI archetypes - well
.ui-well {
@include box-shadow(inset 0 1px 2px 1px $shadow);
......
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