Skip to content

E
edx-platform
Commit 27f23395 by Frances Botsford Committed by David Baumgold
Options

additional refinements to PDF textbooks, including making the edit buttons work again

parent 7b02932f
Showing with 198 additions and 188 deletions
cms/static/sass/views/_textbooks.scss
...@@ -13,8 +13,7 @@ body.course.textbooks { ...@@ -13,8 +13,7 @@ body.course.textbooks {
margin-right: flex-gutter(); margin-right: flex-gutter();
.no-textbook-content { .no-textbook-content {
@include box-shadow(0 0 4px $shadow-d1 inset); @extend .ui-well;
@include border-radius(2px);
padding: $baseline*2; padding: $baseline*2;
background-color: $gray-l4; background-color: $gray-l4;
text-align: center; text-align: center;
...@@ -22,15 +21,16 @@ body.course.textbooks { ...@@ -22,15 +21,16 @@ body.course.textbooks {
.button { .button {
margin-left: $baseline; margin-left: $baseline;
@include font-size(14);
} }
} }
.textbook { .textbook {
@extend .window; @extend .window;
position: relative; position: relative;
padding: $baseline ($baseline*1.5);
.view-textbook { .view-textbook {
padding: $baseline ($baseline*1.5);
header { header {
margin-bottom: 0; margin-bottom: 0;
...@@ -90,22 +90,11 @@ body.course.textbooks { ...@@ -90,22 +90,11 @@ body.course.textbooks {
} }
.actions { .actions {
@include transition(opacity .15s .25s ease-in-out);
@include transition(opacity .15s .25s ease-in-out); opacity: 0.0;
@include clearfix();
display: inline-block;
vertical-align: middle;
float: right;
width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0.0;
pointer-events: none;
text-align: right;
/*
position: absolute; position: absolute;
top: $baseline; top: $baseline;
right: $baseline; right: $baseline;
*/
.action { .action {
display: inline-block; display: inline-block;
...@@ -144,218 +133,230 @@ body.course.textbooks { ...@@ -144,218 +133,230 @@ body.course.textbooks {
width: 100%; width: 100%;
background: $white; background: $white;
fieldset { .wrapper-form {
margin-bottom: $baseline; padding: $baseline ($baseline*1.5);
} }
.actions {
.action-add-chapter {
@extend .t-action2;
@include transition(all .15s);
display: block;
width: 100%;
margin-bottom: ($baseline*1.5);
border-radius: 5px;
border: none;
padding: $baseline;
background-color: $blue-l3;
color: $white;
font-weight: 600;
&:hover { fieldset {
background: #5597DD; margin-bottom: $baseline;
} }
}
.action-primary { .actions {
@include blue-button; @include box-shadow(inset 0 1px 2px $shadow);
@extend .t-action2; border-top: 1px solid $gray-l1;
@include transition(all .15s); padding: ($baseline*0.75) $baseline;
display: inline-block; background: $gray-l6;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
}
.action-secondary { // add a chapter is below with chapters styling
@include grey-button;
@extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
}
.action-primary {
@include blue-button;
@extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
}
.action-secondary {
@include grey-button;
@extend .t-action2;
@include transition(all .15s);
display: inline-block;
padding: ($baseline/5) $baseline;
font-weight: 600;
text-transform: uppercase;
} }
.copy {
@include font-size(12);
margin: ($baseline) 0 ($baseline/2) 0;
color: $gray;
}
strong { .copy {
font-weight: 600; @include font-size(12);
} margin: ($baseline) 0 ($baseline/2) 0;
color: $gray;
strong {
font-weight: 600;
} }
.list-input,
.textbook-fields {
list-style: none;
.field { }
margin: 0 0 ($baseline*0.75) 0;
&:last-child {
margin-bottom: 0;
}
&.required { .chapters-fields,
.textbook-fields {
list-style: none;
label { .field {
font-weight: 600; margin: 0 0 ($baseline*0.75) 0;
}
label:after { &:last-child {
margin-left: ($baseline/4); margin-bottom: 0;
content: "*"; }
}
}
label, input, textarea { &.required {
display: block;
}
label { label {
@extend .t-copy-sub1; font-weight: 600;
@include transition(color, 0.15s, ease-in-out); }
margin: 0 0 ($baseline/4) 0;
&.is-focused { label:after {
color: $blue; margin-left: ($baseline/4);
} content: "*";
} }
}
label, input, textarea {
display: block;
}
&.add-textbook-name label { label {
@extend .t-title5; @extend .t-copy-sub1;
} @include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
input, textarea { &.is-focused {
@extend .t-copy-base; color: $blue;
height: 100%; }
width: 100%; }
padding: ($baseline/2);
&.long {
width: 100%;
}
&.short { &.add-textbook-name label {
width: 25%; @extend .t-title5;
} }
::-webkit-input-placeholder { input, textarea {
color: $gray-l4; @extend .t-copy-base;
} height: 100%;
width: 100%;
padding: ($baseline/2);
:-moz-placeholder { &.long {
color: $gray-l3; width: 100%;
} }
::-moz-placeholder { &.short {
color: $gray-l3; width: 25%;
} }
:-ms-input-placeholder { ::-webkit-input-placeholder {
color: $gray-l3; color: $gray-l4;
} }
&:focus { :-moz-placeholder {
color: $gray-l3;
}
+ .tip { ::-moz-placeholder {
color: $gray; color: $gray-l3;
}
}
} }
textarea.long { :-ms-input-placeholder {
height: ($baseline*5); color: $gray-l3;
} }
input[type="checkbox"] { &:focus {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;
& + label { + .tip {
display: inline-block; color: $gray;
} }
} }
}
textarea.long {
height: ($baseline*5);
}
.tip { input[type="checkbox"] {
@extend .t-copy-sub2; display: inline-block;
@include transition(color, 0.15s, ease-in-out); margin-right: ($baseline/4);
display: block; width: auto;
margin-top: ($baseline/4); height: auto;
color: $gray-l3;
& + label {
display: inline-block;
} }
} }
.field-group { .tip {
@include clearfix(); @extend .t-copy-sub2;
margin: 0 0 ($baseline/2) 0; @include transition(color, 0.15s, ease-in-out);
display: block;
.field { margin-top: ($baseline/4);
display: block; color: $gray-l3;
width: 46%; }
border-bottom: none; }
margin: 0 ($baseline*.75) 0 0;
padding: ($baseline/4) 0 0 0;
float: left;
position: relative;
input, textarea {
width: 100%;
}
.action-upload { .field-group {
@extend .t-action4; @include clearfix();
@include blue-button; margin: 0 0 ($baseline/2) 0;
@include transition(all .15s);
@include font-size(12); .field {
font-weight: 600; display: block;
text-align: center; width: 46%;
position: absolute; border-bottom: none;
top: 3px; margin: 0 ($baseline*.75) 0 0;
right: 0; padding: ($baseline/4) 0 0 0;
padding: 1px ($baseline/2) 2px ($baseline/2); float: left;
} position: relative;
input, textarea {
width: 100%;
} }
.action-close { .action-upload {
@include transition(color 0.25s ease-in-out); @extend .t-action4;
@include font-size(18); @include blue-button;
display: inline-block; @include transition(all .15s);
margin-top: ($baseline*2); @include font-size(12);
border: 0; font-weight: 600;
padding: 0; text-align: center;
background: transparent; position: absolute;
color: $gray-l1; top: 3px;
right: 0;
padding: 1px ($baseline/2) 2px ($baseline/2);
}
&:hover { }
color: $blue;
} .action-close {
@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;
} }
} }
} }
}
.action-add-chapter {
@extend .t-action2;
@include transition(all .15s);
display: block;
width: 100%;
margin: ($baseline*1.5) 0 0 0;
border-radius: 5px;
border: none;
padding: $baseline;
background-color: $blue-l3;
color: $white;
font-weight: 600;
&:hover {
background: #5597DD;
}
}
} }
} }
} }
......
cms/templates/js/no-textbooks.underscore
<div class="no-textbook-content"> <div class="no-textbook-content">
<p><%= gettext("You haven't added any textbooks to this course yet.") %><a href="#" class="button upload-button new-button"><%= gettext("Add your first textbook") %></a></p> <p><%= gettext("You haven't added any textbooks to this course yet.") %><a href="#" class="button upload-button new-button"><i class="icon-plus"></i><%= gettext("Add your first textbook") %></a></p>
</div> </div>
cms/templates/js/textbook-edit.underscore
<form class="edit-textbook" id="edit_textbook_form"> <form class="edit-textbook" id="edit_textbook_form">
<div class="wrapper-form">
<% if (errors) { %> <% if (errors) { %>
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"> <div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error">
<%= errors %> <%= errors %>
...@@ -16,10 +17,11 @@ ...@@ -16,10 +17,11 @@
<fieldset class="chapters-fields"> <fieldset class="chapters-fields">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend> <legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<ol class="chapters list-input enum"></ol> <ol class="chapters list-input enum"></ol>
</fieldset>
<div class="actions">
<button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button> <button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button>
</fieldset>
</div>
<div class="actions">
<button class="action action-primary" type="submit"><%= gettext("Save") %></button> <button class="action action-primary" type="submit"><%= gettext("Save") %></button>
<button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button> <button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
</div> </div>
......
cms/templates/js/textbook-show.underscore
<div class="view-textbook"> <div class="view-textbook">
<div class="wrap-textbook">
<header> <header>
<h3 class="textbook-title"><%= name %></h3> <h3 class="textbook-title"><%= name %></h3>
</header> </header>
...@@ -15,6 +17,21 @@ ...@@ -15,6 +17,21 @@
</p> </p>
<% } %> <% } %>
<% if(showChapters) { %>
<ol class="chapters">
<% chapters.each(function(chapter) { %>
<li class="chapter">
<span class="chapter-name"><%= chapter.get('name') %></span>
<span class="chapter-asset-path"><%= chapter.get('asset_path') %></span>
</li>
<% }) %>
</ol>
<% } %>
</div>
<ul class="actions textbook-actions"> <ul class="actions textbook-actions">
<li class="action action-view"> <li class="action action-view">
<a href="#" class="view"><%= gettext("view in course") %></a> <a href="#" class="view"><%= gettext("view in course") %></a>
...@@ -29,14 +46,4 @@ ...@@ -29,14 +46,4 @@
<% if(showChapters) { %>
<ol class="chapters">
<% chapters.each(function(chapter) { %>
<li class="chapter">
<span class="chapter-name"><%= chapter.get('name') %></span>
<span class="chapter-asset-path"><%= chapter.get('asset_path') %></span>
</li>
<% }) %>
</ol>
<% } %>
</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