From 4b2eb79de96923ccd88377d336891d01a5b1c4e5 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 19 Jun 2013 11:01:08 -0400 Subject: [PATCH] revamp of textbook list html, stage 1 --- cms/static/js/views/textbook.js | 7 ++-- cms/static/sass/views/_textbooks.scss | 51 +++++++++++++---------- cms/templates/js/textbook-show.underscore | 28 +++++++++---- cms/templates/textbooks.html | 41 +++++++++++++----- 4 files changed, 84 insertions(+), 43 deletions(-) diff --git a/cms/static/js/views/textbook.js b/cms/static/js/views/textbook.js index f9fad1a6a5..63df8ae249 100644 --- a/cms/static/js/views/textbook.js +++ b/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; diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss index 3bfbd1a74b..54fc203125 100644 --- a/cms/static/sass/views/_textbooks.scss +++ b/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%); } diff --git a/cms/templates/js/textbook-show.underscore b/cms/templates/js/textbook-show.underscore index 140340eab4..dd9391a1b6 100644 --- a/cms/templates/js/textbook-show.underscore +++ b/cms/templates/js/textbook-show.underscore @@ -1,18 +1,32 @@ -<%= name %> +
+

<%= name %>

+
+ <% if(chapters.length > 1) {%> - <%= chapters.length %> PDF Chapters - +

<% } else if(chapters.length === 1) { %> <%= chapters.at(0).get("asset_path") %> <% } %> -<%= gettext("view in course") %> - - + + + + + <% if(showChapters) { %> -
    <% chapters.each(function(chapter) { %>
  1. <%= chapter.get('name') %> diff --git a/cms/templates/textbooks.html b/cms/templates/textbooks.html index 05b170cdd9..672386f0bd 100644 --- a/cms/templates/textbooks.html +++ b/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() {
    -
    -
    -
    -

    Use this page to upload textbooks for your course. Note: 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 with students more easily finding a concept or topic-based information.

    -
    +
    -
    -
    - +
    + +