feat(templates): Alerts tables are now responsive

freelawproject · Sep 17, 2024 · 065489c · 065489c
1 parent 497a962
commit 065489c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/cl/alerts/templates/includes/search_alerts/table_header.html b/cl/alerts/templates/includes/search_alerts/table_header.html
@@ -1,10 +1,10 @@
 <thead>
   <tr>
-    <th>Alert&nbsp;Type</th>
-    <th>Name and Query</th>
-    <th>Frequency</th>
+    <th data-label="Name and Query">Name and Query</th>
+    <th data-label="Alert&nbsp;Type">Alert&nbsp;Type</th>
+    <th data-label="Frequency">Frequency</th>
     {% if is_profile_dashboard %}
-    <th colspan="2">Last&nbsp;Hit</th>
+    <th data-label="Last&nbsp;Hit" colspan="2">Last&nbsp;Hit</th>
     {% endif %}
   </tr>
 </thead>
diff --git a/cl/alerts/templates/includes/search_alerts/table_row.html b/cl/alerts/templates/includes/search_alerts/table_row.html
@@ -1,4 +1,9 @@
 <tr id='alert-row-{{ alert.id }}' {% if hx_swap %} hx-swap-oob="true" {% endif %}>
+  <td>
+    <p class="bottom">
+      <a href="/?{{ alert.query }}" rel="nofollow">{{ alert.name }}</a>
+    </p>
+  </td>
   <td>
     <p class="bottom">
       {% if alert.alert_type == SEARCH_TYPES.OPINION %}
@@ -10,11 +15,6 @@
       {% endif %}
     </p>
   </td>
-  <td>
-    <p class="bottom">
-      <a href="/?{{ alert.query }}" rel="nofollow">{{ alert.name }}</a>
-    </p>
-  </td>
   {% if is_profile_dashboard %}
   <td>{{ alert.date_last_hit|date:"M j, Y"|default:"Never" }}</td>
   {% endif %}

diff --git a/cl/users/templates/profile/alerts.html b/cl/users/templates/profile/alerts.html
@@ -13,6 +13,8 @@
   {% endif %}
   <script defer type="text/javascript"
           src="{% static "js/toggle_settings.js" %}"></script>
+  <script defer type="text/javascript"
+          src="{% static "js/responsive-table.js" %}"></script>
 {% endblock %}
 
 
@@ -40,7 +42,7 @@ <h3 class="caps gray">You have not made any {% if page == "docket_alerts" %} REC
       <h2>Search Alerts for Case Law and Oral Arguments</h2>
     </div>
     <div class="col-xs-12">
-      <div class="table-responsive">
+      <div class="table-responsive responsive-table-wrapper">
         <table class="table settings-table">
           {% include "includes/search_alerts/table_header.html" with is_profile_dashboard=True%}
           <tbody>
@@ -64,15 +66,15 @@ <h3 class="gray caps">🎉 Your email address provides you unlimited docket aler
         <h3 class="gray caps">🎉 Being a member provides you unlimited docket alerts</h3>
       {% endif %}
 
-      <div class="table-responsive">
-        <table class="table settings-table">
+      <div class="table-responsive responsive-table-wrapper">
+        <table id="dockets-table" class="table settings-table">
           <thead>
           <tr>
-              <th><a class="no-underline black-link" href="?{% url_replace request 'name' %}">Case Name{% sort_caret request 'name' %}</a></th>
-              <th><a class="no-underline black-link" href="?{% url_replace request 'court' %}">Court{% sort_caret request 'court' %}</a></th>
-              <th><a class="no-underline black-link" href="?{% url_replace request 'docket_number' %}">Docket Number{% sort_caret request 'docket_number' %}</a></th>
-              <th><a class="no-underline black-link" href="?{% url_replace request 'date_filed' %}">Date Filed{% sort_caret request 'date_filed' %}</a></th>
-              <th colspan="2"><a class="no-underline black-link" href="?{% url_replace request 'hit' %}"> Last&nbsp;Hit{% sort_caret request 'hit' %}</a></th>
+              <th data-label="Case Name"><a class="no-underline black-link" href="?{% url_replace request 'name' %}">Case Name{% sort_caret request 'name' %}</a></th>
+              <th data-label="Court"><a class="no-underline black-link" href="?{% url_replace request 'court' %}">Court{% sort_caret request 'court' %}</a></th>
+              <th data-label="Docket Number"><a class="no-underline black-link" href="?{% url_replace request 'docket_number' %}">Docket Number{% sort_caret request 'docket_number' %}</a></th>
+              <th data-label="Date Filed"><a class="no-underline black-link" href="?{% url_replace request 'date_filed' %}">Date Filed{% sort_caret request 'date_filed' %}</a></th>
+              <th data-label="Last&nbsp;Hit" colspan="2"><a class="no-underline black-link" href="?{% url_replace request 'hit' %}"> Last&nbsp;Hit{% sort_caret request 'hit' %}</a></th>
           </tr>
           </thead>
           <tbody>