Refactor: Footer - Re-do mobile footer alignment (#1642)

cal-itp · Aug 11, 2023 · e36324e · e36324e
2 parents 63be611 + 45991ac
commit e36324e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 51 deletions.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -102,17 +102,36 @@
       {% endblock main-content %}
     </main>
 
-    <footer id="footer">
-      <div class="container">
+    <footer id="footer" class="navbar py-0">
+      <div class="container d-none d-lg-block">
         <ul class="footer-links m-0 p-0 list-unstyled d-lg-flex gap-lg-4">
           <li>
-            <a class="footer-link m-0 ms-5 ps-lg-0" href="{% url "core:help" %}">{% translate "Help" %}</a>
+            <a class="footer-link m-0 p-0" href="{% url "core:help" %}">{% translate "Help" %}</a>
           </li>
           <li>
-            <a class="footer-link m-0 ms-5 ps-lg-0" href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer">{% translate "Privacy Policy" %}</a>
+            <a class="footer-link m-0 p-0" href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer">{% translate "Privacy Policy" %}</a>
           </li>
         </ul>
       </div>
+
+      <div class="d-block d-lg-none container">
+        <ul class="col-12 footer-links ps-0 mb-0">
+          <li>
+            <a class="footer-link" href="{% url "core:help" %}">{% translate "Help" %}</a>
+          </li>
+        </ul>
+      </div>
+      <div class="d-block d-lg-none container-fluid p-0">
+        <hr class="border border-white border-1 p-0 m-0 w-100 opacity-100">
+      </div>
+      <div class="d-block d-lg-none container">
+        <ul class="col-12 footer-links ps-0 mb-0">
+          <li>
+            <a class="footer-link" href="https://cdt.ca.gov/privacy-policy/" target="_blank" rel="noopener noreferrer">{% translate "Privacy Policy" %}</a>
+          </li>
+        </ul>
+      </div>
+
     </footer>
 
     {% comment %}

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -257,38 +257,36 @@ h4 {
   line-height: var(--h4-line-height);
 }
 
+/* Header */
+#header-container {
+  height: 80px;
+}
+
+/* Language button */
+#header-container .btn-outline-light {
+  font-size: var(--bs-body-font-size);
+  padding: 3.5px 29.01px; /* 126 x 38px, all screen sizes  */
+}
+
 /* Main */
 /* The minimum height is calculated by 100 viewport height minus Header and Footer height */
 main {
   min-height: var(--main-content-min-height);
 }
 
 /* Footer */
-/* Footer has same font styles on all screen widths */
-/* Mobile first: One link per row, each link is 50px height */
-/* Screen width above 992px - Footer is 50px height */
-/* Total footer height is 50px on Desktop */
-/* And 102 on Mobile */
-/* Footer breakpoint set to 992px */
-/* Note: Not all Footer styles are written in mobile-first */
-/* to style the full-width line on mobile */
-/* and the desktop container-width sizing */
-
 :root {
   --footer-background-color: var(--dark-color);
   --footer-link-color: #73b3e7;
-  --footer-link-width: 100%;
   --footer-link-hover-color: #0062ff;
   --footer-link-visited-color: #9b74d7;
   --footer-link-font-weight: var(--bold-font-weight);
-  --footer-mobile-underline-color: var(--bs-white);
   --main-content-min-height: calc(100vh - 246px);
   /* 246px = Header Height (80px) + (Footer Link (50px) * Number of Links (2)) + Underline Height (2px) + Footer Margin Top (64px) */
 }
 
 @media (min-width: 992px) {
   :root {
-    --footer-link-width: auto;
     --main-content-min-height: calc(100vh - 194px);
     /* 194px = Header Height (80px) + Footer Height (50px) + Footer Margin Top (64px) */
   }
@@ -299,10 +297,6 @@ footer {
   margin-top: 64px;
 }
 
-footer .footer-links li {
-  width: var(--footer-link-width);
-}
-
 footer .footer-links li a.footer-link {
   color: var(--footer-link-color);
   font-weight: var(--footer-link-font-weight);
@@ -327,36 +321,6 @@ footer .footer-links li a.footer-link:visited {
   color: var(--footer-link-visited-color);
 }
 
-/* Custom non-mobile-first code to */
-/* allow the mobile footer to have a */
-/* full-width line beyond container-fluid width */
-@media (max-width: 992px) {
-  footer {
-    margin-top: 64px;
-  }
-
-  footer .container {
-    max-width: 100%;
-    padding: 0;
-  }
-
-  footer .footer-links li:not(:last-child) {
-    border-bottom: 2px solid var(--footer-mobile-underline-color);
-  }
-}
-
-/* Header */
-
-#header-container {
-  height: 80px;
-}
-
-/* Language button */
-#header-container .btn-outline-light {
-  font-size: var(--bs-body-font-size);
-  padding: 3.5px 29.01px; /* 126 x 38px, all screen sizes  */
-}
-
 /* Buttons */
 /* Primary Button: Use all three classes: btn btn-lg btn-primary */
 /* Set button width in parent with Bootstrap column */