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