Skip to content

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

revamp of textbook list html, stage 1

parent 8934cf35
Showing with 84 additions and 43 deletions
cms/static/js/views/textbook.js
......@@ -3,7 +3,8 @@ CMS.Views.TextbookShow = Backbone.View.extend({
this.template = _.template($("#show-textbook-tpl").text());
this.listenTo(this.model, "change", this.render);
},
tagName: "li",
tagName: "section",
className: "textbook",
events: {
"click .edit": "editTextbook",
"click .delete": "confirmDelete",
......@@ -75,7 +76,7 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
this.listenTo(chapters, "all", this.render);
this.listenTo(this.model.collection, "editOne", this.remove);
},
tagName: "li",
tagName: "section",
render: function() {
this.$el.html(this.template({
name: this.model.escape('name'),
......@@ -162,7 +163,7 @@ CMS.Views.ListTextbooks = Backbone.View.extend({
this.emptyTemplate = _.template($("#no-textbooks-tpl").text());
this.listenTo(this.collection, 'all', this.render);
},
tagName: "ul",
tagName: "div",
className: "textbooks",
render: function() {
var textbooks = this.collection;
......
cms/static/sass/views/_textbooks.scss
......@@ -9,24 +9,26 @@ body.course.textbooks {
}
.content-primary {
@extend .window;
width: flex-grid(9, 12);
margin-right: flex-gutter();
padding: $baseline ($baseline*1.5);
}
.no-textbook-content {
@include box-shadow(0 0 4px $shadow-d1 inset);
@include border-radius(2px);
padding: $baseline*2;
background-color: #ddd;
text-align: center;
color: $gray;
.no-textbook-content {
@include box-shadow(0 0 4px $shadow-d1 inset);
@include border-radius(2px);
padding: $baseline*2;
background-color: $gray-l4;
text-align: center;
color: $gray;
.button {
margin-left: 20px;
.button {
margin-left: 20px;
}
}
.textbook {
@extend .window;
padding: $baseline ($baseline*1.5);
}
}
form {
@include box-sizing(border-box);
......@@ -50,13 +52,12 @@ body.course.textbooks {
border-radius: 5px;
border: none;
padding: $baseline;
background-color: #DFE5EF;
color: #8EABBE;
background-color: $blue-l3;
color: $white;
font-weight: 600;
&:hover {
background: #5597DD;
color: #fff;
}
}
......@@ -236,24 +237,24 @@ body.course.textbooks {
}
.action-close {
@include white-button;
@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;
background: transparent;
box-shadow: none;
}
}
}
}
}
}
.content-supplementary {
width: flex-grid(3, 12);
}
......@@ -264,7 +265,7 @@ body.course.textbooks {
@include transition(all 0.05s ease-in-out);
position: fixed;
top: 0;
background: $black-t0;
background: $black-t2;
width: 100%;
height: 100%;
text-align: center;
......@@ -299,7 +300,8 @@ body.course.textbooks {
}
form {
border: 2px solid $gray-l2;
border: 7px solid #333333;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
background-color: transparent;
padding: 0;
......@@ -313,6 +315,7 @@ body.course.textbooks {
.wrapper-progress {
@include box-shadow(inset 0 0 3px $shadow-d1);
margin-top: $baseline;
border-radius: ($baseline*.75);
background-color: $gray-l4;
......@@ -320,6 +323,8 @@ body.course.textbooks {
height: 25px;
progress {
display: inline-block;
vertical-align: middle;
width: 100%;
border: none;
border-radius: ($baseline*.75);
......@@ -402,7 +407,7 @@ body.course.textbooks {
// dialog showing/hiding
&.dialog-is-shown {
.wrapper-view {
.wrapper-dialog {
-webkit-filter: blur(2px) grayscale(25%);
filter: blur(2px) grayscale(25%);
}
......
cms/templates/js/textbook-show.underscore
<span class="name"><%= name %></span>
<header>
<h3 class="textbook-title"><%= name %></h3>
</header>
<% if(chapters.length > 1) {%>
<a href="#" class="chapter-toggle
<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>
<%= chapters.length %> PDF Chapters
</a>
</a></p>
<% } else if(chapters.length === 1) { %>
<%= chapters.at(0).get("asset_path") %>
<% } %>
<a href="#" class="view"><%= gettext("view in course") %></a>
<button class="edit"><%= gettext("Edit") %></button>
<button class="delete"><%= gettext("Delete") %></button>
<ul class="actions textbook-actions">
<li>
<a href="#" class="view"><%= gettext("view in course") %></a>
</li>
<li>
<button class="edit"><%= gettext("Edit") %></button>
</li>
<li>
<button class="delete"><%= gettext("Delete") %></button>
</li>
</ul>
<% if(showChapters) { %>
<hr>
<ol class="chapters">
<% chapters.each(function(chapter) { %>
<li><span class="chapter-name"><%= chapter.get('name') %></span>
......
cms/templates/textbooks.html
......@@ -38,7 +38,7 @@ var textbooks = new CMS.Collections.TextbookSet(${json.dumps(course.pdf_textbook
var tbView = new CMS.Views.ListTextbooks({collection: textbooks});
$(function() {
$(".inner-wrapper").append(tbView.render().el);
$(".content-primary").append(tbView.render().el);
$(".nav-actions .new-button").click(function(e) {
tbView.addOne(e);
})
......@@ -69,23 +69,44 @@ $(function() {
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="inner-wrapper">
<div class="introduction">
<p class="copy">Use this page to upload textbooks for your course. <strong>Note: It's best practice to break your course's textbook into multiple chapters</strong> to reduce loading times for students. Breaking up textbooks into chapters can also help with students more easily finding a concept or topic-based information.</p>
</div>
<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>
</div>
</article>
<aside class="content-supplementary" role="complimentary">
</section>
-->
</article>
<aside class="content-supplementary" role="complimentary">
<div class="bit">
<h3 class="title-3">Why should I break my text into chapters?</h3>
<p>It's best practice to break your course's textbook into multiple chapters to reduce loading times for students. Breaking up textbooks into chapters can also help students more easily find topic-based information.</p>
</div>
<div class="bit">
<h3 class="title-3">What if my book isn't divided into chapters?</h3>
<p>If you haven't broken your textbook into chapters, you can upload the entire text as Chapter 1.</p>
</div>
</aside>
</aside>
</section>
</div>
......
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