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