Commit 7ea3b013 by Harry Rein Committed by Andy Armstrong

Style LMS header, footer and nav for Bootstrap.

parent 3cd985da
...@@ -87,6 +87,7 @@ DEBUG_TOOLBAR_CONFIG = { ...@@ -87,6 +87,7 @@ DEBUG_TOOLBAR_CONFIG = {
'debug_toolbar.panels.profiling.ProfilingPanel', 'debug_toolbar.panels.profiling.ProfilingPanel',
), ),
'SHOW_TOOLBAR_CALLBACK': 'cms.envs.devstack.should_show_debug_toolbar', 'SHOW_TOOLBAR_CALLBACK': 'cms.envs.devstack.should_show_debug_toolbar',
'JQUERY_URL': None,
} }
......
...@@ -169,26 +169,26 @@ class DashboardPage(PageObject): ...@@ -169,26 +169,26 @@ class DashboardPage(PageObject):
""" """
Click username dropdown. Click username dropdown.
""" """
self.q(css='.dropdown').first.click() self.q(css='.user-dropdown').first.click()
@property @property
def username_dropdown_link_text(self): def username_dropdown_link_text(self):
""" """
Return list username dropdown links. Return list username dropdown links.
""" """
return self.q(css='.dropdown-menu li a').text return self.q(css='.user-dropdown-menu li a').text
def click_my_profile_link(self): def click_my_profile_link(self):
""" """
Click on `Profile` link. Click on `Profile` link.
""" """
self.q(css='.dropdown-menu li a').nth(1).click() self.q(css='.user-dropdown-menu li a').nth(1).click()
def click_account_settings_link(self): def click_account_settings_link(self):
""" """
Click on `Account` link. Click on `Account` link.
""" """
self.q(css='.dropdown-menu li a').nth(2).click() self.q(css='.user-dropdown-menu li a').nth(2).click()
@property @property
def language_selector(self): def language_selector(self):
......
...@@ -417,6 +417,7 @@ COMMON_ROOT = REPO_ROOT / "common" ...@@ -417,6 +417,7 @@ COMMON_ROOT = REPO_ROOT / "common"
OPENEDX_ROOT = REPO_ROOT / "openedx" OPENEDX_ROOT = REPO_ROOT / "openedx"
ENV_ROOT = REPO_ROOT.dirname() # virtualenv dir /edx-platform is in ENV_ROOT = REPO_ROOT.dirname() # virtualenv dir /edx-platform is in
COURSES_ROOT = ENV_ROOT / "data" COURSES_ROOT = ENV_ROOT / "data"
NODE_MODULES_ROOT = REPO_ROOT / "node_modules"
DATA_DIR = COURSES_ROOT DATA_DIR = COURSES_ROOT
...@@ -427,7 +428,7 @@ sys.path.append(COMMON_ROOT / 'djangoapps') ...@@ -427,7 +428,7 @@ sys.path.append(COMMON_ROOT / 'djangoapps')
# For Node.js # For Node.js
system_node_path = os.environ.get("NODE_PATH", REPO_ROOT / 'node_modules') system_node_path = os.environ.get("NODE_PATH", NODE_MODULES_ROOT)
node_paths = [ node_paths = [
COMMON_ROOT / "static/js/vendor", COMMON_ROOT / "static/js/vendor",
...@@ -1340,7 +1341,7 @@ main_vendor_js = base_vendor_js + [ ...@@ -1340,7 +1341,7 @@ main_vendor_js = base_vendor_js + [
base_application_js = [ base_application_js = [
'js/src/utility.js', 'js/src/utility.js',
'js/src/logger.js', 'js/src/logger.js',
'js/my_courses_dropdown.js', 'js/user_dropdown_v1.js', # Custom dropdown keyboard handling for legacy pages
'js/dialog_tab_controls.js', 'js/dialog_tab_controls.js',
'js/src/string_utils.js', 'js/src/string_utils.js',
'js/form.ext.js', 'js/form.ext.js',
...@@ -1612,7 +1613,6 @@ PIPELINE_JS = { ...@@ -1612,7 +1613,6 @@ PIPELINE_JS = {
'source_filenames': base_application_js, 'source_filenames': base_application_js,
'output_filename': 'js/lms-base-application.js', 'output_filename': 'js/lms-base-application.js',
}, },
'application': { 'application': {
'source_filenames': ( 'source_filenames': (
common_js + xblock_runtime_js + base_application_js + lms_application_js + common_js + xblock_runtime_js + base_application_js + lms_application_js +
...@@ -1641,6 +1641,13 @@ PIPELINE_JS = { ...@@ -1641,6 +1641,13 @@ PIPELINE_JS = {
'source_filenames': main_vendor_js, 'source_filenames': main_vendor_js,
'output_filename': 'js/lms-main_vendor.js', 'output_filename': 'js/lms-main_vendor.js',
}, },
'lms_bootstrap': {
'source_filenames': [
'common/js/vendor/tether.js',
'common/js/vendor/bootstrap.js',
],
'output_filename': 'js/lms-bootstrap.js',
},
'module-descriptor-js': { 'module-descriptor-js': {
'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'), 'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'),
'output_filename': 'js/lms-module-descriptors.js', 'output_filename': 'js/lms-module-descriptors.js',
......
...@@ -84,7 +84,8 @@ DEBUG_TOOLBAR_PANELS = ( ...@@ -84,7 +84,8 @@ DEBUG_TOOLBAR_PANELS = (
) )
DEBUG_TOOLBAR_CONFIG = { DEBUG_TOOLBAR_CONFIG = {
'SHOW_TOOLBAR_CALLBACK': 'lms.envs.devstack.should_show_debug_toolbar' 'SHOW_TOOLBAR_CALLBACK': 'lms.envs.devstack.should_show_debug_toolbar',
'JQUERY_URL': None,
} }
......
/**
* Keyboard support for the user dropdown on legacy pages.
*
* Note: this is not used for Pattern Library or Bootstrap pages.
*/
$(document).ready(function() { $(document).ready(function() {
'use strict'; 'use strict';
// define variables for code legibility // define variables for code legibility
var $dropdownMenuToggle = $('.dropdown'); var $dropdownMenuToggle = $('.user-dropdown');
var $dropdownMenu = $('.dropdown-menu'); var $dropdownMenu = $('.user-dropdown-menu');
var menuItems = $dropdownMenu.find('.dropdown-menuitem'); var menuItems = $dropdownMenu.find('.dropdown-menuitem');
var keyCodes = { var keyCodes = {
......
// Open edX: LMS footer
// ====================
.wrapper-footer {
box-shadow: 0 -1px 5px 0 $black-t0;
border-top: 1px solid $navbar-light-disabled-color;
background-color: $body-bg;
margin-top: $baseline/2;
padding: $baseline;
font-family: $font-family-sans-serif;
footer {
max-width: $lms-max-width;
margin: 0 auto;
.site-nav {
padding: 0;
.nav-item {
margin-right: $baseline;
.nav-link {
text-decoration: none;
padding: 0;
color: $brand-inverse;
&:hover {
color: $brand-primary;
}
}
}
}
.legal-nav {
padding: 0;
.nav-item {
.nav-link {
text-decoration: none;
padding: 0;
margin-right: $baseline/4;
font-size: $font-size-sm;
}
}
li:not(:first-child) a:before {
content: "- ";
}
}
footer-language-selector {
margin: $baseline 0;
}
.copyright {
margin-top: $baseline;
font-size: $font-size-xs;
color: $gray-dark;
}
.footer-about-openedx {
float: right;
}
}
}
// LMS layouts
.content-wrapper {
.course-tabs {
padding-bottom: none;
.nav-item {
&.active, &:hover{
.nav-link {
border-bottom-color: $brand-primary;
color: $brand-primary;
}
}
.nav-link {
padding: $baseline/2 $baseline*3/4 $baseline*13/20;
border-style: solid;
border-width: 0 0 $baseline/5 0;
border-bottom-color: transparent;
@media (max-width: map-get($grid-breakpoints, md)) {
border: none;
text-align: left;
padding: 0 0 $baseline/2 0;
}
}
}
}
.main-container {
border: 1px solid $inverse-color;
background-color: $body-bg;
.page-header {
border-bottom: 1px solid $inverse-color;
padding: 20px;
}
.page-content {
padding: 20px;
}
}
&.container-fluid {
max-width: $lms-max-width;
}
}
// Local overrides for bootstrap navigation bar theming
.navigation-container {
border-bottom: 1px solid $brand-primary;
text-decoration: none;
&.slim {
border-bottom: 1px solid $inverse-color;
box-shadow: 0 1px 5px 0 $black-t0;
}
.navbar {
margin: 0 auto;
max-width: map-get($container-max-widths, xl);
.logo.slim a {
height: $baseline*3/2;
margin-top: $baseline/5;
}
.course-header {
font-size: $font-size-lg;
margin: $baseline/2 $baseline/2 0 0;
.provider {
font-weight: $font-weight-bold;
}
}
.nav-item {
margin: 0 $baseline 0 0;
font-weight: $font-weight-normal;
font-family: $font-family-sans-serif;
text-transform: uppercase;
list-style: none;
.nav-link {
color: $brand-primary;
}
.user-image-frame {
max-width: $baseline*2;
border-radius: $border-radius;
}
// Dealing with creating a collapsed menu
&.nav-item-open-collapsed-only {
display: none;
}
@media (max-width: map-get($grid-breakpoints,lg)) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
display: initial;
margin: $baseline/4 $baseline/2;
a {
color: $brand-primary;
padding: 0;
text-decoration: none;
&:hover {
color: $input-border-color;
}
}
}
&.nav-item-hidden-collapsed {
display: none;
}
}
}
.btn-shopping-cart{
padding-top: 0.7rem; // $btn-padding-y-lg once themed
}
.navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,lg)) {
.nav-link {
text-transform: none;
color: $brand-inverse;
font-weight: $font-weight-bold;
cursor: pointer;
}
}
&.dropdown {
cursor: pointer;
.dropdown-item {
text-transform: initial;
}
}
}
}
}
// lms - bootstrap utilities - variables
// ====================
// #Units: Unit variables
// #GRID: Grid and layout variables
// #COLORS: Base, palette and theme color definitions + application
// #TYPOGRAPHY: Font definitions and scales
// #ICONS: Icon specific colors + other styling
// ----------------------------
// #UNITS
// ----------------------------
$baseline: 20px !default;
// ----------------------------
// #GRID
// ----------------------------
$lms-max-width: 1180px !default;
// ----------------------------
// #COLORS
// ----------------------------
$lms-gray: palette(grayscale, base) !default;
$lms-background-color: palette(grayscale, x-back) !default;
$lms-container-background-color: $white !default;
$lms-border-color: palette(grayscale, back) !default;
$lms-label-color: palette(grayscale, black) !default;
$lms-active-color: palette(primary, base) !default;
$lms-preview-menu-color: #c8c8c8 !default;
$success-color: palette(success, accent) !default;
$success-color-hover: palette(success, text) !default;
$button-bg-hover-color: $white !default;
$white-transparent: rgba(255, 255, 255, 0) !default;
$white-opacity-40: rgba(255, 255, 255, 0.4) !default;
$white-opacity-60: rgba(255, 255, 255, 0.6) !default;
$white-opacity-70: rgba(255, 255, 255, 0.7) !default;
$white-opacity-80: rgba(255, 255, 255, 0.8) !default;
$black: rgb(0,0,0) !default;
$black-t0: rgba($black, 0.125) !default;
$black-t1: rgba($black, 0.25) !default;
$black-t2: rgba($black, 0.5) !default;
$black-t3: rgba($black, 0.75) !default;
$light-grey-transparent: rgba(200,200,200, 0) !default;
$light-grey-solid: rgba(200,200,200, 1) !default;
// ----------------------------
// #TYPOGRAPHY
// ----------------------------
$font-light: 300 !default;
$font-regular: 400 !default;
$font-semibold: 600 !default;
$font-bold: 700 !default;
// ----------------------------
// #ICONS
// ----------------------------
// Icons
$lms-dark-icon-color: $white !default;
$lms-dark-icon-background-color: palette(grayscale, black) !default;
$site-status-color: rgb(182,37,103) !default;
$shadow-l1: rgba(0,0,0,0.1) !default;
...@@ -5,3 +5,12 @@ ...@@ -5,3 +5,12 @@
// Bootstrap theme // Bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme'; @import 'edx-bootstrap/sass/open-edx/theme';
@import 'bootstrap/scss/bootstrap'; @import 'bootstrap/scss/bootstrap';
// Variables
@import 'variables';
// Elements
@import 'footer';
@import 'navigation';
@import 'layouts';
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
} }
} }
.dropdown { .user-dropdown {
font-size: $body-font-size; font-size: $body-font-size;
padding: 0 ($baseline/2); padding: 0 ($baseline/2);
color: $base-font-color; color: $base-font-color;
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
text-shadow: none; text-shadow: none;
} }
.dropdown-menu { .user-dropdown-menu {
background: $white; background: $white;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3); box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
......
...@@ -9,75 +9,126 @@ ...@@ -9,75 +9,126 @@
<% footer = get_footer(is_secure=is_secure) %> <% footer = get_footer(is_secure=is_secure) %>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<div class="wrapper wrapper-footer"> % if uses_bootstrap:
<footer id="footer-openedx" class="grid-container" <div class="container-fluid wrapper-footer">
## When rendering the footer through the branding API, <footer>
## the direction may not be set on the parent element, <div class="row">
## so we set it here. <div class="col-md-9">
% if bidi: <nav class="navbar site-nav navbar-toggleable-sm navbar-light" aria-label="${_('About')}">
dir=${bidi} <ul class="navbar-nav">
% endif % for item_num, link in enumerate(footer['navigation_links'], start=1):
> <li class="nav-item">
<div class="colophon"> <a class="nav-link" href="${link['url']}">${link['title']}</a>
<nav class="nav-colophon" aria-label="${_('About')}"> </li>
<ol> % endfor
% for item_num, link in enumerate(footer['navigation_links'], start=1): </ul>
<li class="nav-colophon-0${item_num}"> </nav>
<a id="${link['name']}" href="${link['url']}">${link['title']}</a>
</li> ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
% endfor <p class="copyright">${footer['copyright']} ${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}</p>
</ol>
</nav>
% if context.get('include_language_selector', footer_language_selector_is_enabled()): <nav class="navbar legal-nav navbar-toggleable-sm navbar-light" aria-label="${_('Legal')}">
<%include file="${static.get_template_path('widgets/footer-language-selector.html')}"/> <ul class="navbar-nav">
% for item_num, link in enumerate(footer['legal_links'], start=1):
<li class="nav-item">
<a class="nav-link" href="${link['url']}">${link['title']}</a>
</li>
% endfor
<li class="nav-item">
<a class="nav-link" href="${footer['edx_org_link']['url']}">${footer['edx_org_link']['text']}</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-3">
## Please leave this link and use one of the logos provided
## The OpenEdX link may be hidden when this view is served
## through an API to partner sites (such as marketing sites or blogs),
## which are not technically powered by Open edX.
% if not hide_openedx_link:
<div class="footer-about-openedx">
<p>
<a href="${footer['openedx_link']['url']}">
<img src="${footer['openedx_link']['image']}" alt="${footer['openedx_link']['title']}" width="140" />
</a>
</p>
</div>
% endif
</div>
</div>
</footer>
</div>
% else:
<div class="wrapper wrapper-footer">
<footer id="footer-openedx" class="grid-container"
## When rendering the footer through the branding API,
## the direction may not be set on the parent element,
## so we set it here.
% if bidi:
dir=${bidi}
% endif % endif
>
<div class="colophon">
<nav class="nav-colophon" aria-label="${_('About')}">
<ol>
% for item_num, link in enumerate(footer['navigation_links'], start=1):
<li class="nav-colophon-0${item_num}">
<a id="${link['name']}" href="${link['url']}">${link['title']}</a>
</li>
% endfor
</ol>
</nav>
% if context.get('include_language_selector', footer_language_selector_is_enabled()):
<%include file="${static.get_template_path('widgets/footer-language-selector.html')}"/>
% endif
<div class="wrapper-logo">
<p>
<a href="/">
## The default logo is a placeholder.
## You can either replace this link entirely or update
## the FOOTER_ORGANIZATION_IMAGE in Django settings.
## If you customize FOOTER_ORGANIZATION_IMAGE, then the image
## can be included in the footer on other sites
## (e.g. a blog or marketing front-end) to provide a consistent
## user experience. See the branding app for details.
<img alt="organization logo" src="${footer['logo_image']}">
</a>
</p>
</div>
## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.
<p class="copyright">${footer['copyright']} ${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}</p>
<nav class="nav-legal" aria-label="${_('Legal')}">
<ul>
% for item_num, link in enumerate(footer['legal_links'], start=1):
<li class="nav-legal-0${item_num}">
<a href="${link['url']}">${link['title']}</a>
</li>
% endfor
<li><a href="${footer['edx_org_link']['url']}">${footer['edx_org_link']['text']}</a></li>
</ul>
</nav>
</div>
<div class="wrapper-logo"> ## Please leave this link and use one of the logos provided
## The OpenEdX link may be hidden when this view is served
## through an API to partner sites (such as marketing sites or blogs),
## which are not technically powered by OpenEdX.
% if not hide_openedx_link:
<div class="footer-about-openedx">
<p> <p>
<a href="/"> <a href="${footer['openedx_link']['url']}">
## The default logo is a placeholder. <img src="${footer['openedx_link']['image']}" alt="${footer['openedx_link']['title']}" width="140" />
## You can either replace this link entirely or update
## the FOOTER_ORGANIZATION_IMAGE in Django settings.
## If you customize FOOTER_ORGANIZATION_IMAGE, then the image
## can be included in the footer on other sites
## (e.g. a blog or marketing front-end) to provide a consistent
## user experience. See the branding app for details.
<img alt="organization logo" src="${footer['logo_image']}">
</a> </a>
</p> </p>
</div> </div>
% endif
## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear. </footer>
<p class="copyright">${footer['copyright']} ${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}</p> </div>
% endif
<nav class="nav-legal" aria-label="${_('Legal')}">
<ul>
% for item_num, link in enumerate(footer['legal_links'], start=1):
<li class="nav-legal-0${item_num}">
<a href="${link['url']}">${link['title']}</a>
</li>
% endfor
<li><a href="${footer['edx_org_link']['url']}">${footer['edx_org_link']['text']}</a></li>
</ul>
</nav>
</div>
## Please leave this link and use one of the logos provided
## The Open edX link may be hidden when this view is served
## through an API to partner sites (such as marketing sites or blogs),
## which are not technically powered by Open edX.
% if not hide_openedx_link:
<div class="footer-about-openedx">
<p>
<a href="${footer['openedx_link']['url']}">
<img src="${footer['openedx_link']['image']}" alt="${footer['openedx_link']['title']}" width="140" />
</a>
</p>
</div>
% endif
</footer>
</div>
% if include_dependencies: % if include_dependencies:
<%static:js group='base_vendor'/> <%static:js group='base_vendor'/>
<%static:css group='style-vendor'/> <%static:css group='style-vendor'/>
......
## mako ## mako
<%page expression_filter="h" args="online_help_token"/> <%page expression_filter="h" args="online_help_token"/>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%include file="${static.get_template_path(relative_path='navigation.html')}" args="online_help_token=online_help_token" /> <%include file="${static.get_template_path(relative_path='navigation/navigation.html')}" args="online_help_token=online_help_token" />
...@@ -13,12 +13,14 @@ ...@@ -13,12 +13,14 @@
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %> <% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
<%! <%!
from branding import api as branding_api
from django.core.urlresolvers import reverse from django.core.urlresolvers import reverse
from django.utils.http import urlquote_plus from django.utils.http import urlquote_plus
from django.utils.translation import ugettext as _ from django.utils.translation import ugettext as _
from django.utils.translation import get_language_bidi from django.utils.translation import get_language_bidi
from branding import api as branding_api from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
from pipeline_mako import render_require_js_path_overrides from pipeline_mako import render_require_js_path_overrides
%> %>
<!DOCTYPE html> <!DOCTYPE html>
<!--[if lte IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if lte IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
...@@ -67,28 +69,20 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -67,28 +69,20 @@ from pipeline_mako import render_require_js_path_overrides
<%static:css group='${self.attr.main_css}'/> <%static:css group='${self.attr.main_css}'/>
% endif % endif
% if not uses_pattern_library: % if disable_courseware_js or uses_pattern_library:
% if disable_courseware_js:
<%static:js group='base_vendor'/>
<%static:js group='base_application'/>
% else:
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif
% else:
## TODO: Update to only bring in RequireJS
## https://openedx.atlassian.net/browse/FEDX-140
<%static:js group='base_vendor'/> <%static:js group='base_vendor'/>
<%static:js group='base_application'/> <%static:js group='base_application'/>
% else:
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif % endif
% if uses_bootstrap: % if uses_bootstrap:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <%static:js group='lms_bootstrap'/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
% endif % endif
<script> <script>
window.baseUrl = "${settings.STATIC_URL}"; window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
(function (require) { (function (require) {
require.config({ require.config({
baseUrl: window.baseUrl baseUrl: window.baseUrl
...@@ -97,7 +91,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -97,7 +91,7 @@ from pipeline_mako import render_require_js_path_overrides
</script> </script>
<script type="text/javascript" src="${static.url("lms/js/require-config.js")}"></script> <script type="text/javascript" src="${static.url("lms/js/require-config.js")}"></script>
<%block name="js_overrides"> <%block name="js_overrides">
${render_require_js_path_overrides(settings.REQUIRE_JS_PATH_OVERRIDES)} ${render_require_js_path_overrides(settings.REQUIRE_JS_PATH_OVERRIDES) | n, decode.utf8}
</%block> </%block>
% if not disable_courseware_js: % if not disable_courseware_js:
...@@ -120,7 +114,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -120,7 +114,7 @@ from pipeline_mako import render_require_js_path_overrides
% if ga_acct: % if ga_acct:
<script type="text/javascript"> <script type="text/javascript">
var _gaq = _gaq || []; var _gaq = _gaq || [];
_gaq.push(['_setAccount', '${ga_acct}']); _gaq.push(['_setAccount', '${ga_acct | n, js_escaped_string}']);
_gaq.push(['_trackPageview']); _gaq.push(['_trackPageview']);
(function() { (function() {
...@@ -147,7 +141,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -147,7 +141,7 @@ from pipeline_mako import render_require_js_path_overrides
<%include file="/preview_menu.html" /> <%include file="/preview_menu.html" />
% endif % endif
<div class="content-wrapper container main-container" id="content"> <div class="content-wrapper ${"container-fluid" if uses_bootstrap else "container" } main-container" id="content">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
</div> </div>
...@@ -178,7 +172,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -178,7 +172,7 @@ from pipeline_mako import render_require_js_path_overrides
% if settings.FEATURES.get('ENABLE_ONLOAD_BEACON', False): % if settings.FEATURES.get('ENABLE_ONLOAD_BEACON', False):
<script> <script>
(function () { (function () {
var sample_rate = ${settings.ONLOAD_BEACON_SAMPLE_RATE}; var sample_rate = ${settings.ONLOAD_BEACON_SAMPLE_RATE | n, dump_js_escaped_json};
var roll = Math.floor(Math.random() * 100)/100; var roll = Math.floor(Math.random() * 100)/100;
var onloadBeaconSent = false; var onloadBeaconSent = false;
......
## 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 lms.djangoapps.ccx.overrides import get_current_ccx
from openedx.core.djangolib.markup import HTML, Text
# App that handles subdomain specific branding
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
%>
## 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="icon fa fa-warning"></span>
<p>${site_status_msg}</p>
</div>
</div>
% endif
</%block>
<header id="global-navigation" class="header-global ${"slim" if course else ""}" >
<nav class="wrapper-header" aria-label="${_('Global')}">
<h1 class="hd logo-header">
<div class="logo">
<a href="${marketing_link('ROOT')}">
<%block name="navigation_logo">
<img src="${branding_api.get_logo_url(is_secure)}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
</%block>
</a>
</div>
% if course:
<div class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<%
display_name = course.display_name_with_default
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
ccx = get_current_ccx(course.id)
if ccx:
display_name = ccx.display_name
%>
<span class="course-name">${display_name}</span>
</div>
% endif
</h1>
% if user.is_authenticated():
<ol class="left nav-global list-inline authenticated">
<%block name="navigation_global_links_authenticated">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
<li class="item nav-global-01">
<a href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
</li>
% endif
% if show_program_listing:
<li class="tab-nav-item">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</li>
<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
%if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
<li class="item">
## Translators: This is short for "System administration".
<a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</li>
%endif
</%block>
</ol>
<%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() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<ol 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>
</ol>
% endif
% else:
<ol class="left list-inline nav-global">
<%block name="navigation_global_links">
% if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
<li class="item nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<li class="item nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Courses")}</a>
</li>
% endif
<li class="item nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
</li>
% endif
</%block>
<%block name="navigation_other_global_links">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="item nav-global-05">
<a class="btn" href="/courses">${_("Explore Courses")}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="item nav-global-04">
<a class="btn-neutral btn-register" 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 class="item nav-global-04">
<a class="btn-neutral btn-register" href="/register${login_query()}">${_("Register")}</a>
</li>
% endif
% endif
</%block>
</ol>
<ol class="right nav-courseware list-inline">
<%block name="navigation_sign_in">
<li 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-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</li>
</%block>
</ol>
% 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>
% endif
% endif
</nav>
</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"/>
## mako
<%page expression_filter="h"/>
<%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 _
%>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
% if course:
<div class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<%
display_name = course.display_name_with_default
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
ccx = get_current_ccx(course.id)
if ccx:
display_name = ccx.display_name
%>
<span class="course-name">${display_name}</span>
</div>
% endif
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="nav-link" href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
</li>
% endif
% if show_program_listing:
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="nav-link ${'active' if reverse('dashboard') == request.path else ''}" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</li>
<li class="nav-item mt-2 nav-item-open-collapsed">
<a class="nav-link ${'active' if reverse('program_listing_view') in request.path else ''}" href="${reverse('program_listing_view')}">
${_("Programs")}
</a>
</li>
% endif
% if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
<li class="nav-item mt-2 nav-item-open-collapsed">
## Translators: This is short for "System administration".
<a class="nav-link" href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</li>
% endif
</ul>
<ul class="navbar-nav navbar-right">
% 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
<a role="button" 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>
% endif
<li class="nav-item mt-2 nav-item-open-collapsed">
<a href="${get_online_help_info(online_help_token)['doc_url']}"
target="_blank"
class="nav-link">${_("Help")}</a>
</li>
<%include file="../../user_dropdown.html"/>
</ul>
</div>
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='../../static_content.html'/>
<%!
from django.utils.translation import ugettext as _
# App that handles subdomain specific branding
from branding import api as branding_api
%>
<a class="navbar-brand" href="${marketing_link('ROOT')}">
<div class="logo ${"slim" if course else ""}">
<img src="${branding_api.get_logo_url(is_secure)}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
</div>
</a>
## mako
<%page expression_filter="h"/>
<%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 _
%>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
% if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
<li class="nav-item">
<a class="nav-link mt-2" href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<li class="nav-item">
<a class="nav-link mt-2" href="${marketing_link('COURSES')}">${_("Courses")}</a>
</li>
% endif
<li class="nav-item">
<a class="nav-link mt-2" href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
</li>
% endif
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="nav-item">
<a class="nav-link mt-2" href="/courses">${_('Explore courses')}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-item">
<a class="nav-link mt-2 btn-register" 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 class="nav-item">
<a class="nav-link mt-2" href="/register${login_query()}">${_("Register")}</a>
</li>
% endif
% endif
</ul>
<ul class="navbar-nav">
<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 mt-2" role="button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">
${_("Sign in")}
</a>
% else:
<a class="btn btn-primary mt-2" role="button" href="/login${login_query()}">
${_("Sign in")}
</a>
% endif
% endif
</li>
</ul>
</div>
## 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 _
%>
<ol class="left nav-global list-inline authenticated">
<%block name="navigation_global_links_authenticated">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
<li class="item nav-global-01">
<a href="${marketing_link('COURSES')}">${_('Explore courses')}</a>
</li>
% endif
% if show_program_listing:
<li class="tab-nav-item">
<a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
${_("Courses")}
</a>
</li>
<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
%if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
<li class="item">
## Translators: This is short for "System administration".
<a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
</li>
%endif
</%block>
</ol>
<%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() and not (course and static.is_request_in_themed_site()): # see shoppingcart.context_processor.user_has_cart_context_processor
<ol 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>
</ol>
% endif
## mako
<%page expression_filter="h" args="online_help_token"/>
<%namespace name='static' file='../static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from lms.djangoapps.ccx.overrides import get_current_ccx
# App that handles subdomain specific branding
from branding import api as branding_api
%>
<h1 class="hd logo-header">
<div class="logo">
<a href="${marketing_link('ROOT')}">
<%block name="navigation_logo">
<img src="${branding_api.get_logo_url(is_secure)}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
</%block>
</a>
</div>
% if course:
<div class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<%
display_name = course.display_name_with_default
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
ccx = get_current_ccx(course.id)
if ccx:
display_name = ccx.display_name
%>
<span class="course-name">${display_name}</span>
</div>
% endif
</h1>
## 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 _
%>
<ol class="left list-inline nav-global">
<%block name="navigation_global_links">
% if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
<li class="item nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<li class="item nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Courses")}</a>
</li>
% endif
<li class="item nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
</li>
% endif
</%block>
<%block name="navigation_other_global_links">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="item nav-global-05">
<a class="btn" href="/courses">${_("Explore Courses")}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="item nav-global-04">
<a class="btn-neutral btn-register" 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 class="item nav-global-04">
<a class="btn-neutral btn-register" href="/register${login_query()}">${_("Register")}</a>
</li>
% endif
% endif
</%block>
</ol>
<ol class="right nav-courseware list-inline">
<%block name="navigation_sign_in">
<li 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-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</li>
</%block>
</ol>
\ No newline at end of file
## 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 lms.djangoapps.ccx.overrides import get_current_ccx
from openedx.core.djangolib.markup import HTML, Text
# App that handles subdomain specific branding
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
%>
## 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="icon fa fa-warning"></span>
<p>${site_status_msg}</p>
</div>
</div>
% endif
</%block>
% if uses_bootstrap:
<header class="navigation-container header-global ${"slim" if course else ""}">
<nav class="navbar navbar-toggleable-md navbar-light">
<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>
<%include file="bootstrap/navbar-logo-header.html" args="online_help_token=online_help_token"/>
% if user.is_authenticated():
<%include file="bootstrap/navbar-authenticated.html" args="online_help_token=online_help_token"/>
% else:
<%include file="bootstrap/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="navbar-logo-header.html" args="online_help_token=online_help_token"/>
% 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
% 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>
% endif
% endif
</nav>
</header>
% endif
% 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"/>
...@@ -13,8 +13,29 @@ from django.utils.translation import ugettext as _ ...@@ -13,8 +13,29 @@ from django.utils.translation import ugettext as _
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%> %>
% if uses_bootstrap:
% if uses_pattern_library: <li class="nav-item nav-item-hidden-collapsed">
<a href="${reverse('dashboard')}" class="menu-title">
<span class="sr-only">${_("Dashboard for:")}</span>
<% profile_image_url = get_profile_image_urls_for_user(self.real_user)['medium'] %>
<img class="user-image-frame" src="${profile_image_url}" alt="">
</a>
</li>
<li class="nav-item dropdown mt-2 nav-item-hidden-collapsed">
<% username = self.real_user.username %>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${username}</a>
<ul class="dropdown-menu dropdown-menu-right" id="${_("Usermenu")}" aria-labelledby="dropdownMenuLink" tabindex="-1">
<a class="dropdown-item" href="${reverse('dashboard')}">${_("Dashboard")}</a>
<a class="dropdown-item" href="${reverse('learner_profile', kwargs={'username': self.real_user.username})}">${_("Profile")}</a>
<a class="dropdown-item" href="${reverse('account_settings')}">${_("Account")}</a>
<a class="dropdown-item" href="${reverse('logout')}">${_("Sign Out")}</a>
</ul>
</li>
<li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('learner_profile', kwargs={'username': self.real_user.username})}">${_("Profile")}</a></li>
<li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('account_settings')}">${_("Account")}</a></li>
<li class="nav-item nav-item-open-collapsed-only"><a href="${reverse('logout')}">${_("Sign Out")}</a></li>
% elif uses_pattern_library:
<div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu"> <div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu">
<a href="${reverse('dashboard')}" class="menu-title"> <a href="${reverse('dashboard')}" class="menu-title">
<span class="sr-only">${_("Dashboard for:")}</span> <span class="sr-only">${_("Dashboard for:")}</span>
...@@ -55,13 +76,13 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_ ...@@ -55,13 +76,13 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
</li> </li>
<li class="primary"> <li class="primary">
<div class="user-menu"> <div class="user-menu">
<button class="dropdown" aria-expanded="false" aria-haspopup="true"> <button class="user-dropdown" aria-expanded="false" aria-haspopup="true">
<span class="sr">${_("More options")}</span> <span class="sr">${_("More options")}</span>
<span class="fa fa-sort-desc" aria-hidden="true"></span> <span class="fa fa-sort-desc" aria-hidden="true"></span>
</button> </button>
<ul class="dropdown-menu" aria-label="More Options" role="menu"> <ul class="user-dropdown-menu" aria-label="More Options" role="menu">
${navigation_dropdown_menu_links()} ${navigation_dropdown_menu_links()}
<li class="item"><a href="${reverse('logout')}" role="menuitem" class="dropdown-menuitem">${_("Sign Out")}</a></li> <li class="item"><a href="${reverse('logout')}" role="menuitem" class="user-dropdown-menuitem">${_("Sign Out")}</a></li>
</ul> </ul>
</div> </div>
</li> </li>
......
...@@ -9,55 +9,44 @@ ...@@ -9,55 +9,44 @@
<%block name="bodyclass">course-skeleton</%block> <%block name="bodyclass">course-skeleton</%block>
<%block name="content"> <%block name="content">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <nav class="navbar course-tabs pb-0 navbar-toggleable-sm navbar-light">
<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"> <ul class="navbar-nav mr-auto">
<span class="navbar-toggler-icon"></span> <li class="nav-item active">
</button> <a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
</li>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <li class="nav-item">
<ul class="navbar-nav mr-auto"> <a class="nav-link" href="#">Discussion</a>
<li class="nav-item"> </li>
<a class="nav-link" href="index.html">Home</a> <li class="nav-item">
</li> <a class="nav-link" href="#">Wiki</a>
<li class="nav-item active"> </li>
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a> <li class="nav-item">
</li> <a class="nav-link" href="#">Progress</a>
<li class="nav-item"> </li>
<a class="nav-link" href="#">Discussion</a> </ul>
</li>
</ul>
</div>
</nav> </nav>
<section class="main-container"> <section class="main-container">
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row page-header">
<div class="col"> <div class="col-md-7">
<h2 class="hd hd-2 page-title">Skeleton Page</h2> <h2 class="hd hd-2 page-title">Skeleton Page</h2>
<p class="page-description">This demonstrates the pieces available to a courseware page.</p> <p class="page-description">This demonstrates the pieces available to a courseware page.</p>
</div> </div>
<div class="col-8"> <div class="col-md-5">
<div class="form-actions"> <div class="row">
<button class="btn btn-primary">Click Me!</button> <div class="input-group col">
<form class="form-inline my-2 my-lg-0"> <input type="text" class="form-control" placeholder="Search" aria-label="Search"/>
<input class="form-control mr-sm-2" type="text" placeholder="Search"> <span class="input-group-addon" id="basic-addon2">Search</span>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </div>
</form> <button class="btn btn-primary col-4">Click Me!</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row page-content">
<div class="col"> <main id="main" aria-label="Content" tabindex="-1" class="col-md-8">
<h3>Sidebar</h3>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<main id="main" aria-label="Content" tabindex="-1" class="col-8">
<article tabindex="-1" aria-label="Main Content"> <article tabindex="-1" aria-label="Main Content">
<h3>Main content goes here.</h3> <h3>Main content goes here.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare, <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare,
...@@ -70,6 +59,14 @@ ...@@ -70,6 +59,14 @@
lorem. Nullam quis tincidunt sapien.</p> lorem. Nullam quis tincidunt sapien.</p>
</article> </article>
</main> </main>
<div class="col-md-4">
<h3>Sidebar</h3>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
</div> </div>
</div> </div>
</section> </section>
......
...@@ -19,13 +19,13 @@ ...@@ -19,13 +19,13 @@
</li> </li>
<li class="tab"> <li class="tab">
<button type="button"> <a href="#">
Course Course
</button> </a>
</li> </li>
<li class="tab"> <li class="tab">
<a href="course-skeleton.html" class="active"> <a href="#" class="active">
Skeleton Skeleton
<span class="sr-only">, current location</span> <span class="sr-only">, current location</span>
</a> </a>
......
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
<%block name="pagetitle">UX Reference</%block> <%block name="pagetitle">UX Reference</%block>
<%block name="nav_skip">#content</%block>
<%block name="bodyclass">view-ux-reference</%block> <%block name="bodyclass">view-ux-reference</%block>
......
...@@ -49,18 +49,20 @@ COMMON_LOOKUP_PATHS = [ ...@@ -49,18 +49,20 @@ COMMON_LOOKUP_PATHS = [
# A list of NPM installed libraries that should be copied into the common # A list of NPM installed libraries that should be copied into the common
# static directory. # static directory.
NPM_INSTALLED_LIBRARIES = [ NPM_INSTALLED_LIBRARIES = [
'backbone/backbone.js',
'backbone.paginator/lib/backbone.paginator.js', 'backbone.paginator/lib/backbone.paginator.js',
'moment-timezone/builds/moment-timezone-with-data.js', 'backbone/backbone.js',
'moment/min/moment-with-locales.js', 'bootstrap/dist/js/bootstrap.js',
'hls.js/dist/hls.js',
'jquery-migrate/dist/jquery-migrate.js', 'jquery-migrate/dist/jquery-migrate.js',
'jquery.scrollto/jquery.scrollTo.js', 'jquery.scrollto/jquery.scrollTo.js',
'jquery/dist/jquery.js', 'jquery/dist/jquery.js',
'moment-timezone/builds/moment-timezone-with-data.js',
'moment/min/moment-with-locales.js',
'picturefill/dist/picturefill.js', 'picturefill/dist/picturefill.js',
'requirejs/require.js', 'requirejs/require.js',
'tether/dist/js/tether.js',
'underscore.string/dist/underscore.string.js', 'underscore.string/dist/underscore.string.js',
'underscore/underscore.js', 'underscore/underscore.js',
'hls.js/dist/hls.js',
] ]
# A list of NPM installed developer libraries that should be copied into the common # A list of NPM installed developer libraries that should be copied into the common
......
## mako ## mako
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
<%inherit file="/navigation.html"/> <%inherit file="/navigation/navigation.html"/>
## TODO: this will eventually be moved to the Sass ## TODO: this will eventually be moved to the Sass
<%block name="navigation_logo"> <%block name="navigation_logo">
......
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