Skip to content

E
edx-platform
Commit bb789e75 by Brian Talbot
Options

studio - course nav: general flex-grid layout - WIP

parent 280de111
Showing with 151 additions and 113 deletions
cms/static/sass/_header.scss
//studio global header and navigation
// studio global header and navigation
// ====================
.wrapper-header {
margin: 0 0 ($baseline*1.5) 0;
padding: $baseline;
......@@ -29,6 +31,27 @@
}
}
// ====================
// basic layout
.wrapper-left, .wrapper-right {
@include box-sizing(border-box);
}
.wrapper-left {
width: flex-grid(10, 12);
float: left;
margin-right: flex-gutter();
}
.wrapper-right {
width: flex-grid(2, 12);
float: right;
}
// ====================
// specific elements - branding
.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
display: inline-block;
vertical-align: top;
......@@ -51,6 +74,9 @@
}
}
// ====================
// specific elements - course name/info
.info-course {
position: relative;
max-width: 200px;
......@@ -98,7 +124,9 @@
}
}
// course info
// ====================
// specific elements - course nav
.nav-course {
width: 335px;
margin-top: -($baseline/4);
......@@ -160,9 +188,10 @@
}
}
// account-based nav
// ====================
// specific elements - account-based nav
.nav-account {
float: right;
max-width: 300px;
min-width: 175px;
width: 20%;
......@@ -188,7 +217,9 @@
}
}
// dropdown UI
// ====================
// UI - dropdown
.nav-dropdown {
.nav-item {
......@@ -236,7 +267,7 @@
}
}
// vendor
// UI - dropdown - vendor
.arrow_box {
position: relative;
background: #fff;
......@@ -267,7 +298,7 @@
margin-left: -11px;
}
// specific navs
// UI - dropdown - specific navs
&.nav-account {
.nav-sub {
......@@ -305,7 +336,9 @@
}
}
// is-signed in
// ====================
// STATE: is-signed in
.is-signedin {
&.course .branding {
......@@ -334,10 +367,12 @@
}
}
// not signed in
// ====================
// STATE: not signed in
.not-signedin {
// unauthenticated nav
// STATE: not signed in - unauthenticated nav
.nav-not-signedin {
float: right;
margin-top: ($baseline/4);
......@@ -347,7 +382,6 @@
display: inline-block;
vertical-align: middle;
margin: 0 $baseline 0 0;
font-weight: 500;
&:last-child {
margin-right: 0;
......@@ -360,7 +394,7 @@
}
}
// specific items
// STATE: not signed in - specific items
.nav-not-signedin-help {
}
......@@ -374,7 +408,7 @@
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
font-weight: 600 !important;
font-weight: 600;
}
}
......@@ -386,14 +420,15 @@
@include font-size(14);
padding: ($baseline/4) ($baseline/2);
text-transform: uppercase;
font-weight: 600 !important;
font-weight: 600;
}
}
}
}
// ====================
// active/current nav states
// STATE: active/current nav states
body.howitworks .nav-not-signedin-hiw,
body.signin .nav-not-signedin-signin,
body.signup .nav-not-signedin-signup,
......@@ -405,7 +440,9 @@ body.course.outline .nav-course-courseware
}
}
// js enabled
// ====================
// STATE: js enabled
.js {
.nav-dropdown {
......
cms/templates/widgets/header.html
......@@ -2,108 +2,108 @@
<div class="wrapper-header wrapper">
<header class="primary" role="banner">
<span class="wrapper wrapper-flex">
<div class="wrapper wrapper-left ">
<h1 class="branding"><a href="/">edX Studio</a></h1>
</span>
<h1 class="branding"><a href="/">edX Studio</a></h1>
% if context_course:
<% ctx_loc = context_course.location %>
<div class="info-course">
<h2 class="sr">Current Course:</h2>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
<span class="course-number">PH207x:</span>
<span class="course-title">${context_course.display_name}</span>
</a>
</div>
<nav class="nav-course primary nav-dropdown" role="navigation">
<h2 class="sr">PH207x's Navigation:</h2>
% if context_course:
<% ctx_loc = context_course.location %>
<div class="info-course">
<h2 class="sr">Current Course:</h2>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
<span class="course-number">PH207x:</span>
<span class="course-title">${context_course.display_name}</span>
</a>
</div>
<nav class="nav-course primary nav-dropdown" role="navigation">
<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 class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
<li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
<li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
<li class="nav-item"><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>
<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 class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
<li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
<li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
<li class="nav-item"><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 class="nav-item"><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 class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
<li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
<li class="nav-item"><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-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 class="nav-item"><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 class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
<li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
<li class="nav-item"><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 class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
<li class="nav-item"><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
<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 class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
<li class="nav-item"><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
</div>
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin 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="wrapper wrapper-right">
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin 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 class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a href="#">Help</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
</div>
</li>
</ol>
</nav>
% else:
<nav class="nav-not-signedin">
<h2 class="sr">You're not currently signed in</h2>
<ol>
<li class="nav-item nav-not-signedin-hiw">
<a href="#">How Studio Works</a>
</li>
<li class="nav-item nav-not-signedin-help">
<a href="#">Studio Help</a>
</li>
<li class="nav-item nav-not-signedin-signup">
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
</li>
<li class="nav-item nav-not-signedin-signin">
<a class="action action-signin" href="${reverse('login')}">Sign In</a>
</li>
</ol>
</nav>
% endif
<div class="nav-sub">
<ul>
<li class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a href="#">Help</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
</div>
</li>
</ol>
</nav>
% else:
<nav class="nav-not-signedin">
<h2 class="sr">You're not currently signed in</h2>
<ol>
<li class="nav-item nav-not-signedin-hiw">
<a href="#">How Studio Works</a>
</li>
<li class="nav-item nav-not-signedin-help">
<a href="#">Studio Help</a>
</li>
<li class="nav-item nav-not-signedin-signup">
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
</li>
<li class="nav-item nav-not-signedin-signin">
<a class="action action-signin" href="${reverse('login')}">Sign In</a>
</li>
</ol>
</nav>
% endif
</div>
</header>
</div>
\ 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