Skip to content

E
edx-platform
Commit 337d6cbc by Brian Talbot
Options

LMS: revising markup/styling of edx-specific footer

parent a04c4bf1
Showing with 307 additions and 272 deletions
lms/static/sass/base/_variables.scss
......@@ -33,6 +33,17 @@ $very-light-text: #fff;
// ====================
// TIMING - used for animation/transition mixin syncing
$tmg-s3: 3.0s;
$tmg-s2: 2.0s;
$tmg-s1: 1.0s;
$tmg-avg: 0.75s;
$tmg-f1: 0.50s;
$tmg-f2: 0.25s;
$tmg-f3: 0.125s;
// ====================
// COLORS - utility
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
......
lms/static/sass/shared/_footer.scss
// edX theme: LMS Footer
// ====================
.region-footer {
border: 1px solid #f1f1f1;
padding-top: 16px;
background: none;
background-color: #fcfcfc;
.container {
background: none !important;
max-width: 1180px !important;
padding: 15px 20px;
width: calc(100% - 40px) !important;
}
}
.region-footer-columns {
padding: 0!important;
background: none;
border: none;
> .region-container-inner {
width: 100%;
margin: auto;
border: none;
background: none;
}
.region-footer-first {
width: 100% ;
float: none ;
.region-inner {
padding-right: 10px;
}
nav {
margin-bottom: 1em;
}
}
h2{
color: #3f4041;
font-size: 13px;
font-weight: 600;
border-bottom: none;
}
ul.menu{
padding: 0px;
margin-top: 1em;
li{
list-style: none none;
color: #8a8c8f;
font-size: 14px;
float: none !important;
padding-top: 3px !important;
span{font-size: 0px; color: #fcfcfc;}
a{
font-size: 14px;
color: #009ee7;
font-family: "Open Sans",Arial,Helvetica,sans-serif;
line-height: 24px;
span{font-size: 14px; font-weight: semibold;}
&.edx-bold{font-weight: 600;}
i{
font-size: 24px;
width: 25px;
display: inline-block;
margin-right: 10px;
font-family: FontAwesome;
}
}
}
}
ul.menu li a.fa{
line-height: 42px;
}
p.copyright{
color: #8a8c8f !important;
}
.region-footer-second {
width: 100% ;
float: none ;
nav {
margin-bottom: 1em;
width: 100%;
float: none;
padding-right: 0px;
padding-left: 0px;
border-left: none;
border-right: none;
margin-top: 30px;
}
.nav{
clear: none;
}
section.block-menu-social{
width: 100%;
padding: 0px;
margin-top: 30px;
}
}
.block-disclosure {
p{
font-size: 14px;
font-weight: normal;
line-height: 21px;
color: #3d3e3f;
padding-right: 20px;
img{
display: block;
padding: 15px 0px;
}
}
}
.block-menu-business a {
color: #565656;
&:hover {
color: #2F73BC;
}
}
.block-menu-social {
a {
border: 0;
}
ul.menu li {
margin: 0;
padding: 0;
float: right;
.menu_icon {
display: block;
background-position: center top !important;
overflow: hidden;
text-indent: -9999px;
width: 45px;
margin: 0;
padding: 0 !important;
}
}
li {
margin: 0;
padding: 0;
float: right;
}
}
.block-menu-supplement {
ul.menu li {
margin: 0;
padding: 0;
float: right;
a:hover {
border-bottom: 1px dotted #2F73BC;
}
span.separator {
padding: 0 10px;
}
}
.block-menu-supplement li {
margin: 0;
padding: 0;
float: right;
a:hover {
border-bottom: 1px dotted #2F73BC;
}
span.separator {
padding: 0 10px;
}
}
}
}
// LMS: footer
// Open edX: LMS footer
// ====================
.wrapper-footer {
box-shadow: 0 -1px 5px 0 rgba(0,0,0, 0.1);
......@@ -206,13 +19,10 @@
a {
@include transition(link-color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s);
&:link, &:visited, &:hover, &:focus, &:active {
border-bottom: none;
color: $link-color;
text-decoration: none !important;
font-family: $sans-serif;
}
border-bottom: none;
color: $link-color;
text-decoration: none !important;
font-family: $sans-serif;
&:hover, &:focus, &:active {
border-bottom: 1px dotted $link-color;
......@@ -386,3 +196,203 @@
}
}
}
// edX theme: LMS Footer
// ====================
$edx-footer-spacing: ($baseline*0.75);
$edx-footer-link-color: rgb(0, 158, 231);
%edx-footer-reset {
@include box-sizing(border-box);
}
%edx-footer-section {
float: left;
min-height: ($baseline*17.5);
margin-right: flex-gutter();
border-right: 1px solid rgb(230, 230, 230);
padding-right: ($baseline*1.5);
// CASE: last child
&:last-child {
margin-right: 0;
border: none;
padding-right: 0;
}
}
%edx-footer-title {
// TODO: refactor _typography.scss to extend this set of styling
@extend %t-title;
@extend %t-weight4;
@include font-size(15);
@include line-height(15);
text-transform: none;
letter-spacing: inherit;
color: rgb(61, 62, 63);
}
%edx-footer-link {
@extend %t-copy-sub1;
@include transition(color $tmg-f2 ease-in-out 0);
display: block;
margin-bottom: ($baseline/2);
// NOTE: resetting poor link styles
border: none;
padding: 0;
color: $edx-footer-link-color;
.copy {
@include transition(border-color $tmg-f2 ease-in-out 0);
display: inline-block;
border-bottom: 1px solid transparent;
padding: 0 0 ($baseline/20) 0;
color: $edx-footer-link-color;
}
// STATE: hover + focused
&:hover, &:focus {
color: saturate($edx-footer-link-color, 25%);
// NOTE: resetting poor link styles
border: none;
.copy {
border-bottom-color: saturate($edx-footer-link-color, 25%);
}
}
// CASE: last child
&:last-child {
margin-bottom: 0;
}
// CASE: has visual emphasis
&.has-emphasis {
@extend %t-weight4;
.copy {
@extend %t-weight4;
}
}
}
.edx-footer-new {
width: 100%;
background: rgb(252, 252, 252) url("../images/footer-seal.png") -($baseline*15.5) ($baseline) no-repeat;
// NOTE: resetting older footer styles - can be removed once not needed
box-shadow: none;
border-top: none;
padding: ($baseline*2) $baseline;
// about
// --------------------
.footer-about {
@extend %edx-footer-reset;
@extend %edx-footer-section;
width: flex-grid(6,12);
}
.footer-about-title {
@extend %edx-footer-title;
}
.footer-about-logo {
margin-bottom: $edx-footer-spacing;
}
.footer-about-copy {
@extend %t-copy-sub1;
margin-bottom: $edx-footer-spacing;
color: rgb(61, 62, 63);
p {
// NOTE: needed for poor LMS span styling
color: inherit;
}
}
.footer-about-copyright {
@extend %t-copy-sub1;
margin-bottom: $edx-footer-spacing;
color: rgb(138, 140, 143);
p {
// NOTE: needed for poor LMS span styling
color: inherit;
}
}
.footer-about-links {
a {
@extend %edx-footer-link;
margin-bottom: ($edx-footer-spacing/2);
}
.note {
color: rgb(138, 140, 143);
}
}
// nav (learn more links)
// --------------------
.footer-nav {
@extend %edx-footer-reset;
@extend %edx-footer-section;
width: flex-grid(3,12);
}
.footer-nav-title {
@extend %edx-footer-title;
}
.footer-nav-links {
margin-bottom: ($edx-footer-spacing*2.25);
a {
@extend %edx-footer-link;
}
}
// follow (social media)
// --------------------
.footer-follow {
@extend %edx-footer-reset;
@extend %edx-footer-section;
width: flex-grid(3,12);
}
.footer-follow-title {
@extend %edx-footer-title;
}
.footer-follow-links {
a {
@extend %edx-footer-link;
.icon, .copy {
display: inline-block;
vertical-align: middle;
}
.icon {
@extend %t-icon3;
margin-right: ($baseline/4);
text-align: center;
min-width: ($baseline*1.5);
}
.copy {
// NOTE: needed for poor LMS span styling
color: inherit;
}
}
}
}
lms/static/sass/shared/_header.scss
......@@ -318,22 +318,26 @@ header.global {
}
// edX theme: Global Header
// ====================
// CASE: marketing/course discovery
header.global-new {
@extend %ui-depth1;
position: relative;
height: ($baseline*3.75);
width: 100%;
border-bottom: 4px solid $courseware-border-bottom-color;
box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.1);
background: $header-bg;
height: 75px;
position: relative;
width: 100%;
z-index: 10;
nav {
@include clearfix;
height: 40px;
margin: 0 auto;
padding: 18px 10px 0px;
@include clearfix();
max-width: grid-width(12);
min-width: 760px;
height: ($baseline*2);
margin: 0 auto;
padding: 18px ($baseline/2) 0;
}
h1.logo {
......
lms/templates/footer-edx-new.html
......@@ -3,78 +3,88 @@
<%! from django.utils.translation import ugettext as _ %>
<%namespace name='static' file='static_content.html'/>
<div class="edx-footer">
<footer id="footer" class="clearfix region-footer" role="contentinfo">
<div class="region-footer-columns region-container container">
<div class="region-container-inner">
<!-- regions: Footer first and Footer second -->
<div class="region region-footer-first">
<div class="region-inner clearfix">
<div class="region-container-inner">
<div id="block-block-4" class="block block-block block-disclosure copy-detail no-title">
## 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.
<div class="wrapper wrapper-footer edx-footer edx-footer-new">
<footer id="footer-global" class="footer-global" role="contentinfo">
<p>
<img alt="edX" src="${static.url('images/header-logo.png')}">${_(
"{EdX} offers interactive online classes and MOOCs from the world's best universities. "
"Online courses from {MITx}, {HarvardX}, {BerkeleyX}, {UTx} and many other universities. "
"Topics include biology, business, chemistry, computer science, economics, finance, "
"electronics, engineering, food and nutrition, history, humanities, law, literature, "
"math, medicine, music, philosophy, physics, science, statistics and more. {EdX} is a "
"non-profit online initiative created by founding partners {Harvard} and {MIT}."
).format(
EdX="EdX", Harvard="Harvard", MIT="MIT", HarvardX="HarvardX", MITx="MITx",
BerkeleyX="BerkeleyX", UTx="UTx"
)}
</p>
<div class="footer-about">
<h2 class="sr footer-about-title">${_("About edX")}</h2>
## Translators: The © symbol appears directly before this line.
<p class="copyright">© ${_("2014 edX, except where noted, all rights reserved.")}</p>
<div class="footer-about-logo">
<img alt="edX logo" src="${static.url('images/header-logo.png')}">
</div>
<div class="footer-about-copy">
<p>
${_(
"{EdX} offers interactive online classes and MOOCs from the world's best universities. "
"Online courses from {MITx}, {HarvardX}, {BerkeleyX}, {UTx} and many other universities. "
"Topics include biology, business, chemistry, computer science, economics, finance, "
"electronics, engineering, food and nutrition, history, humanities, law, literature, "
"math, medicine, music, philosophy, physics, science, statistics and more. {EdX} is a "
"non-profit online initiative created by founding partners {Harvard} and {MIT}."
).format(
EdX="EdX", Harvard="Harvard", MIT="MIT", HarvardX="HarvardX", MITx="MITx",
BerkeleyX="BerkeleyX", UTx="UTx"
)}
</p>
</div>
<ul class="menu">
<li><a href="${marketing_link('TOS')}">${_("Terms of Service and Honor Code")}</a></li>
<li><a href="${marketing_link('PRIVACY')}">${_("Privacy Policy")}</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="region region-footer-second">
<div class="region-inner clearfix">
<div class="region-container-inner">
<nav id="block-menu-block-7" class="block block-menu-block" role="navigation">
<h2 class="block-title">${_("About & Company Info")}</h2>
<div class="footer-about-copyright">
<p>${_("&copy; 2014 edX, some rights reserved.")}</p>
</div>
<div class="menu-block-wrapper menu-block-7 menu-name-menu-about-company-in-footer parent-mlid-0 menu-level-1">
<ul class="menu clearfix">
<li><a href="${marketing_link('ABOUT')}">${_("About")}</a></li>
<li><a href="${marketing_link('NEWS')}">${_("News")}</a></li>
<li><a href="${marketing_link('CONTACT')}">${_("Contact")}</a></li>
<li><span>-</span></li>
<li><a href="${marketing_link('FAQ')}">${_("FAQ")}</a></li>
<li><a href="${marketing_link('BLOG')}">${_("edX Blog")}</a></li>
<li><span>-</span></li>
<li><a href="${marketing_link('DONATE')}" class="edx-bold">${_("Donate to edX")}</a></li>
<li><a href="${marketing_link('JOBS')}" class="edx-bold">${_("Jobs at edX")}</a></li>
</ul>
</div>
<div class="footer-about-links">
<a href="${marketing_link('TOS')}"><span class="copy">${_("Terms of Service and Honor Code")}</span></a>
<a href="${marketing_link('PRIVACY')}"><span class="copy">${_("Privacy Policy")}</span> <span class="note">${_("(Revised 4/16/2014)")}</span></a>
</div>
</div>
</nav>
<section id="block-menu-menu-social-menu" class="block block-menu nav block-menu-social" role="navigation">
<h2 class="block-title">${_("Follow Us")}</h2>
<div class="footer-nav">
<h2 class="footer-nav-title">${_("About & Company Info")}</h2>
<ul class="menu clearfix">
<li><a href="${settings.PLATFORM_TWITTER_URL}" title="Twitter"><i class="icon-twitter"></i>${_("Twitter")}</a></li>
<li><a href="${settings.PLATFORM_FACEBOOK_ACCOUNT}" title="Facebook"><i class="icon-facebook"></i>${_("Facebook")}</a></li>
<li><a href="${settings.PLATFORM_MEETUP_URL}" title="Meetup"><i class="icon-calendar"></i>${_("Meetup")}</a></li>
<li><a href="${settings.PLATFORM_LINKEDIN_URL}" title="LinkedIn"><i class="icon-linkedin"></i>${_("LinkedIn")}</a></li>
<li><a href="${settings.PLATFORM_GOOGLE_PLUS_URL}" title="Google+"><i class="icon-google-plus"></i>${_("Google+")}</a></li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
</footer>
<div class="footer-nav-links">
<a href="${marketing_link('ABOUT')}"><span class="copy">${_("About")}</span></a>
<a href="${marketing_link('NEWS')}"><span class="copy">${_("News")}</span></a>
<a href="${marketing_link('CONTACT')}"><span class="copy">${_("Contact")}</span></a>
</div>
<div class="footer-nav-links">
<a href="${marketing_link('FAQ')}"><span class="copy">${_("FAQ")}</span></a>
<a href="${marketing_link('BLOG')}"><span class="copy">${_("edX Blog")}</span></a>
</div>
<div class="footer-nav-links">
<a href="${marketing_link('DONATE')}" class="has-emphasis"><span class="copy">${_("Donate to edX")}</span></a>
<a href="${marketing_link('JOBS')}" class="has-emphasis"><span class="copy">${_("Jobs at edX")}</span></a>
</div>
</div>
<div class="footer-follow">
<h2 class="footer-follow-title">${_("Follow Us")}</h2>
<div class="footer-follow-links">
<a href="${settings.PLATFORM_TWITTER_URL}" title="Twitter">
<i class="icon icon-twitter"></i>
<span class="copy">${_("Twitter")}</span>
</a>
<a href="${settings.PLATFORM_FACEBOOK_ACCOUNT}" title="Facebook">
<i class="icon icon-facebook-sign"></i>
<span class="copy">${_("Facebook")}</span>
</a>
<a href="${settings.PLATFORM_MEETUP_URL}" title="Meetup">
<i class="icon icon-calendar"></i>
<span class="copy">${_("Meetup")}</span>
</a>
<a href="${settings.PLATFORM_LINKEDIN_URL}" title="LinkedIn">
<i class="icon icon-linkedin-sign"></i>
<span class="copy">${_("LinkedIn")}</span>
</a>
<a href="${settings.PLATFORM_GOOGLE_PLUS_URL}" title="Google+">
<i class="icon icon-google-plus-sign"></i>
<span class="copy">${_("Google+")}</span>
</a>
</div>
</div>
</footer>
</div>
lms/templates/footer-edx.html
......@@ -3,6 +3,7 @@
<%! 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.
<div class="wrapper wrapper-footer edx-footer">
<footer>
<div class="colophon">
......@@ -93,4 +94,4 @@
</nav>
</div>
</footer>
</div>
\ No newline at end of file
</div>
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