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

Merge pull request #15415 from edx/andya/use-edx-bootstrap

Browse Source 
Implement a skeleton page with Bootstrap
This commit is contained in:
Andy Armstrong
2017-07-04 18:29:13 -04:00
committed by GitHub
parent c6e085173d 7ea3b013ad
commit a6392e514a
30 changed files with 990 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cms/envs/devstack.py
View File

@@ -87,6 +87,7 @@ DEBUG_TOOLBAR_CONFIG = {
'debug_toolbar.panels.profiling.ProfilingPanel',
),
'SHOW_TOOLBAR_CALLBACK': 'cms.envs.devstack.should_show_debug_toolbar',
'JQUERY_URL': None,
}

8
common/test/acceptance/pages/lms/dashboard.py
View File

@@ -169,26 +169,26 @@ class DashboardPage(PageObject):
"""
Click username dropdown.
"""
self.q(css='.dropdown').first.click()
self.q(css='.user-dropdown').first.click()
@property
def username_dropdown_link_text(self):
"""
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):
"""
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):
"""
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
def language_selector(self):

13
lms/envs/common.py
View File

@@ -417,6 +417,7 @@ COMMON_ROOT = REPO_ROOT / "common"
OPENEDX_ROOT = REPO_ROOT / "openedx"
ENV_ROOT = REPO_ROOT.dirname() # virtualenv dir /edx-platform is in
COURSES_ROOT = ENV_ROOT / "data"
NODE_MODULES_ROOT = REPO_ROOT / "node_modules"
DATA_DIR = COURSES_ROOT
@@ -427,7 +428,7 @@ sys.path.append(COMMON_ROOT / 'djangoapps')
# 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 = [
COMMON_ROOT / "static/js/vendor",
@@ -1340,7 +1341,7 @@ main_vendor_js = base_vendor_js + [
base_application_js = [
'js/src/utility.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/src/string_utils.js',
'js/form.ext.js',
@@ -1612,7 +1613,6 @@ PIPELINE_JS = {
'source_filenames': base_application_js,
'output_filename': 'js/lms-base-application.js',
},
'application': {
'source_filenames': (
common_js + xblock_runtime_js + base_application_js + lms_application_js +
@@ -1641,6 +1641,13 @@ PIPELINE_JS = {
'source_filenames': 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': {
'source_filenames': rooted_glob(COMMON_ROOT / 'static/', 'xmodule/descriptors/js/*.js'),
'output_filename': 'js/lms-module-descriptors.js',

3
lms/envs/devstack.py
View File

@@ -84,7 +84,8 @@ DEBUG_TOOLBAR_PANELS = (
)
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,
}

10
lms/static/js/my_courses_dropdown.js → lms/static/js/user_dropdown_v1.js
View File

@@ -1,9 +1,15 @@
/**
* Keyboard support for the user dropdown on legacy pages.
*
* Note: this is not used for Pattern Library or Bootstrap pages.
*/
$(document).ready(function() {
'use strict';
// define variables for code legibility
var $dropdownMenuToggle = $('.dropdown');
var $dropdownMenu = $('.dropdown-menu');
var $dropdownMenuToggle = $('.user-dropdown');
var $dropdownMenu = $('.user-dropdown-menu');
var menuItems = $dropdownMenu.find('.dropdown-menuitem');
var keyCodes = {

65
lms/static/sass/bootstrap/_footer.scss Normal file
View File

@@ -0,0 +1,65 @@
// 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;
}
}
}

47
lms/static/sass/bootstrap/_layouts.scss Normal file
View File

@@ -0,0 +1,47 @@
// 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;
}
}

94
lms/static/sass/bootstrap/_navigation.scss Normal file
View File

@@ -0,0 +1,94 @@
// 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;
}
}
}
}
}

68
lms/static/sass/bootstrap/_variables.scss Normal file
View File

@@ -0,0 +1,68 @@
// 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;

16
lms/static/sass/bootstrap/lms-main-bootstrap.scss Normal file
View File

@@ -0,0 +1,16 @@
// -----------------------------
// LMS main styles for Bootstrap
// -----------------------------
// Bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme';
@import 'bootstrap/scss/bootstrap';
// Variables
@import 'variables';
// Elements
@import 'footer';
@import 'navigation';
@import 'layouts';

4
lms/static/sass/shared/_header.scss
View File

@@ -183,7 +183,7 @@
}
}
.dropdown {
.user-dropdown {
font-size: $body-font-size;
padding: 0 ($baseline/2);
color: $base-font-color;
@@ -193,7 +193,7 @@
text-shadow: none;
}
.dropdown-menu {
.user-dropdown-menu {
background: $white;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);

175
lms/templates/footer.html
View File

@@ -9,75 +9,126 @@
<% footer = get_footer(is_secure=is_secure) %>
<%namespace name='static' file='static_content.html'/>
<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
>
<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 uses_bootstrap:
<div class="container-fluid wrapper-footer">
<footer>
<div class="row">
<div class="col-md-9">
<nav class="navbar site-nav navbar-toggleable-sm navbar-light" aria-label="${_('About')}">
<ul class="navbar-nav">
% for item_num, link in enumerate(footer['navigation_links'], start=1):
<li class="nav-item">
<a class="nav-link" href="${link['url']}">${link['title']}</a>
</li>
% endfor
</ul>
</nav>
% if context.get('include_language_selector', footer_language_selector_is_enabled()):
<%include file="${static.get_template_path('widgets/footer-language-selector.html')}"/>
## 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="navbar legal-nav navbar-toggleable-sm navbar-light" aria-label="${_('Legal')}">
<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
>
<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>
<div class="wrapper-logo">
% 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>
## 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>
<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 href="${footer['openedx_link']['url']}">
<img src="${footer['openedx_link']['image']}" alt="${footer['openedx_link']['title']}" width="140" />
</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>
## 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>
% endif
</footer>
</div>
% endif
% if include_dependencies:
<%static:js group='base_vendor'/>
<%static:css group='style-vendor'/>

2
lms/templates/header.html
View File

@@ -1,4 +1,4 @@
## mako
<%page expression_filter="h" args="online_help_token"/>
<%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" />

41
lms/templates/main.html
View File

@@ -13,12 +13,14 @@
<%namespace name='static' file='static_content.html'/>
<% 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.utils.http import urlquote_plus
from django.utils.translation import ugettext as _
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
%>
<!DOCTYPE html>
<!--[if lte IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
@@ -61,25 +63,26 @@ from pipeline_mako import render_require_js_path_overrides
<link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
<%static:css group='style-vendor'/>
<%static:css group='${self.attr.main_css}'/>
% if not 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
% if uses_bootstrap:
<link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
% else:
## TODO: Update to only bring in RequireJS
## https://openedx.atlassian.net/browse/FEDX-140
<%static:css group='${self.attr.main_css}'/>
% endif
% if disable_courseware_js or uses_pattern_library:
<%static:js group='base_vendor'/>
<%static:js group='base_application'/>
% else:
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif
% if uses_bootstrap:
<%static:js group='lms_bootstrap'/>
% endif
<script>
window.baseUrl = "${settings.STATIC_URL}";
window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
(function (require) {
require.config({
baseUrl: window.baseUrl
@@ -88,7 +91,7 @@ from pipeline_mako import render_require_js_path_overrides
</script>
<script type="text/javascript" src="${static.url("lms/js/require-config.js")}"></script>
<%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>
% if not disable_courseware_js:
@@ -111,7 +114,7 @@ from pipeline_mako import render_require_js_path_overrides
% if ga_acct:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '${ga_acct}']);
_gaq.push(['_setAccount', '${ga_acct | n, js_escaped_string}']);
_gaq.push(['_trackPageview']);
(function() {
@@ -131,14 +134,14 @@ from pipeline_mako import render_require_js_path_overrides
% if not disable_window_wrap:
<div class="window-wrap" dir="${static.dir_rtl()}">
% endif
<a class="nav-skip" href="#main">${_("Skip to main content")}</a>
<a class="nav-skip sr-only sr-only-focusable" href="#main">${_("Skip to main content")}</a>
% if not disable_header:
<%include file="${static.get_template_path('header.html')}" args="online_help_token=online_help_token" />
<%include file="/preview_menu.html" />
% endif
<div class="content-wrapper" id="content">
<div class="content-wrapper ${"container-fluid" if uses_bootstrap else "container" } main-container" id="content">
${self.body()}
<%block name="bodyextra"/>
</div>
@@ -169,7 +172,7 @@ from pipeline_mako import render_require_js_path_overrides
% if settings.FEATURES.get('ENABLE_ONLOAD_BEACON', False):
<script>
(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 onloadBeaconSent = false;

213
lms/templates/navigation.html
View File

@@ -1,213 +0,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 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"/>

72
lms/templates/navigation/bootstrap/navbar-authenticated.html Normal file
View File

@@ -0,0 +1,72 @@
## 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>

17
lms/templates/navigation/bootstrap/navbar-logo-header.html Normal file
View File

@@ -0,0 +1,17 @@
## 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>

61
lms/templates/navigation/bootstrap/navbar-not-authenticated.html Normal file
View File

@@ -0,0 +1,61 @@
## 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>

54
lms/templates/navigation/navbar-authenticated.html Normal file
View File

@@ -0,0 +1,54 @@
## 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

36
lms/templates/navigation/navbar-logo-header.html Normal file
View File

@@ -0,0 +1,36 @@
## 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>

61
lms/templates/navigation/navbar-not-authenticated.html Normal file
View File

@@ -0,0 +1,61 @@
## 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>

117
lms/templates/navigation/navigation.html Normal file
View File

@@ -0,0 +1,117 @@
## 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"/>

31
lms/templates/user_dropdown.html
View File

@@ -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
%>
% if uses_pattern_library:
% if uses_bootstrap:
<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">
<a href="${reverse('dashboard')}" class="menu-title">
<span class="sr-only">${_("Dashboard for:")}</span>
@@ -55,13 +76,13 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
</li>
<li class="primary">
<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="fa fa-sort-desc" aria-hidden="true"></span>
</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()}
<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>
</div>
</li>

73
lms/templates/ux/reference/bootstrap/course-skeleton.html Normal file
View File

@@ -0,0 +1,73 @@
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/lms-main-bootstrap.css" %>
<%page expression_filter="h"/>
<%inherit file="/main.html" />
<%block name="pagetitle">Course Skeleton</%block>
<%block name="bodyclass">course-skeleton</%block>
<%block name="content">
<nav class="navbar course-tabs pb-0 navbar-toggleable-sm navbar-light">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Course <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Discussion</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Wiki</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Progress</a>
</li>
</ul>
</nav>
<section class="main-container">
<div class="container-fluid">
<div class="row page-header">
<div class="col-md-7">
<h2 class="hd hd-2 page-title">Skeleton Page</h2>
<p class="page-description">This demonstrates the pieces available to a courseware page.</p>
</div>
<div class="col-md-5">
<div class="row">
<div class="input-group col">
<input type="text" class="form-control" placeholder="Search" aria-label="Search"/>
<span class="input-group-addon" id="basic-addon2">Search</span>
</div>
<button class="btn btn-primary col-4">Click Me!</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row page-content">
<main id="main" aria-label="Content" tabindex="-1" class="col-md-8">
<article tabindex="-1" aria-label="Main Content">
<h3>Main content goes here.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, orci at viverra ornare,
augue urna fermentum ex, vitae dignissim magna est sit amet diam. Nunc sodales dolor finibus
pulvinar placerat. Suspendisse vitae tellus auctor, sodales erat ac, venenatis quam. Etiam
purus est, consequat nec erat vel, bibendum volutpat ex. Fusce vitae consectetur ante.
Suspendisse elit mauris, iaculis sed diam eu, efficitur tempor dui. Praesent tristique nunc
quam, in tincidunt ligula accumsan et. Etiam augue sem, commodo ac ipsum vel, fringilla dapibus
lacus. Sed facilisis euismod felis, non malesuada massa scelerisque sed. Etiam et placerat
lorem. Nullam quis tincidunt sapien.</p>
</article>
</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>
</section>
</%block>

6
lms/templates/ux/reference/course-skeleton.html
View File

@@ -19,13 +19,13 @@
</li>
<li class="tab">
<button type="button">
<a href="#">
Course
</button>
</a>
</li>
<li class="tab">
<a href="course-skeleton.html" class="active">
<a href="#" class="active">
Skeleton
<span class="sr-only">, current location</span>
</a>

6
lms/templates/ux/reference/index.html
View File

@@ -7,7 +7,6 @@
<%namespace name='static' file='/static_content.html'/>
<%block name="pagetitle">UX Reference</%block>
<%block name="nav_skip">#content</%block>
<%block name="bodyclass">view-ux-reference</%block>
@@ -24,6 +23,11 @@
<li><a href="pattern-library-test.html">Pattern Library test page</a></li>
<li><a href="course-skeleton.html">Course skeleton page</a></li>
</ul>
<h3>Bootstrap</h3>
<ul>
<li><a href="bootstrap/course-skeleton.html">Course skeleton page</a></li>
</ul>
</section>
</article>
</div>

5
openedx/core/djangoapps/debug/views.py
View File

@@ -22,9 +22,12 @@ def show_reference_template(request, template):
e.g. /template/ux/reference/index.html?name=Foo
"""
try:
uses_bootstrap = u'/bootstrap/' in request.path
uses_pattern_library = not uses_bootstrap
context = {
"disable_courseware_js": True,
"uses_pattern_library": True
"uses_pattern_library": uses_pattern_library,
"uses_bootstrap": uses_bootstrap,
}
context.update(request.GET.dict())
return render_to_response(template, context)

1
package.json
View File

@@ -9,6 +9,7 @@
"backbone.paginator": "~2.0.3",
"coffee-loader": "^0.7.3",
"coffee-script": "1.6.1",
"edx-bootstrap": "~0.1.6",
"edx-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4",

10
pavelib/assets.py
View File

@@ -49,18 +49,20 @@ COMMON_LOOKUP_PATHS = [
# A list of NPM installed libraries that should be copied into the common
# static directory.
NPM_INSTALLED_LIBRARIES = [
'backbone/backbone.js',
'backbone.paginator/lib/backbone.paginator.js',
'moment-timezone/builds/moment-timezone-with-data.js',
'moment/min/moment-with-locales.js',
'backbone/backbone.js',
'bootstrap/dist/js/bootstrap.js',
'hls.js/dist/hls.js',
'jquery-migrate/dist/jquery-migrate.js',
'jquery.scrollto/jquery.scrollTo.js',
'jquery/dist/jquery.js',
'moment-timezone/builds/moment-timezone-with-data.js',
'moment/min/moment-with-locales.js',
'picturefill/dist/picturefill.js',
'requirejs/require.js',
'tether/dist/js/tether.js',
'underscore.string/dist/underscore.string.js',
'underscore/underscore.js',
'hls.js/dist/hls.js',
]
# A list of NPM installed developer libraries that should be copied into the common

2
themes/stanford-style/lms/templates/header.html
View File

@@ -1,6 +1,6 @@
## mako
<%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
<%block name="navigation_logo">