Redesign footer (#1868)

mitodl · Sep 8, 2023 · 0b6e49d · 0b6e49d
1 parent 4861916
commit 0b6e49d
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 1 deletion.
diff --git a/cms/models_test.py b/cms/models_test.py
@@ -171,6 +171,7 @@ def test_course_page_context(
             for member in course_page.linked_instructors.order_by("order").all()
         ],
         "new_design": features.is_enabled("mitxonline-new-product-page"),
+        "new_footer": features.is_enabled("mitxonline-new-footer"),
     }
 
     context = course_page.get_context(request=request)

diff --git a/frontend/public/scss/footer.scss b/frontend/public/scss/footer.scss
@@ -1,5 +1,149 @@
 // sass-lint:disable mixins-before-declarations
 
+.new-footer {
+  border-top: 2px solid $brand-darker-bg;
+  background: $footer-blue-bg;
+  color: #FFF;
+  font-size: 13px;
+  white-space: normal;
+  display: flex;
+  justify-content: center;
+  margin-top: 10%;
+
+  .new-footer-container {
+    display:flex;
+
+    @include media-breakpoint-down(md) {
+       flex-direction: column-reverse;
+       padding-left: 5px;
+    }
+  }
+
+  .copyright-container {
+       padding: 40px 0 40px 40px;
+       width:47%;
+       flex-wrap: wrap;
+       flex-direction: row-reverse;
+       padding-left: 98px;
+
+      @include media-breakpoint-down(sm) {
+         margin-top: 0;
+         padding-left: 12px;
+         width:100%;
+         padding-top: 0;
+         display: inline-flex;
+         flex-direction: column;
+        }
+
+      @media (min-width: 768px) {
+        padding-left:70px
+      }
+
+
+      .copyright-col{
+        margin-left: 100px;
+        @include media-breakpoint-down(sm) {
+          margin-left: 0
+        }
+      }
+
+      .address-col>address, .copyright-col{
+        opacity: 0.6;
+      }
+      .address-col, .copyright-col {
+        display:inline-flex;
+      }
+
+      .address-col>img {
+          width: 85px;
+          height: 45px;
+          flex-shrink: 0;
+          margin-top: 5px;
+          margin-right: 15px;
+      }
+  }
+
+  .help-contact-container{
+    width:55%;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    opacity: 0.6;
+
+    @media (min-width: 1024px) {
+      width: auto;
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding-left: 12px;
+      width:100%;
+      .links > li {
+        width: calc(100% / 3);
+        padding: 5px 0;
+      }
+    }
+
+    .help-contact-row {
+         display: flex;
+         flex-direction: row;
+
+        @include media-breakpoint-down(md) {
+           flex-direction: column;
+        }
+     }
+
+    .help-col, .contact-col {
+       display: inline-flex;
+       margin-right: 30px;
+       @include media-breakpoint-down(md) {
+          margin-right: 0
+       }
+    }
+
+    .info {
+      margin-left: 15px;
+    }
+    .info>a {
+      font-size:16px;
+      text-decoration: none;
+    }
+
+    img {
+      width: 35px;
+      height: 35px;
+      padding: 0.484px 0 1.453px 0;
+      flex-shrink: 0;
+      margin-top: 5px;
+    }
+
+    a {
+       color:  #FFF;
+       text-decoration: none;
+    }
+
+    .links {
+          display: inline-flex;
+          gap: 30px;
+          width: 100%;
+          list-style: none;
+          padding: 0;
+          flex-wrap: wrap;
+          margin-top: 30px;
+
+          @media (max-width: 1024px) {
+            gap: 10px;
+         }
+         @include media-breakpoint-down(sm) {
+           gap: 0;
+           width: auto;
+         }
+      }
+
+  }
+
+}
+
+
+//old footer
 .footer {
 
   background: $footer-bg;

diff --git a/frontend/public/scss/variables.scss b/frontend/public/scss/variables.scss
@@ -35,6 +35,7 @@ $events-background: #e3e3e3;
 
 $footer-bg: #000000;
 $footer-border: #686461;
+$footer-blue-bg: #03152D;
 
 $dc-background: #f2f2f2;
 $subtitle-color: #ff4a68;

diff --git a/main/features.py b/main/features.py
@@ -11,6 +11,7 @@
 ENABLE_NEW_HOME_PAGE_HERO = "mitxonline-new-featured-hero"
 ENABLE_NEW_HOME_PAGE_VIDEO = "mitxonline-new-home-page-video-component"
 ENABLE_NEW_HOME_PAGE_CONTACT_FORM = "mitxonline-new-home-page-contact-form"
+ENABLE_NEW_FOOTER = "mitxonline-new-footer"
 
 
 def is_enabled(name, default=None, unique_id=settings.HOSTNAME):

diff --git a/main/templates/footer.html b/main/templates/footer.html
@@ -1,5 +1,60 @@
 {% load static %}
 
+{% if new_footer %}
+<footer class="new-footer">
+  <div class="new-footer-container">
+      <div class="copyright-container">
+          <div class="address-col">
+           <img src="{% static 'images/mit.png' %}" alt="MIT" loading="lazy"/>
+            <address>
+              Massachusetts Institute of Technology <br />77 Massachusetts Avenue
+              <br />Cambridge, MA 02139
+            </address>
+          </div>
+          <div class="copyright-col">
+            {% include "copyright.html" %}
+          </div>
+      </div>
+      <div class="help-contact-container">
+        <div class="help-contact-row">
+            <div class="help-col">
+              <img src={% static 'images/help-faq.png' %} alt="Help" loading="lazy"/>
+              <div class="info">
+                <a href=" https://mitxonline.zendesk.com/hc/en-us">Help & FAQ</a>
+                <p>Find answers to your questions.</p>
+              </div>
+            </div>
+
+            <div class="contact-col">
+              <img src={% static 'images/contact-us.png' %} alt="Contact Us" loading="lazy"/>
+              <div class="info">
+                <a href="https://mitxonline.zendesk.com/hc/en-us/requests/new">Contact Us</a>
+                <p>Let us know how we can assist you.</p>
+              </div>
+            </div>
+        </div>
+        <div class="links-row">
+            <ul class="links">
+              <li><a href="/about-us/">About Us</a></li>
+              <li><a href="/terms-of-service/">Terms of Service</a></li>
+              <li>
+                <a
+                  target="_blank"
+                  href="https://accessibility.mit.edu/"
+                  rel="noopener noreferrer"
+                  >Accessibility
+                </a>
+              </li>
+              <li><a href="/privacy-policy/">Privacy Policy</a></li>
+              <li><a href="/honor-code/">Honor Code</a></li>
+              <li><a href="https://mitxonline.zendesk.com/hc/en-us/requests/new">Contact Us</a></li>
+            </ul>
+        </div>
+      </div>
+  </div>
+</footer>
+
+{% else %}
 <footer class="footer">
   <div class="support-links">
     <div class="container content-holder">
@@ -62,3 +117,4 @@ <h2>Contact Us</h2>
     </div>
   </div>
 </footer>
+{% endif %}
diff --git a/main/views.py b/main/views.py
@@ -18,7 +18,10 @@ def get_base_context(request):
     """
     Returns the template context key/values needed for the base template and all templates that extend it
     """
-    context = {"new_design": is_enabled("mitxonline-new-product-page", False)}
+    context = {
+        "new_design": features.is_enabled(features.ENABLE_NEW_DESIGN, False),
+        "new_footer": features.is_enabled(features.ENABLE_NEW_FOOTER, False),
+    }
 
     if settings.GOOGLE_DOMAIN_VERIFICATION_TAG_VALUE:
         context[

diff --git a/static/images/contact-us.png b/static/images/contact-us.png
diff --git a/static/images/help-faq.png b/static/images/help-faq.png