Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ECOM-1339 minor CSS tweaks for the footer. It now extends the full width of the browser and fixes issues with link hover states.

Browse Source
This commit is contained in:
AlasdairSwan
2015-05-28 15:16:03 -04:00
parent 81578791ed
commit 0c7abfbe72
2 changed files with 60 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
lms/static/sass/shared/_footer-edx.scss
View File

@@ -14,11 +14,14 @@ $edx-footer-bg-color: rgb(252,252,252);
// 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;
.footer-content-wrapper {
@include outer-container;
@include box-sizing(border-box);
}
p {
@include font-size(14);
@include line-height(14);
@@ -36,6 +39,11 @@ footer#footer-edx-v3 {
&:last-of-type {
@include margin-right(0);
}
&:hover,
&:focus {
border: none;
}
}
}
@@ -59,8 +67,8 @@ footer#footer-edx-v3 {
}
.openedx-link {
@include margin(10px, 0, 30px, -8px);
width: 141px;
margin-bottom: 30px;
a {
display: inline-block;
@@ -82,10 +90,10 @@ footer#footer-edx-v3 {
a.sm-link {
@include float(left);
@include margin(0, 0, 10px, 12px);
@include margin(0, 0, 10px, 7px);
@include font-size(28);
@include line-height(28);
width: 30px;
width: 35px;
height: 30px;
line-height: 1;
position: relative;
@@ -97,8 +105,10 @@ footer#footer-edx-v3 {
@include margin-left(0);
}
&:hover {
&:hover,
&:focus {
opacity: 0.7;
border: none;
}
.icon {

87
lms/templates/footer-edx-v3.html
View File

@@ -16,51 +16,52 @@
% endif
>
<h2 class="sr footer-about-title">${_("About edX")}</h2>
<div class="footer-logo">
<img alt="edX logo" src="${footer['logo_image']}">
</div>
<div class="site-details">
<nav class="site-nav" aria-label="${_("About edX")}">
% for link in footer["navigation_links"]:
<a href="${link['url']}">${link['title']}</a>
% endfor
</nav>
<nav class="legal-notices" aria-label="${_("Legal")}">
% for link in footer["legal_links"]:
<a href="${link['url']}">${link['title']}</a>
% endfor
</nav>
<p class="copyright">${footer['copyright']}</p>
## The OpenEdX link may be hidden when this view is served
## through an API to partner sites (such as marketing sites or blogs),
## which are not technically powered by OpenEdX.
% if not hide_openedx_link:
<div class="openedx-link">
<a href="${footer['openedx_link']['url']}" title="${footer['openedx_link']['title']}">
<img alt="${footer['openedx_link']['title']}" src="${footer['openedx_link']['image']}" width="140">
</a>
</div>
% endif
</div>
<div class="external-links">
<div class="social-media-links">
% for link in footer['social_links']:
<a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer">
<span class="icon fa ${link['icon-class']}" aria-hidden="true"></span>
</a>
% endfor
<div class="footer-content-wrapper">
<div class="footer-logo">
<img alt="edX logo" src="${footer['logo_image']}">
</div>
<div class="mobile-app-links">
% for link in footer['mobile_links']:
<a href="${link['url']}" class="app-link external">
<img alt="${link['title']}" src="${link['image']}">
</a>
% endfor
<div class="site-details">
<nav class="site-nav" aria-label="${_("About edX")}">
% for link in footer["navigation_links"]:
<a href="${link['url']}">${link['title']}</a>
% endfor
</nav>
<nav class="legal-notices" aria-label="${_("Legal")}">
% for link in footer["legal_links"]:
<a href="${link['url']}">${link['title']}</a>
% endfor
</nav>
<p class="copyright">${footer['copyright']}</p>
## The OpenEdX link may be hidden when this view is served
## through an API to partner sites (such as marketing sites or blogs),
## which are not technically powered by OpenEdX.
% if not hide_openedx_link:
<div class="openedx-link">
<a href="${footer['openedx_link']['url']}" title="${footer['openedx_link']['title']}">
<img alt="${footer['openedx_link']['title']}" src="${footer['openedx_link']['image']}" width="140">
</a>
</div>
% endif
</div>
<div class="external-links">
<div class="social-media-links">
% for link in footer['social_links']:
<a href="${link['url']}" class="sm-link external" title="${link['title']}" rel="noreferrer">
<span class="icon fa ${link['icon-class']}" aria-hidden="true"></span>
</a>
% endfor
</div>
<div class="mobile-app-links">
% for link in footer['mobile_links']:
<a href="${link['url']}" class="app-link external">
<img alt="${link['title']}" src="${link['image']}">
</a>
% endfor
</div>
</div>
</div>
</footer>