diff --git a/.gitignore b/.gitignore index 8f474c1974..e1e15e6102 100644 --- a/.gitignore +++ b/.gitignore @@ -78,6 +78,8 @@ lms/static/sass/lms-main.scss lms/static/sass/lms-main-rtl.scss lms/static/sass/lms-course.scss lms/static/sass/lms-course-rtl.scss +lms/static/sass/lms-footer-edx.scss +lms/static/sass/lms-footer-edx-rtl.scss cms/static/css/ cms/static/sass/*.css cms/static/sass/*.css.map diff --git a/lms/envs/common.py b/lms/envs/common.py index 465005d7b7..ba104fcd55 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -341,6 +341,9 @@ FEATURES = { # Show the mobile app links in the footer 'ENABLE_FOOTER_MOBILE_APP_LINKS': False, + # Use version 3 of the footer (added May 2015) + 'ENABLE_FOOTER_V3': False, + # Let students save and manage their annotations 'ENABLE_EDXNOTES': False, @@ -1172,6 +1175,7 @@ dashboard_js = ( ) discussion_js = sorted(rooted_glob(COMMON_ROOT / 'static', 'coffee/src/discussion/**/*.js')) rwd_header_footer_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/common_helpers/rwd_header_footer.js')) +footer_edx_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'js/footer-edx.js')) staff_grading_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/staff_grading/**/*.js')) open_ended_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/open_ended/**/*.js')) notes_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/notes/**/*.js')) @@ -1328,6 +1332,18 @@ PIPELINE_CSS = { ], 'output_filename': 'css/lms-style-xmodule-annotations.css', }, + 'style-edx-footer': { + 'source_filenames': [ + 'sass/footer-v3.css', + ], + 'output_filename': 'css/lms-footer-edx.css', + }, + 'style-edx-footer-rtl': { + 'source_filenames': [ + 'sass/footer-v3-rtl.css', + ], + 'output_filename': 'css/lms-footer-edx-rtl.css', + }, } @@ -1420,6 +1436,10 @@ PIPELINE_JS = { 'ccx': { 'source_filenames': ccx_js, 'output_filename': 'js/ccx.js' + }, + 'footer_edx': { + 'source_filenames': footer_edx_js, + 'output_filename': 'js/footer_edx.js' } } @@ -1764,16 +1784,25 @@ MKTG_URL_LINK_MAP = { ################# Social Media Footer Links ####################### # The names list controls the order of social media # links in the footer. -SOCIAL_MEDIA_FOOTER_NAMES = [ - "facebook", - "twitter", - "linkedin", - "google_plus", - "tumblr", - "meetup", - "reddit", - "youtube", -] +if FEATURES.get('ENABLE_FOOTER_V3'): + SOCIAL_MEDIA_FOOTER_NAMES = [ + "facebook", + "twitter", + "linkedin", + "weibo", + "vk", + ] +else: + SOCIAL_MEDIA_FOOTER_NAMES = [ + "facebook", + "twitter", + "linkedin", + "google_plus", + "tumblr", + "meetup", + "reddit", + "youtube", + ] # The footer URLs dictionary maps social footer names # to URLs defined in configuration. @@ -1824,6 +1853,18 @@ SOCIAL_MEDIA_FOOTER_DISPLAY = { "title": _("Reddit"), "icon": "fa-reddit-square" }, + "vk": { + # Translators: This is the website name of https://vk.com. Please + # translate this the way that VK advertises in your language. + "title": _("VK"), + "icon": "fa-vk" + }, + "weibo": { + # Translators: This is the website name of http://www.weibo.com. Please + # translate this the way that Weibo advertises in your language. + "title": _("Weibo"), + "icon": "fa-weibo" + }, "youtube": { # Translators: This is the website name of www.youtube.com. Please # translate this the way that YouTube advertises in your language. diff --git a/lms/static/js/footer-edx.js b/lms/static/js/footer-edx.js new file mode 100644 index 0000000000..0d589f5885 --- /dev/null +++ b/lms/static/js/footer-edx.js @@ -0,0 +1,80 @@ +var edx = edx || {}; + +(function($) { + 'use strict'; + + edx.footer = (function() { + var _fn = { + el: '#footer-edx-v3', + + init: function() { + _fn.$el = _fn.$el || $( _fn.el ); + + /** + * Only continue if the expected element + * to add footer to is in the DOM + */ + if ( _fn.$el.length > -1 ) { + _fn.footer.get(); + } + }, + + analytics: { + init: function() { + _fn.$el = _fn.$el || $( _fn.el ); + + /** + * Only continue if the expected element + * to add footer to is in the DOM + */ + if ( _fn.$el.length > -1 ) { + _fn.analytics.eventListener(); + } + }, + + eventListener: function() { + if ( window.analytics ) { + _fn.$el.on( 'click', 'a', _fn.analytics.track ); + } + }, + + track: function( event ) { + var $link = $( event.currentTarget ); + + // Only tracking external links + if ( $link.hasClass('external') ) { + window.analytics.track( 'edx.bi.footer.link', { + category: 'outbound_link', + label: $link.attr('href') + }); + } + } + }, + + footer: { + get: function() { + $.ajax({ + url: 'https://courses.edx.org/api/v1/branding/footer', + type: 'GET', + dataType: 'html', + success: function( data ) { + _fn.footer.render( data ); + } + }); + }, + + render: function( html ) { + _fn.$el.html( html ); + } + } + }; + + return { + load: _fn.init, + analytics: _fn.analytics.init + }; + })(); + + // Initialize the analytics events + edx.footer.analytics(); +})(jQuery); diff --git a/lms/static/sass/_build-lms.scss b/lms/static/sass/_build-lms.scss index dde9242f6c..3b05db8196 100644 --- a/lms/static/sass/_build-lms.scss +++ b/lms/static/sass/_build-lms.scss @@ -21,6 +21,7 @@ @import 'shared/fields'; @import 'shared/forms'; @import 'shared/footer'; +@import 'shared/footer-edx'; // Replaces most of the footer partial. Will update footer to remove edx specific styles once feature flag removed. @import 'shared/header'; @import 'shared/course_object'; @import 'shared/course_filter'; diff --git a/lms/static/sass/lms-footer-edx-rtl.scss.mako b/lms/static/sass/lms-footer-edx-rtl.scss.mako new file mode 100644 index 0000000000..7c6f4466c7 --- /dev/null +++ b/lms/static/sass/lms-footer-edx-rtl.scss.mako @@ -0,0 +1,45 @@ +## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + +// lms - css application architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon +@import 'vendor/bi-app/bi-app-rtl'; // set the layout for left to right languages + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/variables'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes//, with its base Sass file in +## themes//static/sass/_.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env["FEATURES"].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +// base - assets +@import 'base/font_face'; + +footer#footer-edx-v3 { + @import 'base/extends'; + + // base - starter + @import 'base/base'; + +} + +// base - elements +@import 'elements/typography'; + +// shared - platform +@import 'shared/footer-edx'; diff --git a/lms/static/sass/lms-footer-edx.scss.mako b/lms/static/sass/lms-footer-edx.scss.mako new file mode 100644 index 0000000000..ceabdbc5de --- /dev/null +++ b/lms/static/sass/lms-footer-edx.scss.mako @@ -0,0 +1,45 @@ +## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + +// lms - css application architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon +@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/variables'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes//, with its base Sass file in +## themes//static/sass/_.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env["FEATURES"].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +// base - assets +@import 'base/font_face'; + +footer#footer-edx-v3 { + @import 'base/extends'; + + // base - starter + @import 'base/base'; + +} + +// base - elements +@import 'elements/typography'; + +// shared - platform +@import 'shared/footer-edx'; diff --git a/lms/static/sass/lms-main-rtl.scss.mako b/lms/static/sass/lms-main-rtl.scss.mako index 32b3058c88..1bac12f885 100644 --- a/lms/static/sass/lms-main-rtl.scss.mako +++ b/lms/static/sass/lms-main-rtl.scss.mako @@ -27,4 +27,3 @@ % endif @import 'build-lms'; // shared app style assets/rendering - diff --git a/lms/static/sass/shared/_footer-edx.scss b/lms/static/sass/shared/_footer-edx.scss new file mode 100644 index 0000000000..fc2babf3be --- /dev/null +++ b/lms/static/sass/shared/_footer-edx.scss @@ -0,0 +1,164 @@ +// edX theme: LMS Footer +// ==================== +@import '../base/grid-settings'; +@import 'neat/neat'; // lib - Neat + + +$edx-footer-link-color: rgb(0, 158, 231); +$edx-footer-bg-color: rgb(252,252,252); + + +// Aggressively scoped for Drupal +// ============================== +// These styles are being loaded on Drupal, LMS and WordPress +// sites so the scope has to be aggressive to override default +// CMS styles +footer#footer-edx-v3 { + @include outer-container; + @include box-sizing(border-box); + background: $edx-footer-bg-color; + padding: 20px; + + p { + @include font-size(14); + @include line-height(14); + font-family: $sans-serif; + } + + .site-nav, + .legal-notices { + a { + @include font-size(14); + @include line-height(14); + @include margin-right(20px); + color: $edx-footer-link-color; + + &:last-of-type { + @include margin-right(0); + } + } + } + + .footer-logo, + .site-details, + .external-links { + @include span-columns(12); + } + + .site-details, + .external-links { + margin-top: 5px; + } + + .footer-logo { + margin-bottom: 30px; + } + + .legal-notices { + margin: 20px 0 30px; + } + + .openedx-link { + width: 141px; + margin-bottom: 30px; + + a { + display: inline-block; + } + + img { + width: 100%; + } + } + + .social-media-links, + .mobile-app-links { + @include clearfix(); + } + + .social-media-links { + margin-bottom: 30px; + } + + .sm-link { + @include float(left); + @include margin(0, 0, 10px, 12px); + @include font-size(28); + @include line-height(28); + width: 30px; + height: 30px; + line-height: 1; + position: relative; + display: inline; + background: none; + text-align: center; + + &:first-of-type { + @include margin-left(0); + } + + &:hover { + opacity: 0.7; + } + + .icon { + font-family: 'FontAwesome'; + color: $edx-footer-link-color; + } + } + + .app-link { + @include float(left); + @include margin-right(10px); + position: relative; + display: inline-block; + + &:last-of-type { + @include margin-right(0); + } + + img { + height: 40px; + } + } + + @include media( $edx-bp-large ) { + padding: 20px 10px; + + .site-details { + @include span-columns(7); + } + + .external-links { + @include span-columns(5); + } + + .social-media-links, + .mobile-app-links { + @include float(right); + } + + .social-media-links { + width: calc(); + margin-bottom: 40px; + } + } + + @include media( $edx-bp-huge ) { + .footer-logo { + @include span-columns(2); + } + + .site-details { + @include span-columns(6); + } + + .external-links { + @include span-columns(4); + } + + .social-media-links { + margin-bottom: 50px; + } + } +} diff --git a/lms/templates/footer-edx-new.html b/lms/templates/footer-edx-v2.html similarity index 100% rename from lms/templates/footer-edx-new.html rename to lms/templates/footer-edx-v2.html diff --git a/lms/templates/footer-edx-v3.html b/lms/templates/footer-edx-v3.html new file mode 100644 index 0000000000..887c409828 --- /dev/null +++ b/lms/templates/footer-edx-v3.html @@ -0,0 +1,90 @@ +## mako +<%! from django.core.urlresolvers import reverse %> +<%! from django.utils.translation import ugettext as _ %> +<%namespace name='static' file='static_content.html'/> +## WARNING: These files are specific to edx.org and are not used in installations outside of that domain. Open edX users will want to use the file "footer.html" for any changes or overrides. +
+

${_("About edX")}

+ + + +
+ + +

+ ## Using "edX Inc." explicitly here for copyright purposes (settings.PLATFORM_NAME is just "edX", and this footer is only used on edx.org) + ## Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear. +

© ${settings.COPYRIGHT_YEAR} edX Inc. All rights reserved except where noted. EdX, Open edX and the edX and Open edX logos are registered trademarks of trademarks of edX Inc.

+

+
+ + ${_( + +
+
+ +
+ + + ## % if settings.FEATURES.get('ENABLE_FOOTER_MOBILE_APP_LINKS'): +
+ + ${_( + + + ${_( + +
+ ## % endif +
+
+ + +<%block name="js_extra"> + <%static:js group='footer_edx'/> + diff --git a/lms/templates/main.html b/lms/templates/main.html index 3122d1cbd2..16845c890a 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -148,8 +148,10 @@ dir_rtl = 'rtl' if get_language_bidi() else 'ltr' <% if theme_enabled() and not is_microsite(): footer_file = 'theme-footer.html' + elif settings.FEATURES.get('IS_EDX_DOMAIN', False) and settings.FEATURES.get('ENABLE_FOOTER_V3', True) and not is_microsite(): + footer_file = microsite.get_template_path('footer-edx-v3.html') elif settings.FEATURES.get('IS_EDX_DOMAIN', False) and not is_microsite(): - footer_file = microsite.get_template_path('footer-edx-new.html') + footer_file = microsite.get_template_path('footer-edx-v2.html') else: footer_file = microsite.get_template_path('footer.html') %> diff --git a/lms/templates/main_django.html b/lms/templates/main_django.html index c5278c4156..f7ef51c1de 100644 --- a/lms/templates/main_django.html +++ b/lms/templates/main_django.html @@ -38,8 +38,10 @@ {% if IS_REQUEST_IN_MICROSITE %} {# For now we don't support overriden Django templates in microsites. Leave footer blank for now which is better than saying Edx.#} - {% elif IS_EDX_DOMAIN %} - {% include "footer-edx-new.html" %} + {% elif IS_EDX_DOMAIN and not ENABLE_FOOTER_V3 %} + {% include "footer-edx-v2.html" %} + {% elif IS_EDX_DOMAIN and ENABLE_FOOTER_V3 %} + {% include "footer-edx-v3.html" %} {% else %} {% include "footer.html" %} {% endif %}