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 {
margin-right: flex-gutter();
.no-textbook-content {
@include box-shadow(0 0 4px $shadow-d1 inset);
@include border-radius(2px);
@extend .ui-well;
padding: $baseline*2;
background-color: $gray-l4;
text-align: center;
......@@ -22,15 +21,16 @@ body.course.textbooks {
.button {
margin-left: $baseline;
@include font-size(14);
}
}
.textbook {
@extend .window;
position: relative;
padding: $baseline ($baseline*1.5);
.view-textbook {
padding: $baseline ($baseline*1.5);
header {
margin-bottom: 0;
......@@ -90,22 +90,11 @@ body.course.textbooks {
}
.actions {
@include transition(opacity .15s .25s ease-in-out);
@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;
/*
@include transition(opacity .15s .25s ease-in-out);
opacity: 0.0;
position: absolute;
top: $baseline;
right: $baseline;
*/
.action {
display: inline-block;
......@@ -144,218 +133,230 @@ body.course.textbooks {
width: 100%;
background: $white;
fieldset {
margin-bottom: $baseline;
}
.actions {
.wrapper-form {
padding: $baseline ($baseline*1.5);
}
.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 {
background: #5597DD;
}
}
fieldset {
margin-bottom: $baseline;
}
.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;
}
.actions {
@include box-shadow(inset 0 1px 2px $shadow);
border-top: 1px solid $gray-l1;
padding: ($baseline*0.75) $baseline;
background: $gray-l6;
.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;
}
// add a chapter is below with chapters styling
.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 {
font-weight: 600;
}
.copy {
@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 {
font-weight: 600;
}
.field {
margin: 0 0 ($baseline*0.75) 0;
label:after {
margin-left: ($baseline/4);
content: "*";
}
}
&:last-child {
margin-bottom: 0;
}
label, input, textarea {
display: block;
}
&.required {
label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
font-weight: 600;
}
&.is-focused {
color: $blue;
}
label:after {
margin-left: ($baseline/4);
content: "*";
}
}
label, input, textarea {
display: block;
}
&.add-textbook-name label {
@extend .t-title5;
}
label {
@extend .t-copy-sub1;
@include transition(color, 0.15s, ease-in-out);
margin: 0 0 ($baseline/4) 0;
input, textarea {
@extend .t-copy-base;
height: 100%;
width: 100%;
padding: ($baseline/2);
&.is-focused {
color: $blue;
}
}
&.long {
width: 100%;
}
&.short {
width: 25%;
}
&.add-textbook-name label {
@extend .t-title5;
}
::-webkit-input-placeholder {
color: $gray-l4;
}
input, textarea {
@extend .t-copy-base;
height: 100%;
width: 100%;
padding: ($baseline/2);
:-moz-placeholder {
color: $gray-l3;
}
&.long {
width: 100%;
}
::-moz-placeholder {
color: $gray-l3;
}
&.short {
width: 25%;
}
:-ms-input-placeholder {
color: $gray-l3;
}
::-webkit-input-placeholder {
color: $gray-l4;
}
&:focus {
:-moz-placeholder {
color: $gray-l3;
}
+ .tip {
color: $gray;
}
}
::-moz-placeholder {
color: $gray-l3;
}
textarea.long {
height: ($baseline*5);
:-ms-input-placeholder {
color: $gray-l3;
}
input[type="checkbox"] {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;
&:focus {
& + label {
display: inline-block;
+ .tip {
color: $gray;
}
}
}
textarea.long {
height: ($baseline*5);
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
input[type="checkbox"] {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;
& + label {
display: inline-block;
}
}
.field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
.field {
display: block;
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%;
}
.tip {
@extend .t-copy-sub2;
@include transition(color, 0.15s, ease-in-out);
display: block;
margin-top: ($baseline/4);
color: $gray-l3;
}
}
.action-upload {
@extend .t-action4;
@include blue-button;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
position: absolute;
top: 3px;
right: 0;
padding: 1px ($baseline/2) 2px ($baseline/2);
}
.field-group {
@include clearfix();
margin: 0 0 ($baseline/2) 0;
.field {
display: block;
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-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;
.action-upload {
@extend .t-action4;
@include blue-button;
@include transition(all .15s);
@include font-size(12);
font-weight: 600;
text-align: center;
position: absolute;
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">
<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>
cms/templates/js/textbook-edit.underscore
<form class="edit-textbook" id="edit_textbook_form">
<div class="wrapper-form">
<% if (errors) { %>
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error">
<%= errors %>
......@@ -16,10 +17,11 @@
<fieldset class="chapters-fields">
<legend class="sr"><%= gettext("Chapter(s) information") %></legend>
<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>
</fieldset>
</div>
<div class="actions">
<button class="action action-primary" type="submit"><%= gettext("Save") %></button>
<button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
</div>
......
cms/templates/js/textbook-show.underscore
<div class="view-textbook">
<div class="wrap-textbook">
<header>
<h3 class="textbook-title"><%= name %></h3>
</header>
......@@ -15,6 +17,21 @@
</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">
<li class="action action-view">
<a href="#" class="view"><%= gettext("view in course") %></a>
......@@ -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>
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