revamp of textbook list html, stage 1
This commit is contained in:
Frances Botsford
committed by
David Baumgold
David Baumgold
parent
8934cf35ba
commit
4b2eb79de9
@@ -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;
|
||||
|
||||
@@ -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%);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,32 @@
|
||||
<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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<aside class="content-supplementary" role="complimentary">
|
||||
<!--
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user