Updating themes for bootstrap.
LEARNER-1785 This story was to update the existing custom themes to work with the flexible bootstrap design. It also updates the red theme to more closely resemble the real implementation on openedx.
This commit is contained in:
Harry Rein
@@ -0,0 +1,3 @@
|
||||
// Override theming for edx.org bootstrap
|
||||
|
||||
@import 'edx-bootstrap/sass/edx/theme';
|
||||
@@ -0,0 +1,3 @@
|
||||
// Override theming for edx.org bootstrap
|
||||
|
||||
@import 'edx-bootstrap/sass/edx/theme';
|
||||
@@ -44,18 +44,113 @@ site_status_msg = get_site_status_msg(course_id)
|
||||
% endif
|
||||
</%block>
|
||||
|
||||
% if uses_pattern_library:
|
||||
% if uses_bootstrap:
|
||||
<header class="navigation-container header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
|
||||
% elif uses_pattern_library:
|
||||
<header class="header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
|
||||
% else:
|
||||
<header class="${"header-global slim" if course and not disable_courseware_header else "header-global-new"}" aria-label="Main" role="banner">
|
||||
% endif
|
||||
<div class="${"rwd" if responsive else ""} wrapper-header nav-container">
|
||||
|
||||
% if uses_bootstrap:
|
||||
<nav class="navbar navbar-toggleable-md navbar-light" aria-label="${_('Main')}">
|
||||
<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>
|
||||
<h1 class="hd logo-header">
|
||||
<div class="logo">
|
||||
<a class="navbar-brand" href="${marketing_link('ROOT')}" itemprop="url">
|
||||
<img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
|
||||
</a>
|
||||
</div>
|
||||
% if course and not disable_courseware_header:
|
||||
<div class="course-header">
|
||||
<span class="provider">${course.display_org_with_default}:</span>
|
||||
<span class="course-number">${course.display_number_with_default}</span>
|
||||
<span class="course-name">${course.display_name_with_default}</span>
|
||||
</div>
|
||||
% endif
|
||||
</h1>
|
||||
% if user.is_authenticated():
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
% if not course or disable_courseware_header:
|
||||
% if not nav_hidden or show_program_listing:
|
||||
<ul class="navbar-nav mr-auto">
|
||||
% if not nav_hidden:
|
||||
<li class="nav-item mt-2 nav-item-open-collapsed nav-global-01">
|
||||
<a class="nav-link" href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
|
||||
</li>
|
||||
<li class="nav-item mt-2 nav-item-open-collapsed nav-global-02">
|
||||
<a class="nav-link" href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
|
||||
</li>
|
||||
<li class="nav-item mt-2 nav-item-open-collapsed nav-global-03">
|
||||
<a class="nav-link" href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
|
||||
</li>
|
||||
% endif
|
||||
% if show_program_listing:
|
||||
<li class="nav-item mt-2 nav-item-open-collapsed">
|
||||
<a class="${'active' if reverse('dashboard') == request.path else ''} nav-link" href="${reverse('dashboard')}">
|
||||
${_("Courses")}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mt-2 nav-item-open-collapsed">
|
||||
<a class="${'active' if reverse('program_listing_view') in request.path else ''} nav-link" href="${reverse('program_listing_view')}">
|
||||
${_("Programs")}
|
||||
</a>
|
||||
</li>
|
||||
% endif
|
||||
</ul>
|
||||
% endif
|
||||
% endif
|
||||
<ul class="navbar-nav navbar-right">
|
||||
% if should_display_shopping_cart_func(): # 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>
|
||||
% else:
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent" aria-label="${_('Account')}" >
|
||||
<ul class="navbar-nav mr-auto"></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" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
|
||||
% else:
|
||||
<a class="btn btn-primary mt-2" href="/login${login_query()}">${_("Sign in")}</a>
|
||||
% endif
|
||||
% endif
|
||||
</li>
|
||||
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
|
||||
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mt-2" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
|
||||
</li>
|
||||
% elif static.get_value('ALLOW_PUBLIC_ACCOUNT_CREATION', settings.FEATURES.get('ALLOW_PUBLIC_ACCOUNT_CREATION')):
|
||||
<li>
|
||||
<a class="nav-link mt-2" href="/register">${_("Register")}</a>
|
||||
</li>
|
||||
% endif
|
||||
% endif
|
||||
</ul>
|
||||
</div>
|
||||
% endif
|
||||
</nav>
|
||||
% else:
|
||||
<div class="${"rwd" if responsive else ""} wrapper-header nav-container">
|
||||
<h1 class="hd logo-header">
|
||||
<div class="logo">
|
||||
<a href="${marketing_link('ROOT')}" itemprop="url">
|
||||
<%block name="navigation_logo">
|
||||
<img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
|
||||
<img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
|
||||
</%block>
|
||||
</a>
|
||||
</div>
|
||||
@@ -119,7 +214,6 @@ site_status_msg = get_site_status_msg(course_id)
|
||||
</li>
|
||||
</ul>
|
||||
% endif
|
||||
|
||||
% else:
|
||||
<nav aria-label="${_('Account')}" class="nav-account-management">
|
||||
<div class="right nav-courseware list-inline">
|
||||
@@ -130,7 +224,6 @@ site_status_msg = get_site_status_msg(course_id)
|
||||
% else:
|
||||
<a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
|
||||
% endif
|
||||
|
||||
% endif
|
||||
</div>
|
||||
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON'] and not combined_login_and_register:
|
||||
@@ -148,6 +241,7 @@ site_status_msg = get_site_status_msg(course_id)
|
||||
</nav>
|
||||
% endif
|
||||
</div>
|
||||
% endif
|
||||
</header>
|
||||
% if course:
|
||||
<!--[if lte IE 9]>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 493 B After Width: | Height: | Size: 5.2 KiB |
@@ -1,5 +1,14 @@
|
||||
@import 'lms/static/sass/partials/base/variables';
|
||||
// Color overrides
|
||||
$white: rgb(255,255,255);
|
||||
$red: #d9534f !default;
|
||||
|
||||
$header-bg: rgb(250,0,0);
|
||||
$footer-bg: rgb(250,0,0);
|
||||
$container-bg: rgb(250,0,0);
|
||||
$footer-bg: $white;
|
||||
$header-bg: $white;
|
||||
$header-border-color: $red;
|
||||
|
||||
$base-font-color: $red;
|
||||
$link-color: $red;
|
||||
$lms-active-color: $red;
|
||||
$lms-label-color: $red;
|
||||
|
||||
@import 'lms/static/sass/partials/base/variables';
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
// Sample red theme to demonstrate SASS overrides
|
||||
|
||||
// Theme colors
|
||||
//
|
||||
// Note: define colors needed by your theme first
|
||||
$red: #d9534f !default;
|
||||
$brand-primary: $red;
|
||||
|
||||
// Theme fonts
|
||||
$font-family-sans-serif: cursive;
|
||||
|
||||
// Initialize the Open edX bootstrap theme
|
||||
@import 'edx-bootstrap/sass/open-edx/theme';
|
||||
@@ -1,175 +1,8 @@
|
||||
## mako
|
||||
<!--
|
||||
To override this page, add a navigation.html file in the following
|
||||
location: {your_theme}/lms/templates/navigation/navigation.html
|
||||
-->
|
||||
<%page expression_filter="h" args="online_help_token"/>
|
||||
<%namespace name='static' file='static_content.html'/>
|
||||
<%namespace file='main.html' import="login_query"/>
|
||||
<%!
|
||||
from django.core.urlresolvers import reverse
|
||||
from django.utils.translation import ugettext as _
|
||||
from openedx.core.djangolib.markup import HTML
|
||||
|
||||
# App that handles subdomain specific branding
|
||||
import branding
|
||||
# app that handles site status messages
|
||||
from status.status import get_site_status_msg
|
||||
|
||||
from lms.djangoapps.ccx.overrides import get_current_ccx
|
||||
%>
|
||||
|
||||
## Provide a hook for themes to inject branding on top.
|
||||
<%block name="navigation_top" />
|
||||
|
||||
<%block>
|
||||
<%
|
||||
try:
|
||||
course_id = course.id.to_deprecated_string()
|
||||
except:
|
||||
# can't figure out a better way to get at a possibly-defined course var
|
||||
course_id = None
|
||||
site_status_msg = get_site_status_msg(course_id)
|
||||
%>
|
||||
% if site_status_msg:
|
||||
<div class="site-status">
|
||||
<div class="inner-wrapper">
|
||||
<span class="white-error-icon"></span>
|
||||
<p>${site_status_msg}</p>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
</%block>
|
||||
|
||||
<header id="global-navigation" class="header-global ${"slim" if course else ""}" >
|
||||
<!-- This file is only for demonstration, and is horrendous! -->
|
||||
<nav aria-label="${_('Global')}">
|
||||
<h1 class="logo">
|
||||
<a href="${marketing_link('ROOT')}">
|
||||
<%block name="navigation_logo">
|
||||
<img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
|
||||
</%block>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
% if course:
|
||||
<h2><span class="provider">${course.display_org_with_default | h}:</span>
|
||||
${course.display_number_with_default | h}
|
||||
<%
|
||||
display_name = course.display_name_with_default_escaped
|
||||
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
|
||||
ccx = get_current_ccx(course.id)
|
||||
if ccx:
|
||||
display_name = ccx.display_name
|
||||
%>
|
||||
${display_name}</h2>
|
||||
% endif
|
||||
|
||||
% if user.is_authenticated():
|
||||
<ol class="left nav-global authenticated">
|
||||
<%block name="navigation_global_links_authenticated">
|
||||
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
|
||||
<li class="nav-global-01">
|
||||
<a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
|
||||
</li>
|
||||
% endif
|
||||
%if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
|
||||
<li>
|
||||
## Translators: This is short for "System administration".
|
||||
<a href="${reverse('sysadmin')}">${_("Sysadmin")}</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
|
||||
</%block>
|
||||
</ol>
|
||||
<ol class="user">
|
||||
<li class="primary">
|
||||
<a href="${reverse('dashboard')}" class="user-link">
|
||||
<span class="icon fa fa-home" aria-hidden="true"></span>
|
||||
<span class="sr">${_("Dashboard for:")}</span>
|
||||
<div>
|
||||
${user.username}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="primary">
|
||||
<a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></a>
|
||||
<ul class="dropdown-menu" aria-label="More Options" role="menu">
|
||||
<%block name="navigation_dropdown_menu_links" >
|
||||
<li><a href="${reverse('account_settings')}">${_("Account Settings")}</a></li>
|
||||
<li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("My Profile")}</a></li>
|
||||
</%block>
|
||||
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
% if should_display_shopping_cart_func(): # 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 nav-global">
|
||||
<%block name="navigation_global_links">
|
||||
% if static.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
|
||||
<li class="nav-global-01">
|
||||
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
|
||||
</li>
|
||||
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
|
||||
<li class="nav-global-02">
|
||||
<a href="${marketing_link('COURSES')}">${_("Courses")}</a>
|
||||
</li>
|
||||
% endif
|
||||
<li class="nav-global-03">
|
||||
<a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
|
||||
</li>
|
||||
% endif
|
||||
</%block>
|
||||
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
|
||||
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
|
||||
<li class="nav-global-04">
|
||||
<a class="btn btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
|
||||
</li>
|
||||
% else:
|
||||
<li class="nav-global-04">
|
||||
<a class="btn btn-neutral btn-register" href="/register">${_("Register Now")}</a>
|
||||
</li>
|
||||
% endif
|
||||
% endif
|
||||
</ol>
|
||||
|
||||
<ol class="right nav-courseware">
|
||||
<li class="nav-courseware-01">
|
||||
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
|
||||
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
|
||||
<a class="btn btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
|
||||
% else:
|
||||
<a class="btn btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
|
||||
% endif
|
||||
% endif
|
||||
</li>
|
||||
</ol>
|
||||
% endif
|
||||
</nav>
|
||||
</header>
|
||||
% if course:
|
||||
<!--[if lte IE 8]>
|
||||
<div class="ie-banner" aria-hidden="true">${_(HTML('<strong>Warning:</strong> Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(chrome_link='<a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Chrome</a>', ff_link='<a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>')}</div>
|
||||
<![endif]-->
|
||||
% endif
|
||||
|
||||
%if not user.is_authenticated():
|
||||
<%include file="forgot_password_modal.html" />
|
||||
%endif
|
||||
|
||||
<%include file="help_modal.html"/>
|
||||
<%include file="${static.get_template_path(relative_path='navigation/navigation.html')}" args="online_help_token=online_help_token" />
|
||||
|
||||
Reference in New Issue
Block a user