Skip to content

E
edx-platform
Commit 9d59a131 by Frances Botsford Committed by David Baumgold
Options

initial html and sass for textbook upload

parent 2d13325b
Showing with 288 additions and 31 deletions
cms/static/sass/base-style.scss
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
@import 'views/unit'; @import 'views/unit';
@import 'views/users'; @import 'views/users';
@import 'views/checklists'; @import 'views/checklists';
@import 'views/textbooks';
// temp - inherited // temp - inherited
@import 'assets/content-types'; @import 'assets/content-types';
......
cms/static/sass/elements/_controls.scss
...@@ -133,6 +133,28 @@ ...@@ -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? // simple dropdown button styling - should we move this elsewhere?
......
cms/static/sass/views/_textbooks.scss 0 → 100644
// 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;
}
}
}
}
}
}
cms/templates/js/chapter.underscore
<li> <li class="chapter chapter<%= order %> field-group">
<div class="input-wrap"> <div class="input-wrap field text required field-add-chapter-name chapter<%= order %>-name">
<label for="chapter-<%= order %>-name"><%= gettext("Chapter Name") %></label> <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 %>"> <input id="chapter<%= order %>-name" name="chapter<%= order %>-name" class="short" placeholder="<%= _.str.sprintf(gettext("Chapter %s"), order) %>" value="<%= name %>" type="text">
<p class="help_text"><%= gettext("the title/name of the chapter that will be used in navigating") %></p> <span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
</div> </div>
<div class="input-wrap"> <div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
<label for="chapter-<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label> <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 %>"> <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">
<p class="help_text"><%= gettext("provide the path for a file or asset already added to this course") %></p> <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> </div>
<input type="button" value="<%= gettext("Upload Asset") %>"> <a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr">delete chapter</span></a>
<a class="action-close">close-button</a>
</li> </li>
cms/templates/js/textbook.underscore
<form> <form id="edit_textbook_form" class="edit-textbook">
<div class='input-wrap'> <div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div>
<label for="textbook-name-input"><%= gettext("Name") %>:</label> <fieldset>
<input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %> value="<%= name %>"> <legend class="sr">Required information to edit or add a textbook and chapters</legend>
<p class="help_text"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span> <ol class="list-input">
</div> <li class="add-textbook-name field text required">
<ol class="chapters"></ol> <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> <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> </fieldset>
<div class="buttons"> <div class="actions">
<input type="submit" class="action-primary" value="<%= gettext("Save") %>" /> <button class="action action-add-chapter"><%= gettext("Add a Chapter") %></button>
<input type="button" class="action-secondary action-cancel" value="<%= gettext("Cancel") %>" /> <button class="action action-primary" type="submit"><%= gettext("Save") %></button>
<button class="action action-secondary action-cancel"><%= gettext("Cancel") %></button>
</div> </div>
</form> </form>
cms/templates/textbooks.html
...@@ -123,7 +123,7 @@ $(function() { ...@@ -123,7 +123,7 @@ $(function() {
<h3 class="sr">Page Actions</h3> <h3 class="sr">Page Actions</h3>
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="button upload-button new-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#xEB40;</i> New Textbook</a> <a href="#" class="button upload-button new-button"><i class="icon-cloud-upload "></i> New Textbook</a>
</li> </li>
</ul> </ul>
</nav> </nav>
...@@ -131,15 +131,18 @@ $(function() { ...@@ -131,15 +131,18 @@ $(function() {
</div> </div>
<div class="main-wrapper"> <div class="main-wrapper">
<section class="content">
<div class="inner-wrapper"> <div class="inner-wrapper">
Textbooks are happy. Textbooks are cool. This is the filler text <div class="introduction has-links">
explaining why you should use a feature as happy and as cool as textbooks. <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>
If you use textbooks, you will make friends and influence people. You will
lose weight and people will compliment you on your appearance. Children <nav class="nav-introduction-supplementary">
around the world will sing praises to your name, and celebrities will <ul>
recongize you as a totally hip and groovy person. If you don't use textbooks, <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>
your life will be forever incomplete, and you will die alone and unloved. </ul>
Make the right choice. Upload your first textbook now. </nav>
</div>
</div> </div>
</section>
</div> </div>
</%block> </%block>
common/static/sass/_mixins.scss
...@@ -196,3 +196,21 @@ ...@@ -196,3 +196,21 @@
padding: ($baseline*0.75); 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 {
}
}
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