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 { .wrapper-header {
margin: 0 0 ($baseline*1.5) 0; margin: 0 0 ($baseline*1.5) 0;
padding: $baseline; padding: $baseline;
...@@ -29,6 +31,27 @@ ...@@ -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 { .branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
...@@ -51,6 +74,9 @@ ...@@ -51,6 +74,9 @@
} }
} }
// ====================
// specific elements - course name/info
.info-course { .info-course {
position: relative; position: relative;
max-width: 200px; max-width: 200px;
...@@ -98,7 +124,9 @@ ...@@ -98,7 +124,9 @@
} }
} }
// course info // ====================
// specific elements - course nav
.nav-course { .nav-course {
width: 335px; width: 335px;
margin-top: -($baseline/4); margin-top: -($baseline/4);
...@@ -160,9 +188,10 @@ ...@@ -160,9 +188,10 @@
} }
} }
// account-based nav // ====================
// specific elements - account-based nav
.nav-account { .nav-account {
float: right;
max-width: 300px; max-width: 300px;
min-width: 175px; min-width: 175px;
width: 20%; width: 20%;
...@@ -188,7 +217,9 @@ ...@@ -188,7 +217,9 @@
} }
} }
// dropdown UI // ====================
// UI - dropdown
.nav-dropdown { .nav-dropdown {
.nav-item { .nav-item {
...@@ -236,7 +267,7 @@ ...@@ -236,7 +267,7 @@
} }
} }
// vendor // UI - dropdown - vendor
.arrow_box { .arrow_box {
position: relative; position: relative;
background: #fff; background: #fff;
...@@ -267,7 +298,7 @@ ...@@ -267,7 +298,7 @@
margin-left: -11px; margin-left: -11px;
} }
// specific navs // UI - dropdown - specific navs
&.nav-account { &.nav-account {
.nav-sub { .nav-sub {
...@@ -305,7 +336,9 @@ ...@@ -305,7 +336,9 @@
} }
} }
// is-signed in // ====================
// STATE: is-signed in
.is-signedin { .is-signedin {
&.course .branding { &.course .branding {
...@@ -334,10 +367,12 @@ ...@@ -334,10 +367,12 @@
} }
} }
// not signed in // ====================
// STATE: not signed in
.not-signedin { .not-signedin {
// unauthenticated nav // STATE: not signed in - unauthenticated nav
.nav-not-signedin { .nav-not-signedin {
float: right; float: right;
margin-top: ($baseline/4); margin-top: ($baseline/4);
...@@ -347,7 +382,6 @@ ...@@ -347,7 +382,6 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin: 0 $baseline 0 0; margin: 0 $baseline 0 0;
font-weight: 500;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
...@@ -360,7 +394,7 @@ ...@@ -360,7 +394,7 @@
} }
} }
// specific items // STATE: not signed in - specific items
.nav-not-signedin-help { .nav-not-signedin-help {
} }
...@@ -374,7 +408,7 @@ ...@@ -374,7 +408,7 @@
@include font-size(14); @include font-size(14);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
text-transform: uppercase; text-transform: uppercase;
font-weight: 600 !important; font-weight: 600;
} }
} }
...@@ -386,14 +420,15 @@ ...@@ -386,14 +420,15 @@
@include font-size(14); @include font-size(14);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
text-transform: uppercase; 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.howitworks .nav-not-signedin-hiw,
body.signin .nav-not-signedin-signin, body.signin .nav-not-signedin-signin,
body.signup .nav-not-signedin-signup, body.signup .nav-not-signedin-signup,
...@@ -405,7 +440,9 @@ body.course.outline .nav-course-courseware ...@@ -405,7 +440,9 @@ body.course.outline .nav-course-courseware
} }
} }
// js enabled // ====================
// STATE: js enabled
.js { .js {
.nav-dropdown { .nav-dropdown {
......
cms/templates/widgets/header.html
...@@ -2,108 +2,108 @@ ...@@ -2,108 +2,108 @@
<div class="wrapper-header wrapper"> <div class="wrapper-header wrapper">
<header class="primary" role="banner"> <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> % if context_course:
<% ctx_loc = context_course.location %>
<h1 class="branding"><a href="/">edX Studio</a></h1> <div class="info-course">
<h2 class="sr">Current Course:</h2>
% if context_course: <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
<% ctx_loc = context_course.location %> <span class="course-number">PH207x:</span>
<div class="info-course"> <span class="course-title">${context_course.display_name}</span>
<h2 class="sr">Current Course:</h2> </a>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}"> </div>
<span class="course-number">PH207x:</span>
<span class="course-title">${context_course.display_name}</span> <nav class="nav-course primary nav-dropdown" role="navigation">
</a> <h2 class="sr">PH207x's Navigation:</h2>
</div>
<nav class="nav-course primary nav-dropdown" role="navigation">
<h2 class="sr">PH207x's Navigation:</h2>
<ol> <ol>
<li class="nav-item nav-course-courseware"> <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> <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"> <div class="nav-sub">
<ul> <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_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('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('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> <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> </ul>
</div> </div>
</li> </li>
<li class="nav-item nav-course-settings"> <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> <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"> <div class="nav-sub">
<ul> <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))}">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('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('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> <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> </ul>
</div> </div>
</li> </li>
<li class="nav-item nav-course-tools"> <li class="nav-item nav-course-tools">
<h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3> <h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
<div class="nav-sub"> <div class="nav-sub">
<ul> <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('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> <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> </ul>
</div> </div>
</li> </li>
</ol> </ol>
</nav> </nav>
% endif % endif
</div>
% if user.is_authenticated(): <div class="wrapper wrapper-right">
<nav class="nav-account nav-is-signedin nav-dropdown"> % if user.is_authenticated():
<h2 class="sr">Currently logged in as:</h2> <nav class="nav-account nav-is-signedin nav-dropdown">
<ol> <h2 class="sr">Currently logged in as:</h2>
<li class="nav-item nav-account-username"> <ol>
<a href="#" class="title"> <li class="nav-item nav-account-username">
<span class="account-username"> <a href="#" class="title">
<i class="ss-icon ss-symbolicons-standard">&#x1F464;</i> <span class="account-username">
${ user.username } <i class="ss-icon ss-symbolicons-standard">&#x1F464;</i>
</span> ${ user.username }
<i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i> </span>
</a> <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
</a>
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item"><a href="#">My Courses</a></li> <li class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a href="#">Help</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> <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul> </ul>
</div> </div>
</li> </li>
</ol> </ol>
</nav> </nav>
% else: % else:
<nav class="nav-not-signedin"> <nav class="nav-not-signedin">
<h2 class="sr">You're not currently signed in</h2> <h2 class="sr">You're not currently signed in</h2>
<ol> <ol>
<li class="nav-item nav-not-signedin-hiw"> <li class="nav-item nav-not-signedin-hiw">
<a href="#">How Studio Works</a> <a href="#">How Studio Works</a>
</li> </li>
<li class="nav-item nav-not-signedin-help"> <li class="nav-item nav-not-signedin-help">
<a href="#">Studio Help</a> <a href="#">Studio Help</a>
</li> </li>
<li class="nav-item nav-not-signedin-signup"> <li class="nav-item nav-not-signedin-signup">
<a class="action action-signup" href="${reverse('signup')}">Sign Up</a> <a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
</li> </li>
<li class="nav-item nav-not-signedin-signin"> <li class="nav-item nav-not-signedin-signin">
<a class="action action-signin" href="${reverse('login')}">Sign In</a> <a class="action action-signin" href="${reverse('login')}">Sign In</a>
</li> </li>
</ol> </ol>
</nav> </nav>
% endif % endif
</div>
</header> </header>
</div> </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