initial html and sass for textbook upload
This commit is contained in:
Frances Botsford
committed by
David Baumgold
David Baumgold
parent
2d13325baf
commit
9d59a1313c
@@ -58,6 +58,7 @@
|
||||
@import 'views/unit';
|
||||
@import 'views/users';
|
||||
@import 'views/checklists';
|
||||
@import 'views/textbooks';
|
||||
|
||||
// temp - inherited
|
||||
@import 'assets/content-types';
|
||||
|
||||
@@ -133,6 +133,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
// blue small/inline button
|
||||
.btn-flat-blue {
|
||||
@extend .btn-flat;
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $blue-l4;
|
||||
color: $blue-s2;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
border-color: $blue-l3;
|
||||
background: $blue-l3;
|
||||
color: $blue-d1;
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// simple dropdown button styling - should we move this elsewhere?
|
||||
|
||||
203
cms/static/sass/views/_textbooks.scss
Normal file
203
cms/static/sass/views/_textbooks.scss
Normal file
@@ -0,0 +1,203 @@
|
||||
// studio - views - textbooks
|
||||
// ====================
|
||||
|
||||
body.course.textbooks {
|
||||
|
||||
form {
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(0 1px 2px $shadow-l1);
|
||||
@include border-radius(2px);
|
||||
width: 100%;
|
||||
border: 1px solid $gray-l2;
|
||||
padding: $baseline ($baseline*1.5);
|
||||
background: $white;
|
||||
|
||||
.actions {
|
||||
margin-top: $baseline;
|
||||
|
||||
.action-add-chapter {
|
||||
@extend .btn-flat-blue;
|
||||
@extend .t-action2;
|
||||
@include transition(all .15s);
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
padding: ($baseline/5) $baseline;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
@include blue-button;
|
||||
@extend .t-action2;
|
||||
@include transition(all .15s);
|
||||
display: inline-block;
|
||||
padding: ($baseline/5) $baseline ($baseline/4) $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 ($baseline/4) $baseline;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.list-input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.field {
|
||||
margin: 0 0 ($baseline*0.75) 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.required {
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
label:after {
|
||||
margin-left: ($baseline/4);
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
label, input, textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
@extend .t-copy-sub1;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
|
||||
&.is-focused {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.field-group {
|
||||
@include clearfix();
|
||||
margin: 0 0 ($baseline/2) 0;
|
||||
|
||||
.field {
|
||||
display: block;
|
||||
width: 46%;
|
||||
border-bottom: none;
|
||||
margin: 0 $baseline 0 0;
|
||||
padding: ($baseline/4) 0 0 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-uploadasset {
|
||||
@extend .t-action4;
|
||||
@extend .btn-flat-blue;
|
||||
@include transition(all .15s);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: ($baseline/5) ($baseline/2) ($baseline/10) ($baseline/2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.action-close {
|
||||
@include white-button;
|
||||
@include font-size(18);
|
||||
margin-top: ($baseline*2);
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
<li>
|
||||
<div class="input-wrap">
|
||||
<label for="chapter-<%= order %>-name"><%= gettext("Chapter Name") %></label>
|
||||
<input id="chapter-<%= order %>-name" name="chapter-<%= order %>-name" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>">
|
||||
<p class="help_text"><%= gettext("the title/name of the chapter that will be used in navigating") %></p>
|
||||
<li class="chapter chapter<%= order %> field-group">
|
||||
<div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
|
||||
<label for="chapter<%= order %>-name"><%= gettext("Chapter Name") %></label>
|
||||
<input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
|
||||
<span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="chapter-<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
|
||||
<input id="chapter-<%= order %>-asset-path" name="chapter-<%= order %>-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>">
|
||||
<p class="help_text"><%= gettext("provide the path for a file or asset already added to this course") %></p>
|
||||
<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
|
||||
<label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
|
||||
<input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
|
||||
<span class="tip tip-stacked"><%= gettext("provide the path for a file or asset already added to this course") %></span>
|
||||
<button class="action action-uploadasset"><%= gettext("Upload Asset") %></button>
|
||||
</div>
|
||||
<input type="button" value="<%= gettext("Upload Asset") %>">
|
||||
<a class="action-close">close-button</a>
|
||||
<a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr">delete chapter</span></a>
|
||||
</li>
|
||||
|
||||
@@ -1,14 +1,24 @@
|
||||
<form>
|
||||
<div class='input-wrap'>
|
||||
<label for="textbook-name-input"><%= gettext("Name") %>:</label>
|
||||
<input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %> value="<%= name %>">
|
||||
<p class="help_text"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
|
||||
</div>
|
||||
<ol class="chapters"></ol>
|
||||
<form id="edit_textbook_form" class="edit-textbook">
|
||||
<div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div>
|
||||
<fieldset>
|
||||
<legend class="sr">Required information to edit or add a textbook and chapters</legend>
|
||||
<ol class="list-input">
|
||||
<li class="add-textbook-name field text required">
|
||||
<div class="input-wrap">
|
||||
<label for="textbook-name-input"><%= gettext("Name") %>:</label>
|
||||
<input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
|
||||
<span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<ol class="chapters list-input enum"></ol>
|
||||
</li>
|
||||
</ol>
|
||||
<p><%= gettext("Note: <strong>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>
|
||||
<button class="add-chapter"><%= gettext("Add a Chapter") %></button>
|
||||
<div class="buttons">
|
||||
<input type="submit" class="action-primary" value="<%= gettext("Save") %>" />
|
||||
<input type="button" class="action-secondary action-cancel" value="<%= gettext("Cancel") %>" />
|
||||
</fieldset>
|
||||
<div class="actions">
|
||||
<button class="action action-add-chapter"><%= gettext("Add a Chapter") %></button>
|
||||
<button class="action action-primary" type="submit"><%= gettext("Save") %></button>
|
||||
<button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -123,7 +123,7 @@ $(function() {
|
||||
<h3 class="sr">Page Actions</h3>
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="button upload-button new-button"><i class="ss-icon ss-symbolicons-standard icon icon-create"></i> New Textbook</a>
|
||||
<a href="#" class="button upload-button new-button"><i class="icon-cloud-upload "></i> New Textbook</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -131,15 +131,18 @@ $(function() {
|
||||
</div>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<section class="content">
|
||||
<div class="inner-wrapper">
|
||||
Textbooks are happy. Textbooks are cool. This is the filler text
|
||||
explaining why you should use a feature as happy and as cool as textbooks.
|
||||
If you use textbooks, you will make friends and influence people. You will
|
||||
lose weight and people will compliment you on your appearance. Children
|
||||
around the world will sing praises to your name, and celebrities will
|
||||
recongize you as a totally hip and groovy person. If you don't use textbooks,
|
||||
your life will be forever incomplete, and you will die alone and unloved.
|
||||
Make the right choice. Upload your first textbook now.
|
||||
<div class="introduction has-links">
|
||||
<p class="copy">Textbooks are happy. Textbooks are cool. This is the filler text explaining why you should use a feature as happy and as cool as textbooks. If you use textbooks, you will make friends and influence people. You will lose weight and people will compliment you on your appearance. Children around the world will sing praises to your name, and celebrities will recongize you as a totally hip and groovy person. If you don't use textbooks, your life will be forever incomplete, and you will die alone and unloved. Make the right choice. Upload your first textbook now.</p>
|
||||
|
||||
<nav class="nav-introduction-supplementary">
|
||||
<ul>
|
||||
<li class="nav-item"><a href="#" rel="modal" title="This link will open in a modal window"><i class="icon-question-sign"></i> Need help adding a textbook?</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</%block>
|
||||
|
||||
@@ -196,3 +196,21 @@
|
||||
padding: ($baseline*0.75);
|
||||
}
|
||||
|
||||
// small/inline button
|
||||
.btn-flat {
|
||||
@extend .btn;
|
||||
@extend .btn-rounded;
|
||||
border-width: 0;
|
||||
border-radius: $baseline;
|
||||
padding:($baseline/5) $baseline/2;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user