Skip to content

E
edx-platform
Commit 2f625537 by Brian Talbot Committed by John Jarvis
Options

drupal integration - revised UI of global footer to matched marketing site footer content and feel

parent eda371a1
Showing with 181 additions and 170 deletions
lms/static/sass/shared/_footer.scss
footer { .wrapper-footer {
background: transparent; border-top: 1px solid tint($m-gray,50%);
border-top: 1px solid rgb(200,200,200); padding: $baseline ($baseline/2) ($baseline*1.5) ($baseline/2);
@include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1)); background: $white;
margin: 0 auto;
width: flex-grid(12);
&.fixed-bottom {
bottom: 0px;
max-width: 100%;
position: absolute;
}
nav { footer {
max-width: 1200px; @include clearfix();
margin: 0 auto;
padding: 30px 10px 0;
max-width: grid-width(12); max-width: grid-width(12);
min-width: 760px; min-width: 760px;
margin: 0 auto;
p, ol, ul {
font-family: $sans-serif;
}
a {
@include transition(color 0.15s ease-in-out, border 0.15s ease-in-out);
.top { &:link, &:visited, &:hover, &:active {
border-bottom: 1px solid rgb(200,200,200); border-bottom: none;
@include clearfix; color: $m-blue;
padding-bottom: 30px; text-decoration: none !important;
width: flex-grid(12); font-family: $sans-serif;
text-align: center; }
&:hover, &:active {
border-bottom: 1px dotted shade($m-blue, 20%);
color: shade($m-blue, 20%);
}
}
// colophon
.colophon {
margin-right: flex-gutter(2);
width: flex-grid(6);
float: left;
ol { .nav-colophon {
float: right; @include clearfix();
margin: ($baseline/4) 0 ($baseline*1.5) 0;
li { li {
@include inline-block; float: left;
list-style: none; margin-right: ($baseline*0.75);
padding: 0px 15px;
position: relative; a {
vertical-align: middle; color: tint($black, 20%);
&::after { &:hover, &:active {
@extend .faded-vertical-divider; color: shade($m-blue, 20%);
content: ""; }
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -5px;
width: 1px;
} }
a:link, a:visited { &:last-child {
color: $lighter-base-font-color; margin-right: 0;
padding: 6px 0px;
} }
} }
} }
.primary { .colophon-about {
@include clearfix;
float: left;
a.logo {
@include background-image(url('/static/images/logo.png'));
background-position: 0 -24px;
background-repeat: no-repeat;
@include inline-block;
height: 22px;
margin-right: 15px;
margin-top: 2px;
padding-right: 15px;
position: relative;
width: 47px;
vertical-align: middle;
@include transition(none);
&:hover {
background-position: 0 0;
}
&::after { img {
@extend .faded-vertical-divider; width: 68px;
content: ""; height: 34px;
display: block; margin-right: 0;
height: 30px; float: left;
right: 0px;
position: absolute;
top: -3px;
width: 1px;
}
} }
a { p {
color: $lighter-base-font-color; float: left;
@include inline-block; width: 460px;
margin-right: 20px; margin-left: $baseline;
padding-top: 2px; padding-left: $baseline;
vertical-align: middle; font-size: em(13);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
&:hover {
color: $base-font-color;
text-decoration: none;
}
} }
} }
}
.social { // references
float: right; .references {
margin: 0;
width: flex-grid(4);
float: right;
&.social { .nav-social {
border: none; margin: 0 0 ($baseline/4) 0;
margin: 0 0 0 5px; text-align: right;
padding: 0;
li {
margin-right: ($baseline/10);
display: inline-block;
&:last-child {
margin-right: 0;
}
a { a {
@include inline-block; display: block;
opacity: 0.3;
@include transition(all, 0.1s, linear);
&:hover { &:hover, &:active {
opacity: 1; border: none;
} }
} }
img {
display: block;
}
} }
} }
}
.bottom { .copyright {
@include clearfix; margin: 0 0 ($baseline/4) 0;
opacity: 0.8; font-size: em(11);
padding: 10px 0px 30px; color: tint($m-gray,50%);
@include transition(all, 0.15s, linear); text-align: right;
width: flex-grid(12);
&:hover {
opacity: 1;
} }
.copyright { .nav-legal {
float: left; @include clearfix();
text-align: right;
p { li {
color: $lighter-base-font-color; display: inline-block;
font-style: italic; font-size: em(11);
@include inline-block;
margin: 0 auto;
padding-top: 1px;
text-align: center;
vertical-align: middle;
a { a {
color: $lighter-base-font-color; display: block;
font-style: italic;
margin-left: 5px;
&:hover {
color: $blue;
}
} }
} }
}
.secondary {
float: right;
text-align: left;
a { .nav-legal-01 a {
color: $lighter-base-font-color;
font-family: $serif;
font-style: italic;
line-height: 1.6em;
margin-left: 20px;
text-transform: lowercase;
&:hover { &:after {
color: $blue; margin-left: 5px;
content: "-";
} }
} }
} }
} }
} }
} }
\ No newline at end of file
lms/static/sass/shared/_header.scss
header.global { header.global {
border-bottom: 1px solid rgb(190,190,190); border-bottom: 1px solid tint($m-gray,50%);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
background: $white; background: $white;
height: 76px; height: 76px;
......
lms/templates/footer.html
...@@ -2,39 +2,84 @@ ...@@ -2,39 +2,84 @@
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<footer> <div class="wrapper wrapper-footer">
<nav> <footer>
<section class="top"> <div class="colophon">
<section class="primary"> <nav class="nav-colophon">
<a href="${reverse('root')}" class="logo"></a> <ol>
<a href="${reverse('courses')}">Find Courses</a> <li class="nav-colophon-01">
<a href="${reverse('about_edx')}">About</a> <a href="${reverse('about_edx')}">About</a>
<a href="http://blog.edx.org/">Blog</a> </li>
<a href="${reverse('jobs')}">Jobs</a> <li class="nav-colophon-02">
<a href="${reverse('contact')}">Contact</a> <a href="${reverse('jobs')}">Jobs</a>
</section> </li>
<li class="nav-colophon-03">
<a href="#">Press</a>
</li>
<li class="nav-colophon-04">
<a href="#">FAQ</a>
</li>
<li class="nav-colophon-05">
<a href="${reverse('contact')}">Contact</a>
</li>
% if user.is_authenticated():
<li class="nav-colophon-06">
<a href="#">Help</a>
</li>
% endif
</ol>
</nav>
<section class="social"> <div class="colophon-about">
<a href="http://youtube.com/user/edxonline"><img src="${static.url('images/social/youtube-sharing.png')}" /></a> <img src="${MITX_ROOT_URL}/static/images/header-logo.png" />
<a href="https://plus.google.com/108235383044095082735"><img src="${static.url('images/social/google-plus-sharing.png')}" /></a>
<a href="http://www.facebook.com/EdxOnline"><img src="${static.url('images/social/facebook-sharing.png')}" /></a>
<a href="https://twitter.com/edXOnline"><img src="${static.url('images/social/twitter-sharing.png')}" /></a>
</section>
</section>
<section class="bottom"> <p>EdX is a non-profit created by founding partners Harvard and MIT whose mission is to bring the best of higher education to students of all ages anywhere in the world, wherever there is Internet access. EdX’s free online MOOCs are interactive and subjects include computer science, public health, and artificial intelligence.</p>
<section class="copyright"> </div>
## <p>&copy; 2012 edX, <a href="${reverse('copyright')}">some rights reserved.</a></p> # TODO: (bridger) Update the copyright for edX, then re-enable the link. </div>
<p>&copy; 2012 edX, some rights reserved.</p>
</section>
<section class="secondary"> <div class="references">
<a href="${reverse('tos')}">Terms of Service</a> <nav class="nav-social">
<a href="${reverse('privacy_edx')}">Privacy Policy</a> <ul>
<a href="${reverse('honor')}">Honor Code</a> <li class="nav-social-01">
<a href="${reverse('help_edx')}">Help</a> <a href="http://www.meetup.com/edX-Global-Community/" rel="external">
</section> <img src="${MITX_ROOT_URL}/static/images/social/social-meetup.png" alt="edX on Meetup" />
</section> </a>
</li>
<li class="nav-social-02">
<a href="http://www.facebook.com/EdxOnline" rel="external">
<img src="${MITX_ROOT_URL}/static/images/social/social-facebook.png" alt="edX on Facebook" />
</a>
</li>
<li class="nav-social-03">
<a href="https://twitter.com/edXOnline" rel="external">
<img src="${MITX_ROOT_URL}/static/images/social/social-twitter.png" alt="edX on Twitter" />
</a>
</li>
<li class="nav-social-04">
<a href="https://plus.google.com/108235383044095082735/posts" rel="external">
<img src="${MITX_ROOT_URL}/static/images/social/social-google.png" alt="edX on Google+" />
</a>
</li>
<li class="nav-social-05">
<a href="http://youtube.com/user/edxonline" rel="external">
<img src="${MITX_ROOT_URL}/static/images/social/social-youtube.png" alt="edX on YouTube" />
</a>
</li>
</ul>
</nav>
</nav> <p class="copyright">&copy; 2013 edX, some rights reserved.</p>
</footer>
<nav class="nav-legal">
<ul>
<li class="nav-legal-01">
<a href="${reverse('tos')}">Terms of Service and Honor Code</a>
</li>
<li class="nav-legal-02">
<a href="${reverse('privacy_edx')}">Privacy Policy</a>
</li>
</ul>
</nav>
</div>
</footer>
</div>
\ No newline at end of file
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