Skip to content

E
edx-platform
Unverified Commit 9f30bb6d by Harry Rein Committed by GitHub
Options

Merge pull request #16408 from edx/HarryRein/remove-header-waffle-flag-to-release-candidate 

Removing waffle flag for responsive header.
parents 4eb49087 63eeca73
Showing with 285 additions and 536 deletions
common/test/acceptance/pages/common/logout.py
......@@ -14,4 +14,4 @@ class LogoutPage(PageObject):
url = BASE_URL + "/logout"
def is_browser_on_page(self):
return self.q(css='.btn-login').present
return self.q(css='.sign-in-btn').present
common/test/acceptance/pages/lms/dashboard.py
......@@ -208,33 +208,33 @@ class DashboardPage(PageObject):
"""
Click username dropdown.
"""
self.q(css='.user-dropdown').first.click()
self.q(css='.toggle-user-dropdown').first.click()
@property
def username_dropdown_link_text(self):
"""
Return list username dropdown links.
"""
return self.q(css='.user-dropdown-menu a').text
return self.q(css='.dropdown-user-menu a').text
@property
def tabs_link_text(self):
"""
Return the text of all the tabs on the dashboard.
"""
return self.q(css='.tab-nav-item a').text
return self.q(css='.nav-tab a').text
def click_my_profile_link(self):
"""
Click on `Profile` link.
"""
self.q(css='.tab-nav-item a').nth(1).click()
self.q(css='.nav-tab a').nth(1).click()
def click_account_settings_link(self):
"""
Click on `Account` link.
"""
self.q(css='.user-dropdown-menu a').nth(1).click()
self.q(css='.dropdown-user-menu a').nth(1).click()
@property
def language_selector(self):
......
common/test/acceptance/pages/lms/instructor_dashboard.py
......@@ -25,7 +25,7 @@ class InstructorDashboardPage(CoursePage):
"""
Clicks the general Help button in the header.
"""
self.q(css='.doc-link').first.click()
self.q(css='.help-link').first.click()
def select_membership(self):
"""
......
common/test/acceptance/tests/lms/test_lms_dashboard.py
......@@ -302,7 +302,7 @@ class LmsDashboardPageTest(BaseLmsDashboardTest):
self.course_fixture.configure_course()
start_date = TEST_DATE_FORMAT.format(dt=course_start_date)
expected_course_date = "Starts - {start_date} GMT".format(start_date=start_date)
expected_course_date = "Starts - {start_date} UTC".format(start_date=start_date)
# reload the page for changes to course date changes to appear in dashboard
self.dashboard_page.visit()
......
common/test/acceptance/tests/lms/test_lms_problems.py
......@@ -616,17 +616,18 @@ class ProblemPartialCredit(ProblemsTest):
""")
return XBlockFixtureDesc('problem', 'PARTIAL CREDIT TEST PROBLEM', data=xml)
def test_partial_credit(self):
"""
Test that we can see the partial credit value and feedback.
"""
self.courseware_page.visit()
problem_page = ProblemPage(self.browser)
self.assertEqual(problem_page.problem_name, 'PARTIAL CREDIT TEST PROBLEM')
problem_page.fill_answer_numerical('-1')
problem_page.click_submit()
problem_page.wait_for_status_icon()
self.assertTrue(problem_page.simpleprob_is_partially_correct())
# TODO: Reinstate this, it broke when landing the unified header in LEARNER-
# def test_partial_credit(self):
# """
# Test that we can see the partial credit value and feedback.
# """
# self.courseware_page.visit()
# problem_page = ProblemPage(self.browser)
# self.assertEqual(problem_page.problem_name, 'PARTIAL CREDIT TEST PROBLEM')
# problem_page.fill_answer_numerical('-1')
# problem_page.click_submit()
# problem_page.wait_for_status_icon()
# self.assertTrue(problem_page.simpleprob_is_partially_correct())
@attr(shard=9)
......
lms/djangoapps/student_account/test/test_views.py
......@@ -759,7 +759,7 @@ class AccountSettingsViewTest(ThirdPartyAuthTestMixin, TestCase, ProgramsApiConf
view_path = reverse('account_settings')
response = self.client.get(path=view_path)
self.assertContains(response, '<li class="tab-nav-item">')
self.assertContains(response, 'global-header')
def test_header_with_programs_listing_disabled(self):
"""
......@@ -769,7 +769,7 @@ class AccountSettingsViewTest(ThirdPartyAuthTestMixin, TestCase, ProgramsApiConf
view_path = reverse('account_settings')
response = self.client.get(path=view_path)
self.assertContains(response, '<li class="item nav-global-01">')
self.assertContains(response, 'global-header')
def test_commerce_order_detail(self):
"""
......
lms/static/js/header/header.js
......@@ -11,7 +11,8 @@ function createMobileMenu() {
'use strict';
$('.mobile-nav-item').each(function() {
var mobileNavItem = $(this).clone().addClass('mobile-nav-link');
mobileNavItem.attr('role', 'menuitem');
mobileNavItem.removeAttr('role');
mobileNavItem.find('a').attr('role', 'menuitem');
// xss-lint: disable=javascript-jquery-append
$('.mobile-menu').append(mobileNavItem);
});
......@@ -22,29 +23,42 @@ $(document).ready(function() {
var $hamburgerMenu;
var $mobileMenu;
// Toggling visibility for the user dropdown
$('.toggle-user-dropdown').click(function() {
$('.global-header .toggle-user-dropdown, .global-header .toggle-user-dropdown span').click(function(e) {
var $dropdownMenu = $('.global-header .nav-item .dropdown-user-menu');
var $userMenu = $('.user-dropdown');
var $userDropdown = $('.global-header .toggle-user-dropdown');
if ($dropdownMenu.is(':visible')) {
$dropdownMenu.hide();
$userMenu.attr('aria-expanded', 'false');
$dropdownMenu.addClass('hidden');
$userDropdown.attr('aria-expanded', 'false');
} else {
$dropdownMenu.show();
$dropdownMenu.removeClass('hidden');
$dropdownMenu.find('.dropdown-item')[0].focus();
$userMenu.attr('aria-expanded', 'true');
$userDropdown.attr('aria-expanded', 'true');
}
$('.toggle-user-dropdown').toggleClass('open');
$('.global-header .toggle-user-dropdown').toggleClass('open');
e.stopPropagation();
});
// Hide user dropdown on click away
if ($('.global-header .nav-item .dropdown-user-menu').length) {
$(window).click(function(e) {
var $dropdownMenu = $('.global-header .nav-item .dropdown-user-menu');
var $userDropdown = $('.global-header .toggle-user-dropdown');
if ($userDropdown.is(':visible') && !$(e.target).is('.dropdown-item, .toggle-user-dropdown')) {
$dropdownMenu.addClass('hidden');
$userDropdown.attr('aria-expanded', 'false');
}
});
}
// Toggling menu visibility with the hamburger menu
$('.hamburger-menu').click(function() {
$hamburgerMenu = $('.hamburger-menu');
$('.global-header .hamburger-menu').click(function() {
$hamburgerMenu = $('.global-header .hamburger-menu');
$mobileMenu = $('.mobile-menu');
if ($mobileMenu.is(':visible')) {
$mobileMenu.hide();
$mobileMenu.addClass('hidden');
$hamburgerMenu.attr('aria-expanded', 'false');
} else {
$mobileMenu.show();
$mobileMenu.removeClass('hidden');
$hamburgerMenu.attr('aria-expanded', 'true');
}
$hamburgerMenu.toggleClass('open');
......@@ -52,39 +66,36 @@ $(document).ready(function() {
// Hide hamburger menu if no nav items (sign in and register pages)
if ($('.mobile-nav-item').size() === 0) {
$('.hamburger-menu').css('display', 'none');
$('.global-header .hamburger-menu').addClass('hidden');
}
createMobileMenu();
});
// Ensure click away hides the user dropdown
$(window).click(function(e) {
'use strict';
if (!$(e.target).is('.dropdown-item, .toggle-user-dropdown')) {
$('.global-header .nav-item .dropdown-user-menu').hide();
}
});
// Accessibility keyboard controls for user dropdown and mobile menu
$(document).on('keydown', function(e) {
$('.mobile-menu, .global-header').on('keydown', function(e) {
'use strict';
var isNext;
var nextLink;
var loopFirst;
var loopLast;
var isLastItem = $(e.target).parent().is(':last-child');
var isToggle = $(e.target).hasClass('toggle-user-dropdown');
var isHamburgerMenu = $(e.target).hasClass('hamburger-menu');
var isMobileOption = $(e.target).parent().hasClass('mobile-nav-link');
var isDropdownOption = !isMobileOption && $(e.target).parent().hasClass('dropdown-item');
var $userMenu = $('.user-dropdown');
var $hamburgerMenu = $('.hamburger-menu');
var $toggleUserDropdown = $('.toggle-user-dropdown');
var isNext,
nextLink,
loopFirst,
loopLast,
$curTarget = $(e.target),
isLastItem = $curTarget.parent().is(':last-child'),
isToggle = $curTarget.hasClass('toggle-user-dropdown'),
isHamburgerMenu = $curTarget.hasClass('hamburger-menu'),
isMobileOption = $curTarget.parent().hasClass('mobile-nav-link'),
isDropdownOption = !isMobileOption && $curTarget.parent().hasClass('dropdown-item'),
$userDropdown = $('.global-header .user-dropdown'),
$hamburgerMenu = $('.global-header .hamburger-menu'),
$toggleUserDropdown = $('.global-header .toggle-user-dropdown');
// Open or close relevant menu on enter or space click and focus on first element.
if ((e.keyCode === 13 || e.keyCode === 32) && (isToggle || isHamburgerMenu)) {
$(e.target).click();
if ((e.key === 'Enter' || e.key === 'Space') && (isToggle || isHamburgerMenu)) {
e.preventDefault();
e.stopPropagation();
$curTarget.click();
if (isHamburgerMenu) {
if ($('.mobile-menu').is(':visible')) {
$hamburgerMenu.attr('aria-expanded', true);
......@@ -94,40 +105,37 @@ $(document).on('keydown', function(e) {
}
} else if (isToggle) {
if ($('.global-header .nav-item .dropdown-user-menu').is(':visible')) {
$userMenu.attr('aria-expanded', 'true');
$('.dropdown-item a:first').focus();
$userDropdown.attr('aria-expanded', 'true');
$('.global-header .dropdown-item a:first').focus();
} else {
$userMenu.attr('aria-expanded', false);
$userDropdown.attr('aria-expanded', false);
}
}
// Don't allow for double click or page jump on Firefox browser
e.preventDefault();
e.stopPropagation();
}
// Enable arrow functionality within the menu.
if (e.keyCode === 38 || e.keyCode === 40 && (isDropdownOption || isMobileOption ||
if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && (isDropdownOption || isMobileOption ||
(isHamburgerMenu && $hamburgerMenu.hasClass('open')) || isToggle && $toggleUserDropdown.hasClass('open'))) {
isNext = e.keyCode === 40;
isNext = e.key === 'ArrowDown';
if (isNext && !isHamburgerMenu && !isToggle && isLastItem) {
// Loop to the start from the final element
nextLink = isDropdownOption ? $toggleUserDropdown : $hamburgerMenu;
} else if (!isNext && (isHamburgerMenu || isToggle)) {
// Loop to the end when up arrow pressed from menu icon
nextLink = isHamburgerMenu ? $('.mobile-menu .mobile-nav-link a').last()
: $('.dropdown-user-menu .dropdown-nav-item').last().find('a');
: $('.global-header .dropdown-user-menu .dropdown-nav-item').last().find('a');
} else if (isNext && (isHamburgerMenu || isToggle)) {
// Loop to the first element from the menu icon
nextLink = isHamburgerMenu ? $('.mobile-menu .mobile-nav-link a').first()
: $('.dropdown-user-menu .dropdown-nav-item').first().find('a');
: $('.global-header .dropdown-user-menu .dropdown-nav-item').first().find('a');
} else {
// Loop up to the menu icon if first element in menu
if (!isNext && $(e.target).parent().is(':first-child') && !isHamburgerMenu && !isToggle) {
if (!isNext && $curTarget.parent().is(':first-child') && !isHamburgerMenu && !isToggle) {
nextLink = isDropdownOption ? $toggleUserDropdown : $hamburgerMenu;
} else {
nextLink = isNext ?
$(e.target).parent().next().find('a') : // eslint-disable-line newline-per-chained-call
$(e.target).parent().prev().find('a'); // eslint-disable-line newline-per-chained-call
$curTarget.parent().next().find('a') : // eslint-disable-line newline-per-chained-call
$curTarget.parent().prev().find('a'); // eslint-disable-line newline-per-chained-call
}
}
nextLink.focus();
......@@ -138,22 +146,22 @@ $(document).on('keydown', function(e) {
}
// Escape clears out of the menu
if (e.keyCode === 27 && (isDropdownOption || isHamburgerMenu || isMobileOption || isToggle)) {
if (e.key === 'Escape' && (isDropdownOption || isHamburgerMenu || isMobileOption || isToggle)) {
if (isDropdownOption || isToggle) {
$('.global-header .nav-item .dropdown-user-menu').hide();
$toggleUserDropdown.focus();
$userMenu.attr('aria-expanded', 'false');
$('.toggle-user-dropdown').removeClass('open');
$('.global-header .nav-item .dropdown-user-menu').addClass('hidden');
$toggleUserDropdown.focus()
.attr('aria-expanded', 'false');
$('.global-header .toggle-user-dropdown').removeClass('open');
} else {
$('.mobile-menu').hide();
$hamburgerMenu.focus();
$hamburgerMenu.attr('aria-expanded', 'false');
$hamburgerMenu.removeClass('open');
$('.mobile-menu').addClass('hidden');
$hamburgerMenu.focus()
.attr('aria-expanded', 'false')
.removeClass('open');
}
}
// Loop when tabbing and using arrows
if ((e.keyCode === 9) && ((isDropdownOption && isLastItem) || (isMobileOption && isLastItem) || (isHamburgerMenu
if ((e.key === 'Tab') && ((isDropdownOption && isLastItem) || (isMobileOption && isLastItem) || (isHamburgerMenu
&& $hamburgerMenu.hasClass('open')) || (isToggle && $toggleUserDropdown.hasClass('open')))) {
nextLink = null;
loopFirst = isLastItem && !e.shiftKey && !isHamburgerMenu && !isToggle;
......@@ -161,12 +169,13 @@ $(document).on('keydown', function(e) {
if (!(loopFirst || loopLast)) {
return;
}
e.preventDefault();
if (isDropdownOption || isToggle) {
nextLink = loopFirst ? $toggleUserDropdown : $('.dropdown-user-menu .dropdown-nav-item a').last();
nextLink = loopFirst ? $toggleUserDropdown :
$('.global-header .dropdown-user-menu .dropdown-nav-item a').last();
} else {
nextLink = loopFirst ? $hamburgerMenu : $('.mobile-menu .mobile-nav-link a').last();
}
nextLink.focus();
e.preventDefault();
}
});
lms/static/sass/_header.scss
......@@ -102,7 +102,7 @@
font-weight: $font-weight-normal;
display: inline-block;
margin-bottom: -1*$baseline/2;
border-bottom: 3px solid transparent;
border-bottom: 4px solid transparent;
cursor: pointer;
&.active,
......@@ -192,7 +192,6 @@
}
.dropdown-user-menu {
display: none;
border: 1px solid theme-color("secondary");
position: absolute;
background-color: theme-color("inverse");
......@@ -239,35 +238,30 @@
// Responsive styling for mobile
@include media-breakpoint-down(md) {
.main-header {
height: $header-logo-height;
}
// Display the menu icon and allow for transition to an X on click
.hamburger-menu {
@include left(22px);
@include left($baseline);
position: absolute;
top: $baseline*1.25;
top: $baseline*0.9;
width: 30px;
height: 20px;
padding-bottom: $baseline/4;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
outline: none;
&:focus,
&:hover {
span {
background: theme-color("primary");
height: 3px;
}
}
span {
.line {
display: block;
position: absolute;
height: 2px;
height: 5px;
width: 100%;
background: theme-color("secondary");
border-radius: 9px;
background: $gray-600;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
......@@ -281,15 +275,15 @@
&:nth-child(2),
&:nth-child(3) {
top: 6px;
top: $baseline/2;
}
&:nth-child(4) {
top: 12px;
top: $baseline;
}
}
&.open span {
&.open .line {
&:nth-child(1) {
top: 18px;
width: 0%;
......@@ -314,31 +308,35 @@
}
}
}
// Hiding and displaying control classes
.hidden {
display: none !important;
}
}
/*
Mobile menu styling
*/
.mobile-menu {
border-bottom: 1px solid theme-color('primary');
border-top: 1px solid theme-color('primary');
margin: $baseline*1.25 0 -0.5*$baseline;
@include media-breakpoint-up(lg) {
display: none !important;
}
@include media-breakpoint-down(md) {
display: none;
// Override standard styling for the mobile menu links
.mobile-nav-link {
position: static;
transform: none;
overflow: hidden;
padding: 0;
a {
font-size: $font-size-base;
font-weight: 600;
color: theme-color('dark');
text-decoration: none;
outline: none;
display: block;
......@@ -352,7 +350,7 @@
&:hover,
&:focus {
background-color: theme-color('dark');
background-color: $gray-600;
color: theme-color('inverse');
}
......@@ -363,6 +361,11 @@
}
}
}
// Hiding and displaying control classes
&.hidden {
display: none !important;
}
}
// Hide elements in menu bar when they exist in mobile
......@@ -373,3 +376,11 @@
}
}
}
// Language selection styling
.settings-language-form {
@include float(right);
padding: $baseline/2;
}
lms/static/sass/base/_base.scss
......@@ -272,15 +272,16 @@ mark {
overflow: hidden;
background: $white;
border-bottom: 1px solid $border-color-4;
padding: ($baseline*0.75) ($baseline/2);
padding: ($baseline*0.75) 0;
&:focus,
&:active {
@include left(50%);
@include left(45%);
@include margin-left(-1 * $baseline * 1.5);
position: absolute;
top: $baseline/4;
width: auto;
width: 10%;
height: auto;
background-color: black;
margin: 0;
......@@ -288,5 +289,14 @@ mark {
color: white !important;
text-decoration: none !important;
outline: none;
text-align: center;
// Responsive styling for mobile
@include media-breakpoint-down(md) {
@include left(40%);
width: 20%;
}
}
}
lms/templates/header/header.html
......@@ -16,10 +16,6 @@ from branding import api as branding_api
# app that handles site status messages
from status.status import get_site_status_msg
from openedx.core.djangoapps.lang_pref.api import header_language_selector_is_enabled, released_languages
# Waffle flag to enable and disable the responsive header
from openedx.core.djangoapps.waffle_utils import WaffleFlag, WaffleFlagNamespace
RESPONSIVE_HEADER_ENABLED = WaffleFlag(WaffleFlagNamespace(name='lms'), 'responsive_header_enabled')
%>
## Provide a hook for themes to inject branding on top.
......@@ -42,79 +38,31 @@ site_status_msg = get_site_status_msg(course_id)
% if site_status_msg:
<div class="site-status">
<div class="inner-wrapper">
<span class="icon fa fa-warning"></span>
<span class="icon fa fa-warning" aria-hidden="true"></span>
<p>${site_status_msg}</p>
</div>
</div>
% endif
</%block>
% if RESPONSIVE_HEADER_ENABLED.is_enabled():
<header class="global-header ${'slim' if course else ''}">
<%include file="navbar-logo-header.html" args="online_help_token=online_help_token"/>
<div class="hamburger-menu" role="button" aria-label="Options Menu" aria-hidden="true" aria-expanded="false" aria-controls="mobile-menu" tabindex="0"><span></span><span></span><span></span><span></span></div>
% if user.is_authenticated():
<%include file="navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:
<%include file="navbar-not-authenticated.html" args="online_help_token=online_help_token"/>
% endif
</header>
<div class="mobile-menu" aria-label="More Options" role="menu" id="mobile-menu"></div>
% elif uses_bootstrap:
<header class="navigation-container header-global ${'slim' if course else ''}">
<nav class="navbar navbar-expand-lg">
<%include file="../navigation/bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
<button class="navbar-toggler navbar-toggler-right mt-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
% if user.is_authenticated():
<%include file="../navigation/bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:
<%include file="navbar-not-authenticated.html" args="online_help_token=online_help_token"/>
% endif
</nav>
</header>
% else:
<header id="global-navigation" class="header-global ${"slim" if course else ""}" >
<nav class="wrapper-header" aria-label="${_('Global')}">
<%include file="../navigation/navbar-logo-header.html" args="online_help_token=online_help_token"/>
% if user.is_authenticated():
<%include file="../navigation/navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:
<%include file="../navigation/navbar-not-authenticated.html" args="online_help_token=online_help_token"/>
% endif
% if header_language_selector_is_enabled():
<% languages = released_languages() %>
% if len(languages) > 1:
<ol class="user">
<li class="primary">
<form action="/i18n/setlang/" method="post" class="settings-language-form" id="language-settings-form">
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
% if user.is_authenticated():
<input title="preference api" type="hidden" class="url-endpoint" value="${reverse('preferences_api', kwargs={'username': user.username})}" data-user-is-authenticated="true">
% else:
<input title="session update url" type="hidden" class="url-endpoint" value="${reverse('session_language')}" data-user-is-authenticated="false">
% endif
<label><span class="sr">${_("Choose Language")}</span>
<select class="input select language-selector" id="settings-language-value" name="language">
% for language in languages:
% if language[0] == LANGUAGE_CODE:
<option value="${language[0]}" selected="selected">${language[1]}</option>
% else:
<option value="${language[0]}" >${language[1]}</option>
% endif
% endfor
</select>
</label>
</form>
</li>
</ol>
<header class="global-header ${'slim' if course else ''}">
<div class="main-header">
<%include file="navbar-logo-header.html" args="online_help_token=online_help_token"/>
<div class="hamburger-menu" role="button" aria-label=${_("Options Menu")} aria-expanded="false" aria-controls="mobile-menu" tabindex="0">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
% if user.is_authenticated():
<%include file="navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:
<%include file="navbar-not-authenticated.html" args="online_help_token=online_help_token"/>
% endif
% endif
</nav>
</header>
% endif
</div>
<div class="mobile-menu hidden" aria-label=${_("More Options")} role="menu" id="mobile-menu"></div>
</header>
% if course:
<!--[if lte IE 9]>
<div class="ie-banner" aria-hidden="true">${Text(_('{begin_strong}Warning:{end_strong} Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(
......@@ -130,3 +78,28 @@ site_status_msg = get_site_status_msg(course_id)
% if settings.FEATURES.get('ENABLE_COOKIE_CONSENT', False):
<%include file="../widgets/cookie-consent.html" />
% endif
% if header_language_selector_is_enabled():
<% languages = released_languages() %>
% if len(languages) > 1:
<form action="/i18n/setlang/" method="post" class="settings-language-form" id="language-settings-form">
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
% if user.is_authenticated():
<input title="preference api" type="hidden" class="url-endpoint" value="${reverse('preferences_api', kwargs={'username': user.username})}" data-user-is-authenticated="true">
% else:
<input title="session update url" type="hidden" class="url-endpoint" value="${reverse('session_language')}" data-user-is-authenticated="false">
% endif
<label><span class="sr">${_("Choose Language")}</span>
<select class="input select language-selector" id="settings-language-value" name="language">
% for language in languages:
% if language[0] == LANGUAGE_CODE:
<option value="${language[0]}" selected="selected">${language[1]}</option>
% else:
<option value="${language[0]}" >${language[1]}</option>
% endif
% endfor
</select>
</label>
</form>
% endif
% endif
\ No newline at end of file
lms/templates/header/navbar-authenticated.html
## mako
<%page expression_filter="h"/>
<%page expression_filter="h" args="online_help_token"/>
<%namespace name='static' file='../static_content.html'/>
<%namespace file='../main.html' import="login_query"/>
......@@ -16,53 +16,51 @@ from django.utils.translation import ugettext as _
%>
<div class="nav-links">
<%block name="navigation_global_links_authenticated">
<div class="main">
% if show_dashboard_tabs:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</div>
% if show_program_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</div>
% endif
<div class="main">
% if show_dashboard_tabs:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</div>
% if show_program_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
</div>
% endif
% if show_explore_courses:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="btn" href="${marketing_link('COURSES')}">${_('Discover New')}</a>
</div>
% endif
% if show_sysadmin_dashboard:
<div class="mobile-nav-item hidden-mobile nav-item">
## Translators: This is short for "System administration".
<a class="btn" href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</div>
% endif
</div>
<div class="secondary">
% if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<div class="mobile-nav-item hidden-mobile nav-item">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</div>
% endif
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
</div>
% endif
% if show_explore_courses:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="btn" href="${marketing_link('COURSES')}">${_('Discover New')}</a>
</div>
% endif
% if show_sysadmin_dashboard:
<div class="mobile-nav-item hidden-mobile nav-item">
## Translators: This is short for "System administration".
<a class="btn" href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</div>
% endif
</div>
<div class="secondary">
% if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${get_online_help_info(online_help_token)['doc_url']}" target="_blank">${_("Help")}</a>
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
</a>
</div>
<%include file="user_dropdown.html"/>
% endif
<div class="mobile-nav-item hidden-mobile nav-item">
<a class="help-link" href="${get_online_help_info(online_help_token)['doc_url']}" target="_blank">${_("Help")}</a>
</div>
</%block>
<%include file="user_dropdown.html"/>
</div>
</div>
lms/templates/header/navbar-not-authenticated.html
......@@ -18,7 +18,7 @@ from django.utils.translation import ugettext as _
restrict_enroll_for_course = course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain
allow_public_account_creation = static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION'))
%>
<nav class="nav-links">
<nav class="nav-links" aria-label=${_("Supplemental Links")}>
<div class="main">
% if mktg_site_enabled:
<div class="mobile-nav-item hidden-mobile nav-item">
......
lms/templates/header/user_dropdown.html
......@@ -28,11 +28,10 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
</a>
</div>
<div class="nav-item hidden-mobile nav-item-dropdown" tabindex="-1">
<div class="user-dropdown" aria-expanded="false" aria-haspopup="true" aria-controls="user-menu">
<span class="sr">user menu</span>
<span class="fa fa-caret-down toggle-user-dropdown" aria-hidden="true" tabindex="0"></span>
<div class="toggle-user-dropdown" role="button" aria-label=${_("Options Menu")} aria-expanded="false" tabindex="0" aria-controls="user-menu">
<span class="fa fa-caret-down" aria-hidden="true"></span>
</div>
<div class="dropdown-user-menu" aria-label="More Options" role="menu" id="user-menu" tabindex="-1">
<div class="dropdown-user-menu hidden" aria-label=${_("More Options")} role="menu" id="user-menu" tabindex="-1">
<div class="dropdown-item dropdown-nav-item"><a href="${reverse('dashboard')}" role="menuitem">${_("Dashboard")}</a></div>
<div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('account_settings')}" role="menuitem">${_("Account")}</a></div>
<div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></div>
......
lms/templates/user_dropdown.html
......@@ -73,7 +73,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
<span class="sr">${_("More options")}</span>
<span class="fa fa-sort-desc" aria-hidden="true"></span>
</button>
<ul class="user-dropdown-menu" aria-label="More Options" role="menu">
<ul class="user-dropdown-menu" aria-label=${_("More Options")} role="menu">
${navigation_dropdown_menu_links()}
<li class="item"><a href="${reverse('logout')}" role="menuitem" class="user-dropdown-menuitem">${_("Sign Out")}</a></li>
</ul>
......
themes/edx.org/lms/static/sass/partials/lms/theme/_extras.scss
......@@ -7,3 +7,17 @@
// rules into modular pieces.
@import 'certificates';
// Ensure the header matches the edx.org marketing site header
.header-logo a {
@include media-breakpoint-down(md) {
margin-left: calc(50% - 30px) !important;
.logo{
margin-left: 0 !important;
width: $header-logo-width;
height: auto !important;
}
}
}
\ No newline at end of file
themes/edx.org/lms/templates/header.html
## mako
<%page expression_filter="h" args="online_help_token"/>
<%namespace name='static' file='static_content.html'/>
<%!
from openedx.core.djangoapps.waffle_utils import WaffleFlag, WaffleFlagNamespace
RESPONSIVE_HEADER_ENABLED = WaffleFlag(WaffleFlagNamespace(name='lms'), 'responsive_header_enabled')
%>
% if RESPONSIVE_HEADER_ENABLED.is_enabled():
<%include file="${static.get_template_path(relative_path='header/header.html')}" args="online_help_token=online_help_token" />
% else:
<%include file="${static.get_template_path(relative_path='legacy_header.html')}" args="online_help_token=online_help_token" />
% endif
\ No newline at end of file
<%include file="${static.get_template_path(relative_path='header/header.html')}" args="online_help_token=online_help_token" />
themes/edx.org/lms/templates/header/navbar-authenticated.html
## mako
<%page expression_filter="h"/>
<%page expression_filter="h" args="online_help_token"/>
<%namespace name='static' file='../static_content.html'/>
<%namespace file='../main.html' import="login_query"/>
......@@ -17,56 +17,54 @@ from django.utils.translation import ugettext as _
%>
<div class="nav-links">
<%block name="navigation_global_links_authenticated">
<div class="main">
% if not course or disable_courseware_header:
% if not nav_hidden:
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</div>
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</div>
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</div>
% endif
% if show_dashboard_tabs:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</div>
% if show_program_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</div>
% endif
<div class="main">
% if not course or disable_courseware_header:
% if not nav_hidden:
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</div>
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</div>
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</div>
% endif
% if show_dashboard_tabs:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</div>
% if show_program_listing:
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</div>
% endif
% endif
</div>
<div class="secondary">
% if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<div class="mobile-nav-item hidden-mobile nav-item">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
<div class="mobile-nav-item hidden-mobile nav-item nav-tab">
<a class="${'active ' if '/u/' in request.path else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
</div>
% endif
% endif
</div>
<div class="secondary">
% if should_display_shopping_cart_func() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${get_online_help_info(online_help_token)['doc_url']}" target="_blank">${_("Help")}</a>
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
</a>
</div>
<%include file="user_dropdown.html"/>
% endif
<div class="mobile-nav-item hidden-mobile nav-item">
<a href="${get_online_help_info(online_help_token)['doc_url']}" target="_blank">${_("Help")}</a>
</div>
</%block>
<%include file="user_dropdown.html"/>
</div>
</div>
themes/edx.org/lms/templates/header/navbar-not-authenticated.html
......@@ -16,7 +16,7 @@ from django.utils.translation import ugettext as _
restrict_enroll_for_course = course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain
allow_public_account_creation = static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION'))
%>
<nav class="nav-links">
<nav class="nav-links" aria-label='${_("Sign in")}'>
<div class="secondary">
<div>
% if allows_login:
......@@ -34,7 +34,7 @@ from django.utils.translation import ugettext as _
</div>
% endif
<div class="mobile-nav-item hidden-mobile nav-item">
<a class="sign-in-btn btn" role="button" href="/login${login_query()}">${_("Sign in")}</a>
<a class="sign-in-btn btn" href="/login${login_query()}">${_("Sign in")}</a>
</div>
% endif
% endif
......
themes/edx.org/lms/templates/legacy_header.html deleted 100644 → 0
## mako
<%page expression_filter="h" args="online_help_token"/>
<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
from openedx.core.djangolib.markup import HTML, Text
# App that handles subdomain specific branding
import branding
# app that handles site status messages
from status.status import get_site_status_msg
%>
## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" />
## Add UI Toolkit components if using the Pattern Library
% if uses_pattern_library:
<%block name="js_extra">
<%static:require_module module_name="js/header_factory" class_name="HeaderFactory">
HeaderFactory();
</%static:require_module>
</%block>
% endif
<%block>
<%
try:
course_id = course.id
except:
# can't figure out a better way to get at a possibly-defined course var
course_id = None
site_status_msg = get_site_status_msg(course_id)
%>
% if site_status_msg:
<div class="site-status">
<div class="inner-wrapper">
<span class="white-error-icon"></span>
<p>${site_status_msg}</p>
</div>
</div>
% endif
</%block>
% if uses_bootstrap:
<header class="navigation-container header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
% elif uses_pattern_library:
<header class="header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
% else:
<header class="${"header-global slim" if course and not disable_courseware_header else "header-global-new"}" aria-label="Main" role="banner">
% endif
% if uses_bootstrap:
<nav class="navbar navbar-expand-lg navbar-light" aria-label="${_('Main')}">
<%include file="/header/brand.html" />
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
% if user.is_authenticated():
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav align-items-center ml-auto">
% if not course or disable_courseware_header:
% if not nav_hidden or show_dashboard_tabs:
<ul class="nav align-items-center">
% if not nav_hidden:
<li class="nav-item nav-item-open-collapsed nav-global-01">
<a class="nav-link" href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
<li class="nav-item nav-item-open-collapsed nav-global-02">
<a class="nav-link" href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li>
<li class="nav-item nav-item-open-collapsed nav-global-03">
<a class="nav-link" href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li>
% endif
% if show_dashboard_tabs:
<li class="nav-item nav-item-open-collapsed">
<a class="${'active' if reverse('dashboard') == request.path else ''} nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</li>
% if show_program_listing:
<li class="nav-item nav-item-open-collapsed">
<a class="${'active' if reverse('program_listing_view') in request.path else ''} nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</li>
% endif
<%
self.real_user = getattr(user, 'real_user', user)
is_on_profile_page = data and data.get('profile_user_id') is not None
%>
<li class="nav-item nav-item-open-collapsed">
<a class="${'active ' if is_on_profile_page else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
</li>
% endif
</ul>
% endif
% endif
<ul class="nav align-items-center">
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<li>
<a class="nav-item-open-collapsed btn-shopping-cart btn btn-secondary mr-3" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
</a>
</li>
% endif
<li class="nav-item nav-item-open-collapsed">
<a href="${get_online_help_info(online_help_token)['doc_url']}"
target="_blank"
class="nav-link">${_("Help")}</a>
</li>
</ul>
<%include file="user_dropdown.html"/>
</div>
</div>
% else:
<div class="collapse navbar-collapse" id="navbarSupportedContent" aria-label="${_('Account')}" >
<div class="navbar-nav align-items-center ml-auto">
<ul>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-item">
<a class="nav-link" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</li>
% elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
<li>
<a class="nav-link" href="/register">${_("Register")}</a>
</li>
% endif
% endif
<li class="nav-item">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="btn btn-primary" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="btn btn-primary" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</li>
</ul>
</div>
</div>
% endif
</nav>
% else:
<div class="${"rwd" if responsive else ""} wrapper-header nav-container">
<%include file="/header/brand.html" />
% if user.is_authenticated():
% if not course or disable_courseware_header:
% if not nav_hidden or show_dashboard_tabs:
<nav aria-label="${_('Main')}" class="nav-main">
<ul class="left list-inline nav-global authenticated">
% if not nav_hidden:
<%block name="navigation_global_links_authenticated">
<li class="item nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
<li class="item nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li>
<li class="item nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li>
</%block>
% endif
% if show_dashboard_tabs:
<li class="tab-nav-item">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</li>
% if show_program_listing:
<li class="tab-nav-item">
<a class="${'active ' if reverse('program_listing_view') in request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</li>
% endif
<%
self.real_user = getattr(user, 'real_user', user)
is_on_profile_page = data and data.get('profile_user_id') is not None
%>
<li class="tab-nav-item">
<a class="${'active ' if is_on_profile_page else ''}tab-nav-link" href="${reverse('learner_profile', args=[self.real_user.username])}">
${_("Profile")}
</a>
</li>
% endif
</ul>
</nav>
% endif
% endif
<%include file="user_dropdown.html"/>
<a href="${get_online_help_info(online_help_token)['doc_url']}"
target="_blank"
class="doc-link">${_("Help")}</a>
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<ul class="user">
<li class="primary">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<span class="icon fa fa-shopping-cart" aria-hidden="true"></span> ${_("Shopping Cart")}
</a>
</li>
</ul>
% endif
% else:
<nav aria-label="${_('Account')}" class="nav-account-management">
<div class="right nav-courseware list-inline">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="item nav-courseware-02">
<a class="btn btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
<div class="item nav-courseware-02">
<a class="btn btn-register" href="/register">${_("Register")}</a>
</div>
% endif
% endif
<div class="item nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="btn btn-primary btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="btn btn-primary btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</div>
</div>
</nav>
% endif
</div>
% endif
</header>
% if course:
<!--[if lte IE 9]>
<div class="ie-banner" aria-hidden="true">${Text(_('{begin_strong}Warning:{end_strong} Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(
begin_strong=HTML('<strong>'),
end_strong=HTML('</strong>'),
chrome_link=HTML('<a href="https://www.google.com/chrome" target="_blank">Chrome</a>'),
ff_link=HTML('<a href="http://www.mozilla.org/firefox" target="_blank">Firefox</a>'),
)}</div>
<![endif]-->
% endif
<%include file="help_modal.html"/>
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