Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - wraps nav elements in floated containers for easier layout

Browse Source
This commit is contained in:
Brian Talbot
2013-07-01 15:13:55 -04:00
parent beaa597901
commit 41fa73b695
2 changed files with 189 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
cms/static/sass/elements/_header.scss
View File

@@ -22,6 +22,23 @@
// ====================
// 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 {
@include box-sizing(border-box);
display: inline-block;
@@ -29,13 +46,6 @@
}
// basic layout - nav items
.nav-item {
.title {
}
}
nav {
> ol > .nav-item {
@@ -116,9 +126,9 @@
// specific elements - course name/info
.info-course {
margin-right: ($baseline*0.75);
margin-right: flex-gutter();
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 {
@extend .t-action4;
@@ -169,7 +179,6 @@
.nav-account {
position: relative;
padding: ($baseline*0.75) 0;
text-align: right;
.nav-sub {
text-align: left;
@@ -199,7 +208,6 @@
.nav-pitch {
position: relative;
padding: ($baseline*0.75) 0;
text-align: right;
.nav-sub {
text-align: left;
@@ -212,16 +220,21 @@
// CASE: user signed in
.is-signedin {
.wrapper-header {
.wrapper-l {
width: flex-grid(9,12);
}
.branding {
width: 15%;
margin-right: 2%;
}
.wrapper-r {
width: flex-grid(3,12);
}
.nav-account {
width: 80%;
}
.branding {
width: 20%;
margin-right: 2%;
}
.nav-account {
top: ($baseline/4);
}
}
@@ -232,21 +245,26 @@
.wrapper-header {
.wrapper-l {
width: flex-grid(9,12);
}
.wrapper-r {
width: flex-grid(3,12);
}
.branding {
width: 15%;
width: 20%;
margin-right: 2%;
}
.info-course {
width: 25%;
margin-right: 2%;
}
.nav-course {
width: 34%;
}
.nav-account {
width: 20%;
width: 45%;
}
}
}
@@ -258,13 +276,20 @@
.wrapper-header {
.wrapper-l {
width: flex-grid(2,12);
}
.wrapper-r {
width: flex-grid(10,12);
}
.branding {
width: 15%;
margin-right: 2%;
width: 100%;
}
.nav-pitch {
width: 80%;
top: ($baseline/4);
.nav-item {
margin-right: ($baseline/2);

268
cms/templates/widgets/header.html
View File

@@ -2,156 +2,160 @@
<div class="wrapper-header wrapper" id="view-top">
<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:
<% ctx_loc = context_course.location %>
<h2 class="info-course">
<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))}">
<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>
</a>
</h2>
% if context_course:
<% ctx_loc = context_course.location %>
<h2 class="info-course">
<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))}">
<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>
</a>
</h2>
<nav class="nav-course nav-dd ui-left">
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>
<nav class="nav-course nav-dd ui-left">
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>
<ol>
<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>
<ol>
<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>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<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>
</li>
<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>
</li>
<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>
</li>
</ul>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<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>
</li>
<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>
</li>
<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>
</li>
</ul>
</div>
</div>
</div>
</li>
</li>
<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>
<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>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<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>
</li>
<li class="nav-item nav-course-settings-team">
<a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a>
</li>
<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>
</li>
</ul>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<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>
</li>
<li class="nav-item nav-course-settings-team">
<a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a>
</li>
<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>
</li>
</ul>
</div>
</div>
</div>
</li>
</li>
<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>
<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>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<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>
</li>
<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>
</li>
</ul>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<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>
</li>
<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>
</li>
</ul>
</div>
</div>
</div>
</li>
</ol>
</nav>
% endif
</li>
</ol>
</nav>
% endif
</div>
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin nav-dd ui-right">
<h2 class="sr">Help &amp; Account Navigation</h2>
<div class="wrapper wrapper-r">
% if user.is_authenticated():
<nav class="nav-account nav-is-signedin nav-dd ui-right">
<h2 class="sr">Help &amp; Account Navigation</h2>
<ol>
<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>
<ol>
<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>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<li class="nav-item nav-help-helpcenter">
<a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
</li>
<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>
</li>
</ul>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<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>
</li>
<li class="nav-item nav-help-helpcenter">
<a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
</li>
<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>
</li>
</ul>
</div>
</div>
</div>
</li>
</li>
<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>
<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>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item nav-account-dashboard">
<a href="/">My Courses</a>
</li>
<li class="nav-item nav-account-help">
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
</li>
<li class="nav-item nav-account-signout">
<a class="action action-signout" href="${reverse('logout')}">Sign Out</a>
</li>
</ul>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<ul>
<li class="nav-item nav-account-dashboard">
<a href="/">My Courses</a>
</li>
<li class="nav-item nav-account-help">
<a href="http://help.edge.edx.org/" rel="external">Studio Help</a>
</li>
<li class="nav-item nav-account-signout">
<a class="action action-signout" href="${reverse('logout')}">Sign Out</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ol>
</nav>
</li>
</ol>
</nav>
% else:
<nav class="nav-not-signedin nav-pitch">
<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="http://help.edge.edx.org/" rel="external">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
% else:
<nav class="nav-not-signedin nav-pitch">
<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="http://help.edge.edx.org/" rel="external">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>