refactor: an attempt to refactor media-item css

cal-itp · Dec 6, 2024 · edfa4cf · edfa4cf
1 parent 27eea85
commit edfa4cf
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 35 deletions.
diff --git a/benefits/core/templates/core/includes/media-item.html b/benefits/core/templates/core/includes/media-item.html
@@ -1,10 +1,10 @@
-<li class="media d-flex align-items-stretch w-auto">
+<li class="media">
     <div class="media-body">
         {% block heading_wrapper %}
-            <{{ heading_tag|default:"h3" }} class="media-body--heading h3">
-            {% block heading %}
-            {% endblock heading %}
-            </{{ heading_tag|default:"h3" }}>
+            <h2 class="h3">
+                {% block heading %}
+                {% endblock heading %}
+            </h2>
         {% endblock heading_wrapper %}
         {% block body %}
         {% endblock body %}

diff --git a/...gibility/templates/eligibility/includes/media-item--identification--start--login-gov.html b/...gibility/templates/eligibility/includes/media-item--identification--start--login-gov.html
@@ -7,15 +7,15 @@
 {% endblock heading %}
 
 {% block body %}
-  <div class="media-body--details">
+  <div>
     <p>
       {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
       {% translate "Learn more about identity verification" as text %}
       {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
     </p>
-    <div class="media-body--items">
+    <div>
       <p>{% translate "For this process you will need:" %}</p>
-      <ul>
+      <ul class="ms-lg-5 ms-0">
         <li>{% translate "Your state-issued ID card" %}</li>
         <li>{% translate "Your Social Security number" %}</li>
         <li>{% translate "A phone number with a phone plan associated with your name" %}</li>

diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
@@ -13,7 +13,7 @@
 {% block inner-content %}
   <div class="col-lg-6">
     <p class="py-4">{% translate "You will need a few items to continue:" %}</p>
-    <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+    <ul class="d-flex flex-column gap-4 list-unstyled ps-0 pb-5 mb-3">
       {% block media-item %}
       {% endblock media-item %}
       {% include "eligibility/includes/media-item--contactless-card--start.html" %}

diff --git a/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html b/benefits/enrollment/templates/enrollment/includes/media-item--contactless-card--index.html
@@ -1,10 +1,6 @@
 {% extends "core/includes/media-item.html" %}
 {% load i18n %}
 
-{% block heading_wrapper %}
-    {% with heading_tag="h2" %}{{ block.super }}{% endwith %}
-{% endblock heading_wrapper %}
-
 {% block heading %}
     {% translate "The next step is to enroll the contactless card you will use to tap to ride for a reduced fare." %}
 {% endblock heading %}

diff --git a/benefits/enrollment/templates/enrollment/index.html b/benefits/enrollment/templates/enrollment/index.html
@@ -22,7 +22,7 @@ <h1 class="pb-lg-8 pb-4">
 {% block inner-content %}
   {% block media-items %}
     <div class="col-12 col-sm-12 col-lg-8">
-      <ul class="media-list mx-0 px-0 d-flex justify-content-center flex-column">
+      <ul class="d-flex list-unstyled ps-0 pb-5 mb-3">
         {% include "enrollment/includes/media-item--contactless-card--index.html" %}
       </ul>
     </div>

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -39,6 +39,10 @@ li {
   font-family: var(--bs-body-font-family);
 }
 
+ul li {
+  list-style-type: disc;
+}
+
 /* Paragraph: Body Text */
 /* Same sizes for all screen widths */
 p,
@@ -600,43 +604,22 @@ footer .footer-links li a.footer-link:visited {
 
 :root {
   --media-item-icon-size: calc(64rem / 16);
-  --media-item-gap: calc(24rem / 16);
   --media-item-icon-margin: calc(24rem / 16);
 }
 
 @media (min-width: 992px) {
   :root {
     --media-item-icon-size: calc(90rem / 16);
-    --media-item-gap: calc(24rem / 16);
     --media-item-icon-margin: calc(32rem / 16);
   }
 }
 
-.media-body--details p:not(:first-of-type) {
-  /* All the p within .media-body--details, except for the first p - Any media item with more than one p */
-  padding-top: calc(24rem / 16);
-}
-
-.media-list {
-  gap: var(--media-item-gap);
-  margin-bottom: calc(64rem / 16);
-}
-
 .media-list-icon-left-margin {
   margin-left: calc(
     var(--media-item-icon-size) + var(--media-item-icon-margin)
   );
 }
 
-.media-list .media .media-body--details,
-.media-list .media .media-body--items li:first-child {
-  padding-top: calc(5rem / 16);
-}
-
-.media-list .media .media-body--items li {
-  list-style-type: disc;
-}
-
 /* Cards */
 
 :root {