Skip to content

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

updated textbook page html and sass, and added basic styling for error on wrong file type

parent e8b79dc6
Showing with 292 additions and 206 deletions
cms/static/js/models/textbook.js
...@@ -101,7 +101,7 @@ CMS.Models.FileUpload = Backbone.Model.extend({ ...@@ -101,7 +101,7 @@ CMS.Models.FileUpload = Backbone.Model.extend({
}, },
validate: function(attrs, options) { validate: function(attrs, options) {
if(attrs.selectedFile && attrs.selectedFile.type !== "application/pdf") { if(attrs.selectedFile && attrs.selectedFile.type !== "application/pdf") {
return gettext("Only PDF files can be uploaded"); return gettext("Only PDF files can be uploaded. Please select a file ending in .pdf to upload.");
} }
} }
}); });
cms/static/js/views/textbook.js
...@@ -72,6 +72,7 @@ CMS.Views.TextbookEdit = Backbone.View.extend({ ...@@ -72,6 +72,7 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
this.listenTo(this.model.collection, "editOne", this.remove); this.listenTo(this.model.collection, "editOne", this.remove);
}, },
tagName: "section", tagName: "section",
className: "textbook",
render: function() { render: function() {
this.$el.html(this.template({ this.$el.html(this.template({
name: this.model.escape('name'), name: this.model.escape('name'),
...@@ -155,7 +156,7 @@ CMS.Views.ListTextbooks = Backbone.View.extend({ ...@@ -155,7 +156,7 @@ CMS.Views.ListTextbooks = Backbone.View.extend({
this.listenTo(this.collection, 'all', this.render); this.listenTo(this.collection, 'all', this.render);
}, },
tagName: "div", tagName: "div",
className: "textbooks", className: "textbooks-list",
render: function() { render: function() {
var textbooks = this.collection; var textbooks = this.collection;
if(textbooks.length === 0) { if(textbooks.length === 0) {
...@@ -219,7 +220,7 @@ CMS.Views.ChapterEdit = Backbone.View.extend({ ...@@ -219,7 +220,7 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
var msg = new CMS.Models.FileUpload({ var msg = new CMS.Models.FileUpload({
title: _.str.sprintf(gettext("Upload a new asset to %s"), title: _.str.sprintf(gettext("Upload a new asset to %s"),
section.escape('name')), section.escape('name')),
message: "This is sample text about asset upload requirements, like no bigger than 2MB, must be in PDF format or whatever." message: "Files must be in PDF format."
}); });
var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model}); var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model});
$(".wrapper-view").after(view.show().el); $(".wrapper-view").after(view.show().el);
......
cms/static/sass/views/_textbooks.scss
...@@ -27,231 +27,320 @@ body.course.textbooks { ...@@ -27,231 +27,320 @@ body.course.textbooks {
.textbook { .textbook {
@extend .window; @extend .window;
position: relative;
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
}
form { .view-textbook {
@include box-sizing(border-box);
@include border-radius(2px);
width: 100%;
background: $white;
fieldset { header {
margin-bottom: $baseline; margin-bottom: 0;
} border-bottom: 0;
}
.actions { .textbook-title {
@extend .t-title4;
margin-right: 280px;
font-weight: bold;
}
.action-add-chapter { .ui-toggle-expansion {
@extend .t-action2; @include transition(rotate .15s ease-in-out .25s);
//@include grey-button; @include font-size(21);
@include transition(all .15s); display: inline-block;
display: block; width: 15px;
width: 100%; vertical-align: text-bottom;
margin-bottom: ($baseline*1.5); }
border-radius: 5px;
border: none; &.is-selectable {
padding: $baseline; cursor: pointer;
background-color: $blue-l3;
color: $white;
font-weight: 600;
&:hover { &:hover {
background: #5597DD; color: $blue;
.ui-toggle-expansion {
color: $blue;
}
} }
} }
.action-primary { .chapters {
@include blue-button; margin-left: $baseline;
@extend .t-action2;
@include transition(all .15s); .chapter {
display: inline-block; @include font-size(12);
padding: ($baseline/5) $baseline; margin-bottom: ($baseline/4);
font-weight: 600; border-bottom: 1px solid $gray-l4;
text-transform: uppercase;
} .chapter-name {
display: inline-block;
width: 45%;
margin-right: ($baseline/2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.action-secondary { .chapter-asset-path {
@include grey-button; display: inline-block;
@extend .t-action2; width: 50%;
@include transition(all .15s); color: $gray-l1;
display: inline-block; }
padding: ($baseline/5) $baseline; }
font-weight: 600; }
text-transform: uppercase;
}
.actions {
position: absolute;
top: $baseline;
right: $baseline;
} .action {
display: inline-block;
margin-right: ($baseline/4);
.copy { .view {
@include font-size(12); color: $gray;
margin: ($baseline) 0 ($baseline/2) 0; @include font-size(12);
color: $gray;
&:hover {
color: $blue;
}
}
strong { .edit {
font-weight: 600; @include blue-button;
} @extend .t-action4;
}
.delete {
@include grey-button;
}
}
}
.list-input, }
.textbook {
list-style: none;
.field { }
margin: 0 0 ($baseline*0.75) 0;
&:last-child {
margin-bottom: 0; .edit-textbook {
@include box-sizing(border-box);
@include border-radius(2px);
width: 100%;
background: $white;
fieldset {
margin-bottom: $baseline;
} }
&.required { .actions {
.action-add-chapter {
@extend .t-action2;
@include transition(all .15s);
display: block;
width: 100%;
margin-bottom: ($baseline*1.5);
border-radius: 5px;
border: none;
padding: $baseline;
background-color: $blue-l3;
color: $white;
font-weight: 600;
&:hover {
background: #5597DD;
}
}
label { .action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600; font-weight: 600;
text-transform: uppercase;
} }
label:after { .action-secondary {
margin-left: ($baseline/4); @include grey-button;
content: "*"; @extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
} }
}
label, input, textarea {
display: block;
} }
label { .copy {
@extend .t-copy-sub1; @include font-size(12);
@include transition(color, 0.15s, ease-in-out); margin: ($baseline) 0 ($baseline/2) 0;
margin: 0 0 ($baseline/4) 0; color: $gray;
&.is-focused {
color: $blue; strong {
font-weight: 600;
} }
}
&.add-textbook-name label {
@extend .t-title5;
} }
input, textarea { .list-input,
@extend .t-copy-base; .textbook-fields {
height: 100%; list-style: none;
width: 100%;
padding: ($baseline/2);
&.long { .field {
width: 100%; margin: 0 0 ($baseline*0.75) 0;
}
&.short { &:last-child {
width: 25%; margin-bottom: 0;
} }
::-webkit-input-placeholder { &.required {
color: $gray-l4;
}
:-moz-placeholder { label {
color: $gray-l3; font-weight: 600;
} }
::-moz-placeholder { label:after {
color: $gray-l3; margin-left: ($baseline/4);
} content: "*";
}
}
:-ms-input-placeholder { label, input, textarea {
color: $gray-l3; display: block;
} }
&:focus { label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
+ .tip { &.is-focused {
color: $gray; color: $blue;
}
} }
}
}
textarea.long {
height: ($baseline*5);
}
input[type="checkbox"] { &.add-textbook-name label {
display: inline-block; @extend .t-title5;
margin-right: ($baseline/4); }
width: auto;
height: auto;
& + label { input, textarea {
display: inline-block; @extend .t-copy-base;
} height: 100%;
} width: 100%;
padding: ($baseline/2);
.tip { &.long {
@extend .t-copy-sub2; width: 100%;
@include transition(color, 0.15s, ease-in-out); }
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
}
.field-group { &.short {
@include clearfix(); width: 25%;
margin: 0 0 ($baseline/2) 0; }
.field {
display: block;
width: 46.5%;
border-bottom: none;
margin: 0 $baseline 0 0;
padding: ($baseline/4) 0 0 0;
float: left;
position: relative;
input, textarea {
width: 100%;
}
.action-upload { ::-webkit-input-placeholder {
@extend .t-action4; color: $gray-l4;
@include blue-button; }
@include transition(all .15s);
@include font-size(12); :-moz-placeholder {
font-weight: 600; color: $gray-l3;
text-align: center; }
position: absolute;
top: 2px; ::-moz-placeholder {
right: 0; color: $gray-l3;
/* height: 40px; }
top: 33px;
right: 2px; */ :-ms-input-placeholder {
padding: 3px ($baseline/2) 1px ($baseline/2); color: $gray-l3;
}
&:focus {
+ .tip {
color: $gray;
}
}
}
textarea.long {
height: ($baseline*5);
}
input[type="checkbox"] {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;
& + label {
display: inline-block;
}
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
} }
} .field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
.field {
display: block;
width: 46%;
border-bottom: none;
margin: 0 ($baseline*.75) 0 0;
padding: ($baseline/4) 0 0 0;
float: left;
position: relative;
input, textarea {
width: 100%;
}
.action-upload {
@extend .t-action4;
@include blue-button;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
position: absolute;
top: 3px;
right: 0;
padding: 1px ($baseline/2) 2px ($baseline/2);
}
.action-close { }
@include transition(color 0.25s ease-in-out);
@include font-size(18);
display: inline-block;
margin-top: ($baseline*2);
border: 0;
padding: 0;
background: transparent;
color: $gray-l1;
&:hover { .action-close {
color: $blue; @include transition(color 0.25s ease-in-out);
@include font-size(18);
display: inline-block;
margin-top: ($baseline*2);
border: 0;
padding: 0;
background: transparent;
color: $gray-l1;
&:hover {
color: $blue;
}
} }
}
} }
}
} }
} }
} }
...@@ -284,13 +373,13 @@ body.course.textbooks { ...@@ -284,13 +373,13 @@ body.course.textbooks {
background-color: $white; background-color: $white;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: $baseline*20; width: $baseline*23;
text-align: left; text-align: left;
.title { .title {
@include font-size(18); @include font-size(18);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
font-weight: bold; font-weight: 600;
color: $black; color: $black;
} }
...@@ -299,6 +388,13 @@ body.course.textbooks { ...@@ -299,6 +388,13 @@ body.course.textbooks {
color: $gray; color: $gray;
} }
.error {
@extend .t-copy-sub2;
margin-top: ($baseline*.75);
font-weight: 600;
color: $red;
}
form { form {
border: 7px solid #333333; border: 7px solid #333333;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.7); box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
...@@ -315,11 +411,11 @@ body.course.textbooks { ...@@ -315,11 +411,11 @@ body.course.textbooks {
.wrapper-progress { .wrapper-progress {
@include box-shadow(inset 0 0 3px $shadow-d1); @include box-shadow(inset 0 0 3px $shadow-d1);
display: block;
margin-top: $baseline; margin-top: $baseline;
border-radius: ($baseline*.75); border-radius: ($baseline*.75);
background-color: $gray-l4; background-color: $gray-l5;
padding: 2px 8px 1px 8px; padding: 1px 8px 2px 8px;
height: 25px; height: 25px;
progress { progress {
...@@ -328,7 +424,7 @@ body.course.textbooks { ...@@ -328,7 +424,7 @@ body.course.textbooks {
width: 100%; width: 100%;
border: none; border: none;
border-radius: ($baseline*.75); border-radius: ($baseline*.75);
background-color: $gray-l4; background-color: $gray-l5;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background-color: transparent; background-color: transparent;
...@@ -336,12 +432,12 @@ body.course.textbooks { ...@@ -336,12 +432,12 @@ body.course.textbooks {
} }
&::-webkit-progress-value { &::-webkit-progress-value {
background-color: $green-s1; background-color: $pink;
border-radius: ($baseline*.75); border-radius: ($baseline*.75);
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: $green-s1; background-color: $pink;
border-radius: ($baseline*.75); border-radius: ($baseline*.75);
} }
...@@ -353,7 +449,7 @@ body.course.textbooks { ...@@ -353,7 +449,7 @@ body.course.textbooks {
@include box-shadow(inset 0 1px 2px $shadow); @include box-shadow(inset 0 1px 2px $shadow);
border-top: 1px solid $gray-l1; border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
background: $gray-l4; background: $gray-l6;
.action-item { .action-item {
@extend .t-action4; @extend .t-action4;
...@@ -366,6 +462,7 @@ body.course.textbooks { ...@@ -366,6 +462,7 @@ body.course.textbooks {
} }
.action-upload { .action-upload {
@extend .btn-primary-blue;
font-weight: 600; font-weight: 600;
color: $white; color: $white;
} }
......
cms/templates/js/textbook-edit.underscore
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</div> </div>
<% } %> <% } %>
<fieldset class="textbook"> <fieldset class="textbook-fields">
<legend class="sr"><%= gettext("Textbook information") %></legend> <legend class="sr"><%= gettext("Textbook information") %></legend>
<div class="input-wrap field text required add-textbook-name"> <div class="input-wrap field text required add-textbook-name">
<label for="textbook-name-input"><%= gettext("Textbook Name") %></label> <label for="textbook-name-input"><%= gettext("Textbook Name") %></label>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span> <span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
</div> </div>
</fieldset> </fieldset>
<fieldset class="chapters"> <fieldset class="chapters-fields">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend> <legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<ol class="chapters list-input enum"></ol> <ol class="chapters list-input enum"></ol>
</fieldset> </fieldset>
......
cms/templates/js/textbook-show.underscore
<div class="view-textbook">
<header> <header>
<h3 class="textbook-title"><%= name %></h3> <h3 class="textbook-title"><%= name %></h3>
</header> </header>
...@@ -5,21 +6,23 @@ ...@@ -5,21 +6,23 @@
<% if(chapters.length > 1) {%> <% if(chapters.length > 1) {%>
<p><a href="#" class="chapter-toggle <p><a href="#" class="chapter-toggle
<% if(showChapters){ print('hide'); } else { print('show'); } %>-chapters"> <% if(showChapters){ print('hide'); } else { print('show'); } %>-chapters">
<i class="icon-chevron-<% if(showChapters){ print('down'); } else { print('right'); } %>"></i> <i class="ui-toggle-expansion icon-caret-<% if(showChapters){ print('down'); } else { print('right'); } %>"></i>
<%= chapters.length %> PDF Chapters <%= chapters.length %> PDF Chapters
</a></p> </a></p>
<% } else if(chapters.length === 1) { %> <% } else if(chapters.length === 1) { %>
<%= chapters.at(0).get("asset_path") %> <p>
<%= chapters.at(0).get("asset_path") %>
</p>
<% } %> <% } %>
<ul class="actions textbook-actions"> <ul class="actions textbook-actions">
<li> <li class="action action-view">
<a href="#" class="view"><%= gettext("view in course") %></a> <a href="#" class="view"><%= gettext("view in course") %></a>
</li> </li>
<li> <li class="action action-edit">
<button class="edit"><%= gettext("Edit") %></button> <button class="edit"><%= gettext("Edit") %></button>
</li> </li>
<li> <li class="action action-delete">
<button class="delete"><%= gettext("Delete") %></button> <button class="delete"><%= gettext("Delete") %></button>
</li> </li>
</ul> </ul>
...@@ -29,9 +32,11 @@ ...@@ -29,9 +32,11 @@
<% if(showChapters) { %> <% if(showChapters) { %>
<ol class="chapters"> <ol class="chapters">
<% chapters.each(function(chapter) { %> <% chapters.each(function(chapter) { %>
<li><span class="chapter-name"><%= chapter.get('name') %></span> <li class="chapter">
<span class="chapter-name"><%= chapter.get('name') %></span>
<span class="chapter-asset-path"><%= chapter.get('asset_path') %></span> <span class="chapter-asset-path"><%= chapter.get('asset_path') %></span>
</li> </li>
<% }) %> <% }) %>
</ol> </ol>
<% } %> <% } %>
</div>
cms/templates/js/upload-dialog.underscore
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<h3 class="sr"><%= gettext('Form Actions') %></h3> <h3 class="sr"><%= gettext('Form Actions') %></h3>
<ul> <ul>
<li class="action-item"> <li class="action-item">
<input type="button" class="button action-upload btn-primary-blue" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> /> <input type="button" class="button action-upload" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
</li> </li>
<li class="action-item"> <li class="action-item">
<input type="button" class="button action-cancel" value="<%= gettext('Cancel') %>" /> <input type="button" class="button action-cancel" value="<%= gettext('Cancel') %>" />
......
cms/templates/textbooks.html
...@@ -71,23 +71,6 @@ $(function() { ...@@ -71,23 +71,6 @@ $(function() {
<section class="content"> <section class="content">
<article class="content-primary" role="main"> <article class="content-primary" role="main">
<!--
<section id="textbook1" class="textbook">
<header>
<h3 class="textbook-title">
[textbook name]
</h3>
</header>
<ul class="chapter-list">
<li class="chapter"></li>
</ul>
</section>
-->
</article> </article>
<aside class="content-supplementary" role="complimentary"> <aside class="content-supplementary" role="complimentary">
......
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