additional refinements to PDF textbooks, including making the edit buttons work again
This commit is contained in:
Frances Botsford
committed by
David Baumgold
David Baumgold
parent
7b02932fea
commit
27f2339537
@@ -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;
|
||||
.wrapper-form {
|
||||
padding: $baseline ($baseline*1.5);
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include box-shadow(inset 0 1px 2px $shadow);
|
||||
border-top: 1px solid $gray-l1;
|
||||
padding: ($baseline*0.75) $baseline;
|
||||
background: $gray-l6;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: #5597DD;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
.chapters-fields,
|
||||
.textbook-fields {
|
||||
list-style: none;
|
||||
|
||||
&.required {
|
||||
.field {
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label:after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
&.is-focused {
|
||||
color: $blue;
|
||||
}
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
&.add-textbook-name label {
|
||||
@extend .t-title5;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@extend .t-copy-base;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
|
||||
&.long {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.short {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
+ .tip {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.long {
|
||||
height: ($baseline*5);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
margin-right: ($baseline/4);
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
& + label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend .t-copy-sub2;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-l3;
|
||||
label:after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
label, input, textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: block;
|
||||
width: 46%;
|
||||
border-bottom: none;
|
||||
margin: 0 ($baseline*.75) 0 0;
|
||||
padding: ($baseline/4) 0 0 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
label {
|
||||
@extend .t-copy-sub1;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
}
|
||||
&.is-focused {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&.add-textbook-name label {
|
||||
@extend .t-title5;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@extend .t-copy-base;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: ($baseline/2);
|
||||
|
||||
&.long {
|
||||
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;
|
||||
&.short {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
::-webkit-input-placeholder {
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: $gray-l3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
+ .tip {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea.long {
|
||||
height: ($baseline*5);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
margin-right: ($baseline/4);
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
& + label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
@extend .t-copy-sub2;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
display: block;
|
||||
margin-top: ($baseline/4);
|
||||
color: $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
.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-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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<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>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<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>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user