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

Footer Bootstrap new design fixes WIP

Browse Source 
Fixes for new design as per instruction in this ticket.

LEARNER-3131
This commit is contained in:
Hamza Munir
2017-12-21 19:05:21 +05:00
parent 4946b6b296
commit a5e0989021
6 changed files with 174 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lms/djangoapps/branding/api.py
View File

@@ -273,6 +273,7 @@ def _footer_more_info_links():
("terms_of_service_and_honor_code", marketing_link("TOS_AND_HONOR"), _("Terms of Service & Honor Code")),
("privacy_policy", marketing_link("PRIVACY"), _("Privacy Policy")),
("accessibility_policy", marketing_link("ACCESSIBILITY"), _("Accessibility Policy")),
("trademarks", marketing_link("TRADEMARKS"), _("Trademarks")),
("sitemap", marketing_link("SITE_MAP"), _("Sitemap")),
]

2
lms/djangoapps/branding/tests/test_api.py
View File

@@ -54,6 +54,7 @@ class TestFooter(TestCase):
"DONATE": "/donate",
"JOBS": "/jobs",
"SITE_MAP": "/sitemap",
"TRADEMARKS": "/trademarks",
"TOS_AND_HONOR": "/edx-terms-service",
"PRIVACY": "/edx-privacy-policy",
"ACCESSIBILITY": "/accessibility",
@@ -98,6 +99,7 @@ class TestFooter(TestCase):
{'url': 'https://edx.org/accessibility',
'name': 'accessibility_policy',
'title': 'Accessibility Policy'},
{'url': 'https://edx.org/trademarks', 'name': 'trademarks', 'title': 'Trademarks'},
{'url': 'https://edx.org/sitemap', 'name': 'sitemap', 'title': 'Sitemap'},
],

3
lms/envs/devstack_docker.py
View File

@@ -52,7 +52,7 @@ MKTG_URLS = {
'AFFILIATES': '/affiliates',
'BLOG': '/blog',
'CAREERS': '/careers',
'CONTACT': '/contact',
'CONTACT': 'https://courses.edx.org/support/contact_us',
'COURSES': '/course',
'DONATE': '/donate',
'ENTERPRISE': '/enterprise',
@@ -66,6 +66,7 @@ MKTG_URLS = {
'ROOT': MARKETING_SITE_ROOT,
'SCHOOLS': '/schools-partners',
'SITE_MAP': '/sitemap',
'TRADEMARKS': '/trademarks',
'TOS': '/edx-terms-service',
'TOS_AND_HONOR': '/edx-terms-service',
'WHAT_IS_VERIFIED_CERT': '/verified-certificate',

BIN
lms/static/images/app/google_play_badge_45.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

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

@@ -19,6 +19,23 @@ footer#footer-edx-v3 {
padding: $baseline*0.75 0;
border-top: 1px solid $courseware-button-border-color;
.first-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.second-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.third-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.fourth-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.main-row {
display: -webkit-box;
display: -webkit-flex;
@@ -50,6 +67,10 @@ footer#footer-edx-v3 {
padding: 0 $baseline*0.75;
}
ul.clear-margins li {
padding-bottom: 5px;
}
.row.small-screen {
display: none;
}
@@ -58,16 +79,22 @@ footer#footer-edx-v3 {
display: flex;
}
ul li h3 {
h2.heading {
font-weight: 600;
padding: $baseline*0.25 0;
color: $lighter-base-font-color;
@include margin-left(8px);
}
.widget_nav_menu ul {
ul.clear-margins {
list-style: outside none none;
padding-left: 0;
margin-bottom: $baseline*0.75;
padding-bottom: $baseline*0.75;
margin-top: $baseline*0.75;
@include margin-left(8px);
border-bottom: 1px solid $courseware-button-border-color;
}
.footer-language-selector {
@@ -80,32 +107,25 @@ footer#footer-edx-v3 {
display: inline-flex;
}
.clear-margins {
margin-top: $baseline*0.75;
border-bottom: 1px solid $courseware-button-border-color;
}
.social {
margin-top: $baseline*1.5;
height: auto;
@include margin-left($baseline*0.25);
}
ul.social li {
display: table-cell;
width: 1%;
display: inline-flex;
@include margin-right(10px);
}
.edx-footer-logo {
display: inline-flex;
@include margin-left(5px);
}
.border-left {
@include border-left( 1px solid $courseware-button-border-color);
border-bottom: none;
}
// To match the Pattern Library
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -125,8 +145,9 @@ footer#footer-edx-v3 {
.copyright {
margin-top: 30px;
@include margin-left(8px);
@include font-size(16);
@include line-height(24);
@include line-height(24px);
}
.site-nav,
@@ -242,16 +263,13 @@ footer#footer-edx-v3 {
}
a.social-links {
@include margin(0, -7, 10, 0);
@include font-size(45);
@include line-height(28);
@include font-size(30);
@include line-height(1);
line-height: 1;
position: relative;
display: inline;
background: none;
text-align: left;
padding: $baseline*0.35;
&:first-of-type {
@include margin-left(0);
@@ -308,28 +326,35 @@ footer#footer-edx-v3 {
padding: 0;
}
.edx-footer-logo {
@include padding-left($baseline);
}
div.col-xl-4.col-lg-4.col-md-9.ml-md-auto.col-sm-6.flex-column.border-left {
@include border-left(1px solid $courseware-button-border-color);
}
div.col-xl-6 div.col-xl-4 div div {
border-bottom: 1px solid $courseware-button-border-color;
}
div.col-xl-6 div.col-xl-4:nth-child(3) div div {
border: none;
}
.remove-border-left {
.first-div-border {
@include border-left(none);
}
.remove-bottom-border {
.first-div-border div div {
border-bottom: 1px solid $courseware-button-border-color;
@include margin-left(7px);
}
.second-div-border div div {
border-bottom: 1px solid $courseware-button-border-color;
@include margin-left(7px);
}
.third-div-border div div {
border-bottom: none;
@include margin-left(7px);
}
.second-div-border {
@include border-left(none);
}
.third-div-border {
@include border-left(none);
}
.site-details {
@@ -360,7 +385,7 @@ footer#footer-edx-v3 {
}
a.social-links {
@include font-size(50);
@include font-size(35);
margin-top: 5px;
@@ -373,7 +398,7 @@ footer#footer-edx-v3 {
}
.col-sm-7 .footer-language-selector {
.footer-language-selector {
display: inline-block;
float: none;
}
@@ -385,20 +410,40 @@ footer#footer-edx-v3 {
}
@include media-breakpoint-up(md) {
.no-left-border {
@include border-left(none);
.edx-footer-logo {
display: inline-flex;
@include margin-left(20px);
margin-top: 5px;
}
div.col-xl-6 div.col-xl-4 div div {
.first-div-border {
@include border-left(none);
border-bottom: none;
}
div.border-left:nth-child(1) {
border: none;
.first-div-border div div {
border-bottom: none;
}
div.col-xl-4.col-lg-4.col-md-9.ml-md-auto.col-sm-6.flex-column.border-left {
border: none;
.second-div-border div div {
border-bottom: none;
}
.second-div-border {
@include border-left(1px solid $courseware-button-border-color);
border-bottom: none;
}
.third-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.fourth-div-border {
@include border-left(none);
}
padding: $baseline $baseline*0.5;
@@ -433,18 +478,10 @@ footer#footer-edx-v3 {
@include font-size(40);
}
.col-xl-10 div.row div:nth-child(2) div.row:nth-child(1) {
@include border-left(1px solid $courseware-button-border-color);
}
.col-xl-10 div.row div:nth-child(3) div.row:nth-child(1) {
@include border-left(1px solid $courseware-button-border-color);
}
.social {
display: inline-flex;
vertical-align: middle;
margin-top: $baseline*1.5;
margin-top: 18px;
}
.app-links {
@@ -455,19 +492,19 @@ footer#footer-edx-v3 {
vertical-align: middle;
}
.widget_nav_menu ul li {
ul.clear-margins li {
@include font-size(16);
}
ul li h3 {
h2.heading {
font-weight: 700;
}
.footer-language-selector {
.col-md-3 .footer-language-selector {
float: none;
display: block;
@include margin-left($baseline*1.5);
@include margin-left($baseline);
}
ul.social li {
@@ -479,22 +516,36 @@ footer#footer-edx-v3 {
@include media-breakpoint-up(lg) {
padding: $baseline $baseline*0.5;
.edx-footer-logo {
.margin {
@include margin-left($baseline);
}
.first-div-border {
@include border-left(none);
}
.second-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.third-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.fourth-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.col-xl-2 .edx-footer-logo {
@include margin-left($baseline);
@include padding(0, 0, $baseline, $baseline);
}
div.col-xl-6 div.col-xl-4 div div {
border-bottom: none;
}
.col-xl-10 div.row div div.row {
@include border-left(1px solid $courseware-button-border-color);
}
div.col-xl-4.col-lg-4.col-md-9.ml-md-auto.col-sm-6.flex-column.border-left {
@include border-left(1px solid $courseware-button-border-color);
}
.col-xl-10 div.row div:nth-child(1) div.row:nth-child(1) {
@include padding-left($baseline*1.75);
}
@@ -511,8 +562,8 @@ footer#footer-edx-v3 {
@include span-columns(4);
}
div.border-left:nth-child(1) {
border: none;
.app-links {
@include margin-left(0);
}
.social-media-links,
@@ -548,19 +599,18 @@ footer#footer-edx-v3 {
vertical-align: middle;
}
.widget_nav_menu ul li {
ul.clear-margins li {
@include font-size(16);
padding-bottom: $baseline*0.25;
}
ul li h3 {
h2.heading {
font-weight: 700;
padding-bottom: $baseline*0.5;
}
.footer-language-selector {
float: none;
.col-xl-2 .footer-language-selector {
display: inline-block;
}
@@ -570,18 +620,34 @@ footer#footer-edx-v3 {
}
@include media-breakpoint-up(xl) {
div.border-left:nth-child(1) {
.margin {
@include margin-left(0);
}
.first-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
div.col-xl-6 div.col-xl-4 div div {
border-bottom: none;
.second-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.third-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.fourth-div-border {
@include border-left(1px solid $courseware-button-border-color);
}
.footer-logo {
@include span-columns(2);
}
.app-links {
@include margin-left(0);
}
.site-details {
@include span-columns(7);
}
@@ -590,12 +656,12 @@ footer#footer-edx-v3 {
@include span-columns(3);
}
.widget_nav_menu ul li {
ul.clear-margins li {
@include font-size(16);
}
.edx-footer-logo {
@include margin-left(0);
.col-xl-2 .edx-footer-logo {
@include padding_left(0);
}
.social-media-links {
@@ -609,8 +675,6 @@ footer#footer-edx-v3 {
.col-xl-10 div.row div div.row {
height: 100%;
@include border-left( 1px solid $courseware-button-border-color);
}
.clear-margins {
@@ -623,12 +687,13 @@ footer#footer-edx-v3 {
.footer-language-selector {
margin: 20px 0;
padding: 0;
float: none;
}
}
.footer-language-selector {
margin: 20px 0;
margin: 10px 0;
label[for=footer-language-select] {
display: inline-block;

46
themes/edx.org/lms/templates/footer.html Normal file → Executable file
View File

@@ -24,7 +24,7 @@
% if uses_bootstrap:
<div class="container">
<div class="row main-row"><!-- row -->
<div class="col-xl-2 col-lg-12 col-md-3 col-sm-7 col-xs-10 flex-column">
<div class="col-xl-2 col-lg-12 col-md-3 col-sm-8 col-xs-10 flex-column">
<div class="edx-footer-logo">
<a href="${marketing_link('ROOT')}">
@@ -37,60 +37,48 @@
<%include file="${static.get_template_path('widgets/footer-language-selector.html')}"/>
% endif
</div>
<div class="col-xl-6 col-lg-8 col-md-9 col-sm-6 col-xs-12 flex-column">
<div class="col-xl-6 col-lg-8 col-md-9 col-sm-5 col-xs-12 flex-column">
<div class="row full-height">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 border-left ">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 first-div-border ">
<div class="row full-height">
<div class="ml-xl-0 col-lg-10 ml-lg-auto col-md-12 col-sm-10 mx-sm-auto full-height">
<ul class="list-unstyled clear-margins full-height">
<li class="widget-container widget_nav_menu">
<h3>edX</h3>
<ul>
<div class="ml-xl-0 col-lg-10 ml-lg-auto col-md-12 col-sm-10 full-height">
<h2 class="heading">edX</h2>
<ul class="list-unstyled clear-margins ">
% for link in footer["business_links"]:
<li>
<a href="${link['url']}">${link['title']}</a>
</li>
% endfor
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 border-left ">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 second-div-border ">
<div class="row full-height">
<div class="col-lg-12 col-md-12 col-sm-10 mx-sm-auto full-height">
<ul class="list-unstyled clear-margins full-height">
<li class="widget-container widget_nav_menu full-height">
<h3>More Information</h3>
<ul>
<div class="col-lg-12 col-md-12 col-sm-10 full-height">
<h2 class="heading">Legal</h2>
<ul class="list-unstyled clear-margins ">
% for link in footer["more_info_links"]:
<li>
<a href="${link['url']}">${link['title']}</a>
</li>
% endfor
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 border-left ">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 third-div-border ">
<div class="row full-height">
<div class="col-lg-12 col-md-12 col-sm-10 mx-sm-auto full-height">
<ul class="list-unstyled clear-margins full-height">
<li class="widget-container widget_nav_menu">
<h3>Connect</h3>
<ul>
<div class="col-lg-12 col-md-12 col-sm-10 full-height ">
<h2 class="heading">Connect</h2>
<ul class="list-unstyled clear-margins ">
% for link in footer["connect_links"]:
<li>
<a href="${link['url']}">${link['title']}</a>
</li>
% endfor
</ul>
</li>
</ul>
</div>
</div>
</div>
@@ -111,7 +99,7 @@
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-9 ml-md-auto col-sm-6 flex-column border-left">
<div class="col-xl-4 col-lg-4 col-md-9 ml-md-auto col-sm-7 flex-column fourth-div-border">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 social-app-links-div">
<div class="row">
@@ -144,8 +132,8 @@
<br/>
${_(
u"EdX, Open edX, and MicroMasters are trademarks of edX Inc., "
u"registered in the U.S. and other countries."
u"EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. 粤ICP备17044299号-2. "
)}
${u" | {icp}".format(icp=getattr(settings,'ICP_LICENSE')) if getattr(settings,'ICP_LICENSE',False) else ""}
</p>