Skip to content

E
edx-platform
Commit 41fa73b6 by Brian Talbot
Options

studio - wraps nav elements in floated containers for easier layout

parent beaa5979
Showing with 189 additions and 160 deletions
cms/static/sass/elements/_header.scss
...@@ -22,6 +22,23 @@ ...@@ -22,6 +22,23 @@
// ==================== // ====================
// basic layout // basic layout
.wrapper-l, .wrapper-r {
background: $white;
}
.wrapper-l {
float: left;
margin-right: flex-gutter();
width: flex-grid(7,12);
}
.wrapper-r {
float: right;
width: flex-grid(4,12);
text-align: right;
}
.branding, .info-course, .nav-course, .nav-account, .nav-pitch { .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
@include box-sizing(border-box); @include box-sizing(border-box);
display: inline-block; display: inline-block;
...@@ -29,13 +46,6 @@ ...@@ -29,13 +46,6 @@
} }
// basic layout - nav items // basic layout - nav items
.nav-item {
.title {
}
}
nav { nav {
> ol > .nav-item { > ol > .nav-item {
...@@ -116,9 +126,9 @@ ...@@ -116,9 +126,9 @@
// specific elements - course name/info // specific elements - course name/info
.info-course { .info-course {
margin-right: ($baseline*0.75); margin-right: flex-gutter();
border-right: 1px solid $gray-l4; border-right: 1px solid $gray-l4;
padding: ($baseline*0.75) $baseline ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org, .course-number {
@extend .t-action4; @extend .t-action4;
...@@ -169,7 +179,6 @@ ...@@ -169,7 +179,6 @@
.nav-account { .nav-account {
position: relative; position: relative;
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 0;
text-align: right;
.nav-sub { .nav-sub {
text-align: left; text-align: left;
...@@ -199,7 +208,6 @@ ...@@ -199,7 +208,6 @@
.nav-pitch { .nav-pitch {
position: relative; position: relative;
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 0;
text-align: right;
.nav-sub { .nav-sub {
text-align: left; text-align: left;
...@@ -212,16 +220,21 @@ ...@@ -212,16 +220,21 @@
// CASE: user signed in // CASE: user signed in
.is-signedin { .is-signedin {
.wrapper-header { .wrapper-l {
width: flex-grid(9,12);
}
.branding { .wrapper-r {
width: 15%; width: flex-grid(3,12);
margin-right: 2%; }
}
.nav-account { .branding {
width: 80%; width: 20%;
} margin-right: 2%;
}
.nav-account {
top: ($baseline/4);
} }
} }
...@@ -232,21 +245,26 @@ ...@@ -232,21 +245,26 @@
.wrapper-header { .wrapper-header {
.wrapper-l {
width: flex-grid(9,12);
}
.wrapper-r {
width: flex-grid(3,12);
}
.branding { .branding {
width: 15%; width: 20%;
margin-right: 2%; margin-right: 2%;
} }
.info-course { .info-course {
width: 25%; width: 25%;
margin-right: 2%;
} }
.nav-course { .nav-course {
width: 34%; width: 45%;
}
.nav-account {
width: 20%;
} }
} }
} }
...@@ -258,13 +276,20 @@ ...@@ -258,13 +276,20 @@
.wrapper-header { .wrapper-header {
.wrapper-l {
width: flex-grid(2,12);
}
.wrapper-r {
width: flex-grid(10,12);
}
.branding { .branding {
width: 15%; width: 100%;
margin-right: 2%;
} }
.nav-pitch { .nav-pitch {
width: 80%; top: ($baseline/4);
.nav-item { .nav-item {
margin-right: ($baseline/2); margin-right: ($baseline/2);
......
cms/templates/widgets/header.html
...@@ -2,156 +2,160 @@ ...@@ -2,156 +2,160 @@
<div class="wrapper-header wrapper" id="view-top"> <div class="wrapper-header wrapper" id="view-top">
<header class="primary" role="banner"> <header class="primary" role="banner">
<h1 class="branding"><a href="/"><img src="/static/img/logo-edx-studio.png" alt="edX Studio" /></a></h1> <div class="wrapper wrapper-l">
<h1 class="branding"><a href="/"><img src="/static/img/logo-edx-studio.png" alt="edX Studio" /></a></h1>
% if context_course: % if context_course:
<% ctx_loc = context_course.location %> <% ctx_loc = context_course.location %>
<h2 class="info-course"> <h2 class="info-course">
<span class="sr">Current Course:</span> <span class="sr">Current Course:</span>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}"> <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
<span class="course-org">${ctx_loc.org}</span><span class="course-number">${ctx_loc.course}</span> <span class="course-org">${ctx_loc.org}</span><span class="course-number">${ctx_loc.course}</span>
<span class="course-title" title="${context_course.display_name_with_default}">${context_course.display_name_with_default}</span> <span class="course-title" title="${context_course.display_name_with_default}">${context_course.display_name_with_default}</span>
</a> </a>
</h2> </h2>
<nav class="nav-course nav-dd ui-left"> <nav class="nav-course nav-dd ui-left">
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2> <h2 class="sr">${context_course.display_name_with_default}'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"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down ui-toggle-dd"></i></h3> <h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-course-courseware-outline"> <li class="nav-item nav-course-courseware-outline">
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a> <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a>
</li> </li>
<li class="nav-item nav-course-courseware-updates"> <li class="nav-item nav-course-courseware-updates">
<a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a> <a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a>
</li> </li>
<li class="nav-item nav-course-courseware-pages"> <li class="nav-item nav-course-courseware-pages">
<a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</a> <a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</a>
</li> </li>
<li class="nav-item nav-course-courseware-uploads"> <li class="nav-item nav-course-courseware-uploads">
<a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a> <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>
</ul> </ul>
</div>
</div> </div>
</div> </li>
</li>
<li class="nav-item nav-course-settings"> <li class="nav-item nav-course-settings">
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down ui-toggle-dd"></i></h3> <h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-course-settings-schedule"> <li class="nav-item nav-course-settings-schedule">
<a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a> <a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a>
</li> </li>
<li class="nav-item nav-course-settings-grading"> <li class="nav-item nav-course-settings-grading">
<a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a> <a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a>
</li> </li>
<li class="nav-item nav-course-settings-team"> <li class="nav-item nav-course-settings-team">
<a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a> <a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a>
</li> </li>
<li class="nav-item nav-course-settings-advanced"> <li class="nav-item nav-course-settings-advanced">
<a href="${reverse('course_advanced_settings', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Advanced Settings</a> <a href="${reverse('course_advanced_settings', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Advanced Settings</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </li>
</li>
<li class="nav-item nav-course-tools"> <li class="nav-item nav-course-tools">
<h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down ui-toggle-dd"></i></h3> <h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-course-tools-checklists"> <li class="nav-item nav-course-tools-checklists">
<a href="${reverse('checklists', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Checklists</a> <a href="${reverse('checklists', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Checklists</a>
</li> </li>
<li class="nav-item nav-course-tools-import"> <li class="nav-item nav-course-tools-import">
<a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a> <a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a>
</li> </li>
<li class="nav-item nav-course-tools-export"> <li class="nav-item nav-course-tools-export">
<a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a> <a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </li>
</li> </ol>
</ol> </nav>
</nav> % endif
% endif </div>
% if user.is_authenticated(): <div class="wrapper wrapper-r">
<nav class="nav-account nav-is-signedin nav-dd ui-right"> % if user.is_authenticated():
<h2 class="sr">Help &amp; Account Navigation</h2> <nav class="nav-account nav-is-signedin nav-dd ui-right">
<h2 class="sr">Help &amp; Account Navigation</h2>
<ol> <ol>
<li class="nav-item nav-account-help"> <li class="nav-item nav-account-help">
<h3 class="title"><span class="label">Help</span> <i class="icon-caret-down ui-toggle-dd"></i></h3> <h3 class="title"><span class="label">Help</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-help-documentation"> <li class="nav-item nav-help-documentation">
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">Studio Documentation</a> <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">Studio Documentation</a>
</li> </li>
<li class="nav-item nav-help-helpcenter"> <li class="nav-item nav-help-helpcenter">
<a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a> <a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
</li> </li>
<li class="nav-item nav-help-feedback"> <li class="nav-item nav-help-feedback">
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">Contact Us</a> <a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">Contact Us</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </li>
</li>
<li class="nav-item nav-account-user"> <li class="nav-item nav-account-user">
<h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3> <h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
<div class="wrapper wrapper-nav-sub"> <div class="wrapper wrapper-nav-sub">
<div class="nav-sub"> <div class="nav-sub">
<ul> <ul>
<li class="nav-item nav-account-dashboard"> <li class="nav-item nav-account-dashboard">
<a href="/">My Courses</a> <a href="/">My Courses</a>
</li> </li>
<li class="nav-item nav-account-help"> <li class="nav-item nav-account-help">
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a> <a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
</li> </li>
<li class="nav-item nav-account-signout"> <li class="nav-item nav-account-signout">
<a class="action action-signout" href="${reverse('logout')}">Sign Out</a> <a class="action action-signout" href="${reverse('logout')}">Sign Out</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </li>
</li> </ol>
</ol> </nav>
</nav>
% else: % else:
<nav class="nav-not-signedin nav-pitch"> <nav class="nav-not-signedin nav-pitch">
<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="http://help.edge.edx.org/" rel="external">Studio Help</a> <a href="http://help.edge.edx.org/" rel="external">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>
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