Improve conference list on mobile

templates/conference_list.html

@@ -91,6 +91,75 @@ tr.conf-hl > td {
 .conf-going {
   --bs-table-bg: rgba(25, 135, 84, 0.07);
 }
+
+@media (max-width: 767.98px) {
+  .conf-table,
+  .conf-table tbody {
+    display: block;
+  }
+  .conf-table colgroup,
+  .conf-table thead {
+    display: none;
+  }
+  .conf-table .conf-row {
+    display: flex;
+    flex-direction: column;
+    margin: 0.5rem 0 1rem;
+    padding: 0.35rem 0.75rem;
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    background: var(--bs-body-bg);
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  }
+  .conf-table .conf-row.conf-going {
+    border-left: 0.3rem solid #198754;
+    background: rgba(25, 135, 84, 0.07);
+  }
+  .conf-table .conf-row > td {
+    display: grid;
+    grid-template-columns: 5.25rem minmax(0, 1fr);
+    gap: 0.5rem;
+    padding: 0.35rem 0;
+    border: 0;
+    white-space: normal !important;
+    overflow-wrap: anywhere;
+  }
+  .conf-table .conf-row > td::before {
+    content: attr(data-label);
+    color: var(--bs-secondary-color);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+  .conf-table .conf-name {
+    order: -2;
+    display: block !important;
+    padding-bottom: 0.5rem !important;
+    font-size: 1.05rem;
+    font-weight: 600;
+    border-bottom: 1px solid #dee2e6 !important;
+  }
+  .conf-table .conf-name::before {
+    display: none;
+  }
+  .conf-table .conf-dates {
+    order: -1;
+  }
+  .conf-table .conf-section-row,
+  .conf-table .conf-month-row {
+    display: block;
+  }
+  .conf-table .conf-section-row td,
+  .conf-table .conf-month-row td {
+    display: block;
+    width: 100%;
+  }
+  .conf-table .conf-section-row td {
+    margin-top: 1.25rem;
+    border-radius: 0.25rem;
+  }
+}
 </style>
 {% endblock %}
 
@@ -145,8 +214,8 @@ tr.conf-hl > td {
       <td colspan="7">{{ month_label }}</td>
     </tr>
   {% endif %}
-  <tr{% if item.going %} class="conf-going"{% endif %} data-conf-key="{{ item.sort_date.isoformat() }}|{{ item.name }}">
+  <tr class="conf-row{% if item.going %} conf-going{% endif %}" data-conf-key="{{ item.sort_date.isoformat() }}|{{ item.name }}">
-    <td class="text-nowrap text-muted small">
+    <td class="conf-dates text-nowrap text-muted small" data-label="Dates">
       {{ item.display_date }}
       {% if item.date_status == "tentative" %}
         <span class="badge text-bg-warning ms-1">tentative</span>
@@ -154,7 +223,7 @@ tr.conf-hl > td {
         <span class="badge text-bg-secondary ms-1">approximate</span>
       {% endif %}
     </td>
-    <td>
+    <td class="conf-name" data-label="Conference">
       {% if item.url %}<a href="{{ item.url }}">{{ item.name }}</a>
       {% else %}{{ item.name }}{% endif %}
       {% if item.going and not (item.accommodation_booked or item.travel_booked) %}
@@ -175,24 +244,24 @@ tr.conf-hl > td {
         </a>
       {% endif %}
     </td>
-    <td class="text-muted small">{{ item.topic }}</td>
+    <td class="text-muted small" data-label="Topic">{{ item.topic }}</td>
-    <td class="text-nowrap text-muted small">
+    <td class="text-nowrap text-muted small" data-label="Series">
       {% if item.series and item.series_detail %}
         <a href="{{ url_for('conference_series_page', series_id=item.series) }}">{{ item.series_detail.name }}</a>
       {% elif item.series %}
         {{ item.series }}
       {% endif %}
     </td>
-    <td class="text-nowrap">
+    <td class="text-nowrap" data-label="Location">
       {% set country = get_country(item.country) if item.country else None %}
       {% if country %}{{ country.flag }} {{ item.location }}
       {% elif item.online %}💻 Online
       {% else %}{{ item.location }}{% endif %}
     </td>
-    <td class="text-nowrap text-muted small">
+    <td class="text-nowrap text-muted small" data-label="CFP ends">
       {% if item.cfp_end %}{{ item.cfp_end.strftime("%-d %b %Y") }}{% endif %}
     </td>
-    <td>
+    <td data-label="Price">
       {% if item.price and item.currency %}
         <span class="badge bg-info text-nowrap">{{ "{:,d}".format(item.price | int) }} {{ item.currency }}</span>
         {% if item.currency != "GBP" and item.currency in fx_rate %}
@@ -236,7 +305,8 @@ tr.conf-hl > td {
 
   {{ render_timeline(timeline) }}
 
-  <table class="table table-sm table-hover align-middle">
+  <table class="conf-table table table-sm table-hover align-middle">
+    <caption class="visually-hidden">Conferences grouped by attendance and month</caption>
     <colgroup>
       <col style="width: 9rem">
       <col>