Skip to content

E
edx-platform
Commit 95dfc730 by Tom Giannattasio Committed by Brian Talbot
Options

new header styles; collapse all button added to courseware

parent 8294b058
Showing with 134 additions and 57 deletions
cms/static/js/base.js
......@@ -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();
}
......
cms/static/sass/_base.scss
......@@ -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;
......
cms/static/sass/_cms_mixins.scss
......@@ -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);
}
}
......
cms/static/sass/_courseware.scss
......@@ -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;
......
cms/static/sass/_graphics.scss
......@@ -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;
......
cms/static/sass/_header.scss
......@@ -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 {
.class-nav-bar {
clear: both;
}
.class-nav {
@include clearfix;
border-top: 1px solid $mediumGrey;
a {
float: left;
display: inline-block;
height: 29px;
padding: 7px 15px 0;
color: #e4e6ee;
padding: 20px 25px 22px;
font-size: 15px;
}
.class-nav,
.class-nav li {
li {
float: left;
}
}
.class {
@include clearfix;
font-size: 12px;
color: $darkGrey;
a {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
display: inline-block;
height: 20px;
padding: 5px 10px 6px;
color: $darkGrey;
}
&:hover {
background: rgba(255, 255, 255, .1);
.home {
position: relative;
top: 1px;
}
.log-out {
position: relative;
top: 3px;
}
}
}
\ No newline at end of file
cms/static/sass/_variables.scss
......@@ -23,3 +23,8 @@ $mediumGrey: #ced2db;
$darkGrey: #8891a1;
$extraDarkGrey: #3d4043;
$paleYellow: #fffcf1;
$green: rgb(37, 184, 90);
$brightGreen: rgb(22, 202, 87);
$disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
cms/templates/overview.html
......@@ -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>
......
cms/templates/widgets/header.html
......@@ -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="inner-wrapper">
<div class="class">
<div class="left">
<a href="/"><span class="home-icon"></span></a>
% 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>
<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 %>
<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>
</div>
</header>
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