Added configurable and cosistant footer

mitodl · Sep 30, 2021 · 76bb7c8 · 76bb7c8
1 parent 1769069
commit 76bb7c8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 4 deletions.
diff --git a/.env.development b/.env.development
@@ -14,6 +14,14 @@ SEGMENT_KEY=null
 SITE_NAME=Open edX
 USER_INFO_COOKIE_NAME=edx-user-info
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
-LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_TRADEMARK_URL=https://rc.mitxonline.mit.edu/static/images/mit-logo.jpg
 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=http://mitx.odl.local:8013/about-us/
+PRIVACY_POLICY_URL=http://mitx.odl.local:8013/privacy-policy/
+HONOR_CODE_URL=http://mitx.odl.local:8013/honor-code/
+TERMS_OF_SERVICE_URL=http://mitx.odl.local:8013/terms-of-service/
+CONTACT_URL=
+TRADEMARK_TEXT=© MITx Online. All rights reserved except where noted.
+SITE_URL=
+LOGO_ALT_TEXT=
diff --git a/src/_footer.scss b/src/_footer.scss
@@ -2,4 +2,45 @@ $gray-footer: #fcfcfc !default;
 
 .footer {
   background-color: $gray-footer;
+
+  .copyright-col {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+  }
+}
+
+.footer-sub-nav {
+  padding: 0;
+  margin: 0 0 5px;
+  list-style: none;
+  text-align: right;
+  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 5px;
+
+    @include media-breakpoint-down(sm) {
+      display: block;
+      margin: 0;
+      padding: 0 0 7px;
+    }
+
+    &:first-child {
+      &::before {
+        display: none;
+      }
+    }
+  }
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -49,7 +49,6 @@ class SiteFooter extends React.Component {
     } = this.props;
     const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
     const { config } = this.context;
-
     return (
       <footer
         role="contentinfo"
@@ -58,15 +57,28 @@ class SiteFooter extends React.Component {
         <div className="container-fluid d-flex">
           <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">
+            <div class="text-gray-500 small">
+              {process.env.TRADEMARK_TEXT}
+            </div>
+            <div>
+              <ul class="footer-sub-nav">
+                <li><a href={process.env.ABOUT_US_URL}>About Us</a></li>
+                <li><a href={process.env.TERMS_OF_SERVICE_URL}>Terms of Service</a></li>
+                <li><a href={process.env.PRIVACY_POLICY_URL}>Privacy Policy</a></li>
+                <li><a href={process.env.HONOR_CODE_URL}>Honor Code</a></li>
+              </ul>
+           </div>
+          </div>
           <div className="flex-grow-1" />
           {showLanguageSelector && (
             <LanguageSelector