Skip to content

E
edx-platform
Commit 3dbe0481 by Harry Rein Committed by GitHub
Options

Merge pull request #15518 from edx/HarryRein/updating-bootstrap-theming 

Harry rein/updating bootstrap theming
parents a0da9b89 6d89cc1b
Showing with 163 additions and 195 deletions
lms/djangoapps/courseware/tests/test_comprehensive_theming.py
......@@ -30,8 +30,6 @@ class TestComprehensiveTheming(TestCase):
self.assertEqual(resp.status_code, 200)
# This string comes from footer.html
self.assertContains(resp, "super-ugly")
# This string comes from header.html
self.assertContains(resp, "This file is only for demonstration, and is horrendous!")
def test_theme_outside_repo(self):
# Need to create a temporary theme, and defer decorating the function
......
lms/static/sass/bootstrap/_footer.scss
......@@ -4,7 +4,7 @@
.wrapper-footer {
box-shadow: 0 -1px 5px 0 $black-t0;
border-top: 1px solid $navbar-light-disabled-color;
background-color: $body-bg;
background-color: $footer-bg;
margin-top: $baseline/2;
padding: $baseline;
font-family: $font-family-sans-serif;
......
lms/static/sass/bootstrap/_navigation.scss
......@@ -2,6 +2,7 @@
.navigation-container {
border-bottom: 1px solid $brand-primary;
text-decoration: none;
background-color: $header-bg;
&.slim {
border-bottom: 1px solid $inverse-color;
......@@ -29,7 +30,7 @@
.nav-item {
margin: 0 $baseline 0 0;
font-weight: $font-weight-normal;
font-family: $font-family-sans-serif;
font-family: $font-family-base;
text-transform: uppercase;
list-style: none;
......@@ -47,7 +48,7 @@
display: none;
}
@media (max-width: map-get($grid-breakpoints,lg)) {
@media (max-width: map-get($grid-breakpoints,md)) {
&.nav-item-open-collapsed, &.nav-item-open-collapsed-only {
display: initial;
margin: $baseline/4 $baseline/2;
......@@ -73,7 +74,7 @@
}
.navbar-right .nav-item {
@media (min-width: map-get($grid-breakpoints,lg)) {
@media (min-width: map-get($grid-breakpoints,md)) {
.nav-link {
text-transform: none;
color: $brand-inverse;
......
lms/static/sass/bootstrap/_variables.scss
......@@ -48,6 +48,9 @@ $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;
$header-bg: $white !default;
$footer-bg: $white !default;
// ----------------------------
// #TYPOGRAPHY
// ----------------------------
......
lms/static/sass/bootstrap/lms-main-bootstrap.scss → lms/static/sass/bootstrap/lms-main.scss
......@@ -3,7 +3,7 @@
// -----------------------------
// Bootstrap theme
@import 'edx-bootstrap/sass/open-edx/theme';
@import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap';
// Variables
......@@ -13,4 +13,3 @@
@import 'footer';
@import 'navigation';
@import 'layouts';
lms/static/sass/partials/README.rst 0 → 100644
Any partials in this directory can be overridden by a theme by matching
the directory structure as in lms/static/sass/partials.
As an example, look at the red-theme.
\ No newline at end of file
lms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Default bootstrap theming
@import 'edx-bootstrap/sass/open-edx/theme';
lms/static/sass/shared-v2/_header.scss
......@@ -5,7 +5,7 @@
box-sizing: border-box;
position: relative;
width: 100%;
border-bottom: 1px solid $gray-l1;
border-bottom: 1px solid $header-border-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
......
lms/static/sass/shared-v2/_variables.scss
......@@ -42,6 +42,8 @@ $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;
$header-border-color: $gray-l1 !default;
// ----------------------------
// #TYPOGRAPHY
// ----------------------------
......
lms/templates/navigation/navigation.html
......@@ -51,7 +51,7 @@ site_status_msg = get_site_status_msg(course_id)
% if uses_bootstrap:
<header class="navigation-container header-global ${"slim" if course else ""}">
<nav class="navbar navbar-toggleable-md navbar-light">
<nav class="navbar navbar-toggleable-sm 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>
......
lms/templates/user_dropdown.html
......@@ -31,7 +31,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
<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 collapse"><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>
......
lms/templates/ux/reference/bootstrap/course-skeleton.html
## Override the default styles_version to use Bootstrap
<%! main_css = "css/bootstrap/lms-main-bootstrap.css" %>
<%! main_css = "css/bootstrap/lms-main.css" %>
<%page expression_filter="h"/>
<%inherit file="/main.html" />
......@@ -39,7 +39,9 @@
<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>
<a href="#">
<div class="btn btn-primary">Click Me!!</div>
</a>
</div>
</div>
</div>
......
themes/edge.edx.org/lms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Override theming for edx.org bootstrap
@import 'edx-bootstrap/sass/edx/theme';
themes/edx.org/lms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// Override theming for edx.org bootstrap
@import 'edx-bootstrap/sass/edx/theme';
themes/edx.org/lms/templates/header.html
......@@ -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]>
......
themes/red-theme/lms/static/sass/partials/base/_variables.scss
@import 'lms/static/sass/partials/base/variables';
// Color overrides
$white: rgb(255,255,255);
$red: #d9534f !default;
$footer-bg: $white;
$header-bg: $white;
$header-border-color: $red;
$header-bg: rgb(250,0,0);
$footer-bg: rgb(250,0,0);
$container-bg: rgb(250,0,0);
$base-font-color: $red;
$link-color: $red;
$lms-active-color: $red;
$lms-label-color: $red;
@import 'lms/static/sass/partials/base/variables';
themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
// 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';
themes/red-theme/lms/templates/header.html
## 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" />
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