Skip to content

E
edx-platform
Commit 83ad9508 by Brian Talbot
Options

studio - revised course nav: plumbed in current html and scss progress into header

parent d0d02963
Showing with 486 additions and 144 deletions
cms/static/js/base.js
...@@ -39,6 +39,21 @@ $(document).ready(function() { ...@@ -39,6 +39,21 @@ $(document).ready(function() {
$('.unit .item-actions .delete-button').bind('click', deleteUnit); $('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit); $('.new-unit-item').bind('click', createNewUnit);
// nav-related
$('body').addClass('js');
$('.nav-dropdown .nav-item .title').click(function(e){
$subnav = $(this).parent().find('.nav-sub');
$title = $(this).parent().find('.title');
e.preventDefault();
$('.nav-dropdown .nav-item .title').removeClass('is-selected');
$('.nav-dropdown .nav-item .nav-sub').removeClass('is-shown');
$title.toggleClass('is-selected');
$subnav.toggleClass('is-shown');
});
// toggling overview section details // toggling overview section details
$(function(){ $(function(){
if($('.courseware-section').length > 0) { if($('.courseware-section').length > 0) {
......
cms/static/sass/_base.scss
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
body { body {
min-width: 980px; min-width: 980px;
background: rgb(240, 241, 245); background: $m-gray-l;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
color: $baseFontColor; color: $baseFontColor;
...@@ -42,6 +42,12 @@ h1 { ...@@ -42,6 +42,12 @@ h1 {
margin-bottom: 30px; margin-bottom: 30px;
} }
.wrapper {
@include clearfix();
@include box-sizing(border-box);
width: 100%;
}
.main-wrapper { .main-wrapper {
position: relative; position: relative;
margin: 0 40px; margin: 0 40px;
...@@ -417,4 +423,9 @@ body.show-wip { ...@@ -417,4 +423,9 @@ body.show-wip {
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
} }
}
// basic utility
.sr {
@include text-sr();
} }
\ No newline at end of file
cms/static/sass/_header.scss
body.no-header { // header
.primary-header { .wrapper-header {
display: none; margin: 0 0 ($baseline*1.5) 0;
} padding: $baseline;
border-bottom: 1px solid tint($m-gray, 50%);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
background: $white;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
a {
color: $baseFontColor;
display: block;
&:hover, &:active {
color: $blue;
}
}
}
.header {
@include clearfix();
max-width: 1280px;
margin: 0 auto;
color: $lightGrey;
}
.branding, .info-course, .nav-course, .nav-account {
display: inline-block;
vertical-align: top;
}
.branding, .info-course, .nav-course {
margin: 0 ($baseline*0.75) 0 0;
}
.branding {
position: relative;
padding-right: 15px;
a {
@include text-hide();
display: block;
width: 164px;
height: 32px;
background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
}
&:before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
}
&:after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
}
}
.info-course {
position: relative;
max-width: 500px;
min-width: 200px;
width: 23%;
padding-right: 15px;
font-size: 14px;
&:before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: 1px;
top: -8px;
width: 1px;
}
&:after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 50px;
position: absolute;
right: 0px;
top: -12px;
width: 1px;
}
.course-number, .course-title {
display: block;
}
.course-number {
font-size: 12px;
}
.course-title {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
font-weight: 600;
}
} }
@mixin active { .nav-course {
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); width: 275px;
background-color: rgba(255, 255, 255, .3); margin-top: -($baseline/4);
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset); font-size: 14px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
ol {
@include clearfix();
}
.nav-item {
display: inline-block;
vertical-align: bottom;
margin: 0 ($baseline/2) 0 0;
&:last-child {
margin-right: 0;
}
.title {
display: block;
padding: 5px;
text-transform: uppercase;
&:hover, &:active {
color: $blue;
}
.label-prefix {
display: block;
font-size: 11px;
}
.ss-icon {
}
&.is-selected {
color: $blue;
}
}
// current state
&.is-current {
.title {
color: $blue;
}
}
// specific nav items
&.nav-course-courseware {
}
&.nav-course-settings {
}
&.nav-course-tools {
}
}
} }
.primary-header { .nav-account {
width: 100%; float: right;
margin-bottom: 30px; max-width: 300px;
min-width: 175px;
&.active-tab-courseware #courseware-tab { width: 20%;
@include active; margin-top: 10px;
} font-size: 14px;
text-align: right;
&.active-tab-assets #assets-tab {
@include active; .nav-account-username {
} .ss-icon {
display: inline-block;
&.active-tab-pages #pages-tab { vertical-align: middle;
@include active; margin-right: 3px;
} font-size: 12px;
}
&.active-tab-users #users-tab {
@include active; .account-username {
} display: inline-block;
width: 80%;
&.active-tab-settings #settings-tab { overflow: hidden;
@include active; white-space: nowrap;
} text-overflow: ellipsis;
}
&.active-tab-import #import-tab { }
@include active; }
}
// dropdown UI
&.active-tab-export #export-tab { .nav-dropdown {
@include active;
} .nav-item {
position: relative;
.drop-icon { }
margin-left: 5px;
font-size: 11px; .nav-sub {
} @include border-radius(2px);
position: absolute;
.settings-icon { top: 30px;
font-size: 18px; width: 125px;
line-height: 18px; border: 1px solid tint($m-gray, 50%);
} padding: ($baseline/4) ($baseline/2);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
.class-nav-bar { background: $white;
clear: both;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); li {
background-color: $lightBluishGrey; margin: 0 0 ($baseline/4) 0;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset); border-bottom: 1px solid tint($m-gray, 75%);
} padding: 0 0($baseline/4) 0;
font-size: 13px;
.class-nav {
@include clearfix; &:last-child {
margin-bottom: 0;
a { border-bottom: none;
float: left; padding-bottom: 0;
display: inline-block; }
padding: 15px 25px 17px;
font-size: 15px; a {
color: #3c3c3c; display: block;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
}
&:hover {
@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)); // arrows
} &:after, &:before {
}
}
li {
float: left; &:after {
}
} }
.class { &:before {
@include clearfix;
height: 100%; }
font-size: 12px; }
color: rgb(163, 171, 184);
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1)); // vendor
background-color: rgb(47, 53, 63); .arrow_box {
position: relative;
a { background: #fff;
display: inline-block; border: 1px solid #a1a1a1;
height: 20px; }
padding: 5px 10px 6px; .arrow_box:after, .arrow_box:before {
color: rgb(163, 171, 184); bottom: 100%;
} border: solid transparent;
content: " ";
.home { height: 0;
position: relative; width: 0;
top: 1px; position: absolute;
} pointer-events: none;
}
.log-out {
position: relative; .arrow_box:after {
top: 3px; border-color: rgba(255, 255, 255, 0);
} border-bottom-color: #fff;
} border-width: 10px;
left: 50%;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(161, 161, 161, 0);
border-bottom-color: #a1a1a1;
border-width: 11px;
left: 50%;
margin-left: -11px;
}
// specific navs
&.nav-account {
.nav-sub {
right: 0;
text-align: left;
}
}
&.nav-course {
.nav-sub {
left: -5px;
}
.nav-course-courseware {
.nav-sub {
top: 50px;
}
}
.nav-course-settings {
.nav-sub {
top: 50px;
}
}
.nav-course-tools {
.nav-sub {
}
}
}
}
// js enabled
.js {
.nav-dropdown {
.nav-item .title {
cursor: pointer;
}
}
.nav-sub {
@include transition (opacity 1.0s ease-in-out 0s);
opacity: 0;
pointer-events: none;
&.is-shown {
opacity: 1.0;
pointer-events: auto;
}
}
} }
\ No newline at end of file
cms/static/sass/_variables.scss
$baseline: 20px;
$gw-column: 80px; $gw-column: 80px;
$gw-gutter: 20px; $gw-gutter: 20px;
...@@ -35,3 +37,7 @@ $disabledGreen: rgb(124, 206, 153); ...@@ -35,3 +37,7 @@ $disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76); $darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223); $lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228); $lightBluishGrey2: rgb(213, 220, 228);
// new colors - progress for re-org
$m-gray-l: rgb(247, 247, 247);
$m-gray: rgb(67,67,67);
cms/templates/base.html
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<%static:css group='base-style'/> <%static:css group='base-style'/>
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" /> <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
<link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
<title><%block name="title"></%block></title> <title><%block name="title"></%block></title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/markitup/jquery.markitup.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/markitup/jquery.markitup.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script> <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
<%static:js group='main'/> <%static:js group='main'/>
<%static:js group='module-js'/> <%static:js group='module-js'/>
......
cms/templates/widgets/header.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %> <div class="wrapper-header wrapper">
<header class="primary-header ${active_tab_class}"> <header class="primary" role="banner">
<div class="class"> <h1 class="branding"><a href="#">edX Studio</a></h1>
<div class="inner-wrapper">
<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>
</div>
<nav class="class-nav-bar">
% if context_course: % if context_course:
<% ctx_loc = context_course.location %> <% ctx_loc = context_course.location %>
<ul class="class-nav inner-wrapper"> <div class="info-course">
<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> <h2 class="sr">Current Course:</h2>
<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> <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Pages</a></li> <span class="course-number">PH207x:</span>
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</a></li> <span class="course-title">${context_course.display_name}</span>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li> </a>
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li> </div>
<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>
<li><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='export-tab'>Export</a></li> <nav class="nav-course primary nav-dropdown" role="navigation">
</ul> <h2 class="sr">PH207x's Navigation:</h2>
<ol>
<li class="nav-item nav-course-courseware">
<h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub">
<ul>
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
</ul>
</div>
</li>
<li class="nav-item nav-course-settings">
<h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub">
<ul>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
</ul>
</div>
</li>
<li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub">
<ul>
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
<li><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
</ul>
</div>
</li>
</ol>
</nav>
% endif
% if user.is_authenticated():
<nav class="nav-account is-logged-in nav-dropdown">
<h2 class="sr">Currently logged in as:</h2>
<ol>
<li class="nav-item nav-account-username">
<a href="#" class="title">
<span class="account-username">
<i class="ss-icon ss-symbolicons-standard">&#x1F464;</i>
${ user.username }
</span>
<i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
</a>
<div class="nav-sub">
<ul>
<li><a href="#">Help</a></li>
<li><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
</div>
</li>
</ol>
</nav>
% else:
<nav class="nav-account nav-dropdown">
<h2 class="sr">You're not currently logged in</h2>
<ol>
<li>
<a class="action action-login" href="${reverse('login')}">Logout</a>
</li>
</ol>
</nav>
% endif % endif
</nav> </header>
</header> </div>
\ No newline at end of file
common/static/sass/_mixins.scss
...@@ -7,12 +7,25 @@ ...@@ -7,12 +7,25 @@
@return $body-line-height * $amount; @return $body-line-height * $amount;
} }
@mixin hide-text() { // image-replacement hidden text
@mixin text-hide() {
text-indent: -100%; text-indent: -100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
// hidden elems - screenreaders
@mixin text-sr() {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
@mixin vertically-and-horizontally-centered ( $height, $width ) { @mixin vertically-and-horizontally-centered ( $height, $width ) {
left: 50%; left: 50%;
margin-left: -$width / 2; margin-left: -$width / 2;
...@@ -21,4 +34,4 @@ ...@@ -21,4 +34,4 @@
min-width: $width; min-width: $width;
position: absolute; position: absolute;
top: 150px; top: 150px;
} }
\ No newline at end of file
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