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 134 additions and 48 deletions
cms/static/js/models/textbook.js
......@@ -101,7 +101,7 @@ CMS.Models.FileUpload = Backbone.Model.extend({
},
validate: function(attrs, options) {
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({
this.listenTo(this.model.collection, "editOne", this.remove);
},
tagName: "section",
className: "textbook",
render: function() {
this.$el.html(this.template({
name: this.model.escape('name'),
......@@ -155,7 +156,7 @@ CMS.Views.ListTextbooks = Backbone.View.extend({
this.listenTo(this.collection, 'all', this.render);
},
tagName: "div",
className: "textbooks",
className: "textbooks-list",
render: function() {
var textbooks = this.collection;
if(textbooks.length === 0) {
......@@ -219,7 +220,7 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
var msg = new CMS.Models.FileUpload({
title: _.str.sprintf(gettext("Upload a new asset to %s"),
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});
$(".wrapper-view").after(view.show().el);
......
cms/static/sass/views/_textbooks.scss
......@@ -27,10 +27,103 @@ body.course.textbooks {
.textbook {
@extend .window;
position: relative;
padding: $baseline ($baseline*1.5);
.view-textbook {
header {
margin-bottom: 0;
border-bottom: 0;
}
form {
.textbook-title {
@extend .t-title4;
margin-right: 280px;
font-weight: bold;
}
.ui-toggle-expansion {
@include transition(rotate .15s ease-in-out .25s);
@include font-size(21);
display: inline-block;
width: 15px;
vertical-align: text-bottom;
}
&.is-selectable {
cursor: pointer;
&:hover {
color: $blue;
.ui-toggle-expansion {
color: $blue;
}
}
}
.chapters {
margin-left: $baseline;
.chapter {
@include font-size(12);
margin-bottom: ($baseline/4);
border-bottom: 1px solid $gray-l4;
.chapter-name {
display: inline-block;
width: 45%;
margin-right: ($baseline/2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
.chapter-asset-path {
display: inline-block;
width: 50%;
color: $gray-l1;
}
}
}
.actions {
position: absolute;
top: $baseline;
right: $baseline;
.action {
display: inline-block;
margin-right: ($baseline/4);
.view {
color: $gray;
@include font-size(12);
&:hover {
color: $blue;
}
}
.edit {
@include blue-button;
@extend .t-action4;
}
.delete {
@include grey-button;
}
}
}
}
.edit-textbook {
@include box-sizing(border-box);
@include border-radius(2px);
width: 100%;
......@@ -44,7 +137,6 @@ body.course.textbooks {
.action-add-chapter {
@extend .t-action2;
//@include grey-button;
@include transition(all .15s);
display: block;
width: 100%;
......@@ -98,7 +190,7 @@ body.course.textbooks {
}
.list-input,
.textbook {
.textbook-fields {
list-style: none;
.field {
......@@ -207,9 +299,9 @@ body.course.textbooks {
.field {
display: block;
width: 46.5%;
width: 46%;
border-bottom: none;
margin: 0 $baseline 0 0;
margin: 0 ($baseline*.75) 0 0;
padding: ($baseline/4) 0 0 0;
float: left;
position: relative;
......@@ -226,12 +318,9 @@ body.course.textbooks {
font-weight: 600;
text-align: center;
position: absolute;
top: 2px;
top: 3px;
right: 0;
/* height: 40px;
top: 33px;
right: 2px; */
padding: 3px ($baseline/2) 1px ($baseline/2);
padding: 1px ($baseline/2) 2px ($baseline/2);
}
}
......@@ -250,7 +339,7 @@ body.course.textbooks {
color: $blue;
}
}
}
}
}
}
......@@ -284,13 +373,13 @@ body.course.textbooks {
background-color: $white;
display: inline-block;
vertical-align: middle;
width: $baseline*20;
width: $baseline*23;
text-align: left;
.title {
@include font-size(18);
margin-bottom: ($baseline/2);
font-weight: bold;
font-weight: 600;
color: $black;
}
......@@ -299,6 +388,13 @@ body.course.textbooks {
color: $gray;
}
.error {
@extend .t-copy-sub2;
margin-top: ($baseline*.75);
font-weight: 600;
color: $red;
}
form {
border: 7px solid #333333;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
......@@ -315,11 +411,11 @@ body.course.textbooks {
.wrapper-progress {
@include box-shadow(inset 0 0 3px $shadow-d1);
display: block;
margin-top: $baseline;
border-radius: ($baseline*.75);
background-color: $gray-l4;
padding: 2px 8px 1px 8px;
background-color: $gray-l5;
padding: 1px 8px 2px 8px;
height: 25px;
progress {
......@@ -328,7 +424,7 @@ body.course.textbooks {
width: 100%;
border: none;
border-radius: ($baseline*.75);
background-color: $gray-l4;
background-color: $gray-l5;
&::-webkit-progress-bar {
background-color: transparent;
......@@ -336,12 +432,12 @@ body.course.textbooks {
}
&::-webkit-progress-value {
background-color: $green-s1;
background-color: $pink;
border-radius: ($baseline*.75);
}
&::-moz-progress-bar {
background-color: $green-s1;
background-color: $pink;
border-radius: ($baseline*.75);
}
......@@ -353,7 +449,7 @@ body.course.textbooks {
@include box-shadow(inset 0 1px 2px $shadow);
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
background: $gray-l4;
background: $gray-l6;
.action-item {
@extend .t-action4;
......@@ -366,6 +462,7 @@ body.course.textbooks {
}
.action-upload {
@extend .btn-primary-blue;
font-weight: 600;
color: $white;
}
......
cms/templates/js/textbook-edit.underscore
......@@ -5,7 +5,7 @@
</div>
<% } %>
<fieldset class="textbook">
<fieldset class="textbook-fields">
<legend class="sr"><%= gettext("Textbook information") %></legend>
<div class="input-wrap field text required add-textbook-name">
<label for="textbook-name-input"><%= gettext("Textbook Name") %></label>
......@@ -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>
</div>
</fieldset>
<fieldset class="chapters">
<fieldset class="chapters-fields">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<ol class="chapters list-input enum"></ol>
</fieldset>
......
cms/templates/js/textbook-show.underscore
<div class="view-textbook">
<header>
<h3 class="textbook-title"><%= name %></h3>
</header>
......@@ -5,21 +6,23 @@
<% if(chapters.length > 1) {%>
<p><a href="#" class="chapter-toggle
<% 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
</a></p>
<% } else if(chapters.length === 1) { %>
<p>
<%= chapters.at(0).get("asset_path") %>
</p>
<% } %>
<ul class="actions textbook-actions">
<li>
<li class="action action-view">
<a href="#" class="view"><%= gettext("view in course") %></a>
</li>
<li>
<li class="action action-edit">
<button class="edit"><%= gettext("Edit") %></button>
</li>
<li>
<li class="action action-delete">
<button class="delete"><%= gettext("Delete") %></button>
</li>
</ul>
......@@ -29,9 +32,11 @@
<% if(showChapters) { %>
<ol class="chapters">
<% 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>
</li>
<% }) %>
</ol>
<% } %>
</div>
cms/templates/js/upload-dialog.underscore
......@@ -27,7 +27,7 @@
<h3 class="sr"><%= gettext('Form Actions') %></h3>
<ul>
<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 class="action-item">
<input type="button" class="button action-cancel" value="<%= gettext('Cancel') %>" />
......
cms/templates/textbooks.html
......@@ -71,23 +71,6 @@ $(function() {
<section class="content">
<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>
<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