Skip to content
Snippets Groups Projects
Commit 6d89cc1b authored by Harry Rein's avatar Harry Rein
Browse files

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.
parent cdd0e945
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 162 additions and 195 deletions
lms/djangoapps/courseware/tests/test_comprehensive_theming.py
+ 0
− 2
View file @ 6d89cc1b
......@@ -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
+ 1
− 1
View file @ 6d89cc1b
......@@ -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
+ 4
− 3
View file @ 6d89cc1b
......@@ -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
+ 3
− 0
View file @ 6d89cc1b
......@@ -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
+ 1
− 2
View file @ 6d89cc1b
......@@ -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
+ 4
− 0
View file @ 6d89cc1b
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
+ 3
− 0
View file @ 6d89cc1b
// Default bootstrap theming
@import 'edx-bootstrap/sass/open-edx/theme';
lms/static/sass/shared-v2/_header.scss
+ 1
− 1
View file @ 6d89cc1b
......@@ -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
+ 2
− 0
View file @ 6d89cc1b
......@@ -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
+ 1
− 1
View file @ 6d89cc1b
......@@ -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
+ 1
− 1
View file @ 6d89cc1b
......@@ -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
+ 4
− 2
View file @ 6d89cc1b
## 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
+ 3
− 0
View file @ 6d89cc1b
// Override theming for edx.org bootstrap
@import 'edx-bootstrap/sass/edx/theme';
themes/edx.org/lms/static/sass/partials/bootstrap/_theme.scss 0 → 100644
+ 3
− 0
View file @ 6d89cc1b
// Override theming for edx.org bootstrap
@import 'edx-bootstrap/sass/edx/theme';
themes/edx.org/lms/templates/header.html
+ 99
− 5
View file @ 6d89cc1b
......@@ -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/images/logo.png
+ 0
− 0
View replaced file @ cdd0e945 View file @ 6d89cc1b
themes/red-theme/lms/static/images/logo.png

493 B | W: | H:

themes/red-theme/lms/static/images/logo.png

5.16 KiB | W: | H:

themes/red-theme/lms/static/images/logo.png
themes/red-theme/lms/static/images/logo.png
themes/red-theme/lms/static/images/logo.png
themes/red-theme/lms/static/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
themes/red-theme/lms/static/sass/partials/base/_variables.scss
+ 13
− 4
View file @ 6d89cc1b
@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
+ 13
− 0
View file @ 6d89cc1b
// 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
+ 6
− 173
View file @ 6d89cc1b
## 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" />
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