new header styles; collapse all button added to courseware
This commit is contained in:
Tom Giannattasio
committed by
Brian Talbot
Brian Talbot
parent
8294b05802
commit
95dfc730dc
BIN
cms/static/img/collapse-all-icon.png
Normal file
BIN
cms/static/img/collapse-all-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
BIN
cms/static/img/home-icon-blue.png
Normal file
BIN
cms/static/img/home-icon-blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
cms/static/img/log-out-icon.png
Normal file
BIN
cms/static/img/log-out-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
cms/static/img/small-home-icon.png
Normal file
BIN
cms/static/img/small-home-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@@ -43,6 +43,8 @@ $(document).ready(function() {
|
||||
$('.unit .item-actions .delete-button').bind('click', deleteUnit);
|
||||
$('.new-unit-item').bind('click', createNewUnit);
|
||||
|
||||
$('.collapse-all-button').bind('click', collapseAll);
|
||||
|
||||
// autosave when a field is updated on the subsection page
|
||||
$body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
|
||||
$('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
|
||||
@@ -128,6 +130,11 @@ $(document).ready(function() {
|
||||
});
|
||||
});
|
||||
|
||||
function collapseAll(e) {
|
||||
$('.branch').addClass('collapsed');
|
||||
$('.expand-collapse-icon').removeClass('collapse').addClass('expand');
|
||||
}
|
||||
|
||||
function editSectionPublishDate(e) {
|
||||
e.preventDefault();
|
||||
$modal = $('.edit-subsection-publish-settings').show();
|
||||
@@ -597,11 +604,11 @@ function hideToastMessage(e) {
|
||||
function addNewSection(e, isTemplate) {
|
||||
e.preventDefault();
|
||||
|
||||
$(e.target).hide();
|
||||
$(e.target).addClass('disabled');
|
||||
|
||||
var $newSection = $($('#new-section-template').html());
|
||||
var $cancelButton = $newSection.find('.new-section-name-cancel');
|
||||
$('.new-courseware-section-button').after($newSection);
|
||||
$('.courseware-overview').prepend($newSection);
|
||||
$newSection.find('.new-section-name').focus().select();
|
||||
$newSection.find('.section-name-form').bind('submit', saveNewSection);
|
||||
$cancelButton.bind('click', cancelNewSection);
|
||||
@@ -638,7 +645,7 @@ function saveNewSection(e) {
|
||||
|
||||
function cancelNewSection(e) {
|
||||
e.preventDefault();
|
||||
$('.new-courseware-section-button').show();
|
||||
$('.new-courseware-section-button').removeClass('disabled');
|
||||
$(this).parents('section.new-section').remove();
|
||||
}
|
||||
|
||||
|
||||
@@ -28,6 +28,7 @@ a {
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: none;
|
||||
float: left;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
@@ -39,8 +40,7 @@ h1 {
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
float: right;
|
||||
margin-top: 42px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
@@ -349,7 +349,7 @@ body.show-wip {
|
||||
}
|
||||
|
||||
.new-button {
|
||||
@include blue-button;
|
||||
@include green-button;
|
||||
font-size: 13px;
|
||||
padding: 8px 20px 10px;
|
||||
text-align: center;
|
||||
|
||||
@@ -88,7 +88,28 @@
|
||||
|
||||
&:hover {
|
||||
background-color: #d9e3ee;
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin green-button {
|
||||
@include button;
|
||||
border: 1px solid $darkGreen;
|
||||
border-radius: 3px;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
|
||||
background-color: $green;
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: $brightGreen;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border: 1px solid $disabledGreen !important;
|
||||
background: $disabledGreen !important;
|
||||
color: #fff !important;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ input.courseware-unit-search-input {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
margin: 15px 0;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 12px;
|
||||
@include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
|
||||
|
||||
@@ -192,6 +192,17 @@ input.courseware-unit-search-input {
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-all-button {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: $darkGrey;
|
||||
|
||||
.collapse-all-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-section-name,
|
||||
.new-subsection-name-input {
|
||||
width: 515px;
|
||||
|
||||
@@ -56,6 +56,27 @@
|
||||
background: url(../img/home-icon.png) no-repeat;
|
||||
}
|
||||
|
||||
.small-home-icon {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background: url(../img/small-home-icon.png) no-repeat;
|
||||
}
|
||||
|
||||
.log-out-icon {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background: url(../img/log-out-icon.png) no-repeat;
|
||||
}
|
||||
|
||||
.collapse-all-icon {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 9px;
|
||||
background: url(../img/collapse-all-icon.png) no-repeat;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
|
||||
@@ -5,18 +5,16 @@ body.no-header {
|
||||
}
|
||||
|
||||
@mixin active {
|
||||
@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
|
||||
@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
|
||||
color: #3c3c3c;
|
||||
border-bottom: 3px solid $mediumGrey;
|
||||
}
|
||||
|
||||
.primary-header {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border-bottom: 1px solid #2c2e33;
|
||||
@include linear-gradient(top, #686b76, #54565e);
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
|
||||
margin-bottom: 25px;
|
||||
border-top: 6px solid $blue;
|
||||
border-bottom: 1px solid $mediumGrey;
|
||||
background: #fff;
|
||||
|
||||
&.active-tab-courseware #courseware-tab {
|
||||
@include active;
|
||||
@@ -38,23 +36,6 @@ body.no-header {
|
||||
@include active;
|
||||
}
|
||||
|
||||
#import-tab {
|
||||
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.class-name {
|
||||
max-width: 350px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drop-icon {
|
||||
margin-left: 5px;
|
||||
font-size: 11px;
|
||||
@@ -65,26 +46,46 @@ body.no-header {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
a,
|
||||
.username {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
height: 29px;
|
||||
padding: 7px 15px 0;
|
||||
color: #e4e6ee;
|
||||
.class-nav-bar {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.class-nav,
|
||||
.class-nav li {
|
||||
float: left;
|
||||
}
|
||||
.class-nav {
|
||||
@include clearfix;
|
||||
border-top: 1px solid $mediumGrey;
|
||||
|
||||
a {
|
||||
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
a {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
padding: 20px 25px 22px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.class {
|
||||
@include clearfix;
|
||||
font-size: 12px;
|
||||
color: $darkGrey;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
padding: 5px 10px 6px;
|
||||
color: $darkGrey;
|
||||
}
|
||||
|
||||
.home {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.log-out {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,4 +22,9 @@ $lightGrey: #edf1f5;
|
||||
$mediumGrey: #ced2db;
|
||||
$darkGrey: #8891a1;
|
||||
$extraDarkGrey: #3d4043;
|
||||
$paleYellow: #fffcf1;
|
||||
$paleYellow: #fffcf1;
|
||||
|
||||
$green: rgb(37, 184, 90);
|
||||
$brightGreen: rgb(22, 202, 87);
|
||||
$disabledGreen: rgb(124, 206, 153);
|
||||
$darkGreen: rgb(52, 133, 76);
|
||||
|
||||
@@ -99,9 +99,11 @@
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<h1>Courseware</h1>
|
||||
<div class="page-actions"></div>
|
||||
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
|
||||
<div class="page-actions">
|
||||
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
|
||||
<a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
|
||||
</div>
|
||||
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
|
||||
% for section in sections:
|
||||
<section class="courseware-section branch" data-id="${section.location}">
|
||||
<header>
|
||||
|
||||
@@ -2,12 +2,28 @@
|
||||
|
||||
<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
|
||||
<header class="primary-header ${active_tab_class}">
|
||||
<nav class="inner-wrapper">
|
||||
<div class="left">
|
||||
<a href="/"><span class="home-icon"></span></a>
|
||||
<div class="inner-wrapper">
|
||||
<div class="class">
|
||||
<div class="left">
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
<a href="/" class="home"><span class="small-home-icon"></span></a> ›
|
||||
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> ›
|
||||
% endif
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<span class="username">${ user.username }</span>
|
||||
% if user.is_authenticated():
|
||||
<a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></a>
|
||||
% else:
|
||||
<a href="${reverse('login')}">Log in</a>
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
<nav class="class-nav-bar">
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a>
|
||||
<ul class="class-nav">
|
||||
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
|
||||
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
|
||||
@@ -18,14 +34,6 @@
|
||||
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
|
||||
</ul>
|
||||
% endif
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="username">${ user.username }</span>
|
||||
% if user.is_authenticated():
|
||||
<a href="${reverse('logout')}">Log out</a>
|
||||
% else:
|
||||
<a href="${reverse('login')}">Log in</a>
|
||||
% endif
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user