Skip to content

Commit

Permalink
Added configurable and consistant footer as per MITX speacifications.
Browse files Browse the repository at this point in the history
  • Loading branch information
Wassaf-Shahzad committed Oct 13, 2021
1 parent 1769069 commit 7e17807
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 3 deletions.
13 changes: 13 additions & 0 deletions .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,16 @@ LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
ABOUT_US_URL=
PRIVACY_POLICY_URL=
HONOR_CODE_URL=
TERMS_OF_SERVICE_URL=
CONTACT_URL=
SUPPORT_CENTER_URL=
SUPPORT_CENTER_TEXT=
TRADEMARK_TEXT=
SITE_URL=
LOGO_ALT_TEXT=
SHOW_LOGO=
SUPPORT_EMAIL=

53 changes: 53 additions & 0 deletions src/_footer.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,58 @@
$gray-footer: #fcfcfc !default;
$link-blue: #006daa;

.footer {
background-color: $gray-footer;

.copyright-col {
display: flex;
flex-direction: column;
padding-left: 20px;
padding-right: 20px;
}
}

.footer-sub-nav {
padding: 0;
margin: 0 0 5px;
list-style: none;
font-size: 15px;
line-height: 20px;

@include media-breakpoint-down(md) {
text-align: left;
}

@include media-breakpoint-up(md) {
margin: 0;
}

li {
display: inline-block;
vertical-align: top;
margin: 0;

@include media-breakpoint-down(md) {
display: block;
margin: 0;
padding: 0 0 7px;

&::before {
display: none;
}
}

&::before {
content: "-";
padding-left: 5px;
padding-right: 5px;
color: $link-blue
}

&:first-child {
&::before {
display: none;
}
}
}
}
26 changes: 23 additions & 3 deletions src/components/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ class SiteFooter extends React.Component {
sendTrackEvent(eventName, properties);
}

renderLinkIfExists(value,text){
return value && <li><a href={value}>{text}</a></li>
}

render() {
const {
supportedLanguages,
Expand All @@ -49,24 +53,40 @@ class SiteFooter extends React.Component {
} = this.props;
const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
const { config } = this.context;

return (
<footer
role="contentinfo"
className="footer d-flex border-top py-3 px-4"
>
<div className="container-fluid d-flex">
{ process.env.SHOW_LOGO &&
<a
className="d-block"
href="https://open.edx.org"
href={process.env.SITE_URL}
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
>
<img
style={{ maxHeight: 45 }}
src={logo || config.LOGO_TRADEMARK_URL}
alt={intl.formatMessage(messages['footer.logo.altText'])}
alt={ process.env.LOGO_ALT_TEXT || intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
}
<div class="copyright-col">
{process.env.TRADEMARK_TEXT && <div class="text-gray-500 small">
{process.env.TRADEMARK_TEXT}
</div>}
<div>
<ul class="footer-sub-nav">
{this.renderLinkIfExists(process.env.ABOUT_US_URL,"About Us")}
{this.renderLinkIfExists(process.env.TERMS_OF_SERVICE_URL,"Terms of Service")}
{this.renderLinkIfExists(process.env.PRIVACY_POLICY_URL,"Privacy Policy")}
{this.renderLinkIfExists(process.env.HONOR_CODE_URL,"Honor Code")}
{this.renderLinkIfExists(process.env.Contact,"Contact")}
{this.renderLinkIfExists(process.env.SUPPORT_CENTER_URL,process.env.SUPPORT_CENTER_TEXT || "FAQ & Help")}
</ul>
</div>
</div>
<div className="flex-grow-1" />
{showLanguageSelector && (
<LanguageSelector
Expand Down

0 comments on commit 7e17807

Please sign in to comment.