Merge conference sections into a single table so columns align

Replace three separate <table> elements with one shared table. The
conf_table macro becomes conf_rows which emits only <tr> elements;
Current/Future/Past section boundaries are dark header rows inside
the same <tbody>. With one colgroup the browser uses one shared
column-width calculation so all headings line up.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Edward Betts 2026-03-14 11:22:43 +00:00
parent e36a326739
commit 1dfef38128

View file

@ -68,6 +68,15 @@ tr.conf-hl > td {
} }
/* Conference table */ /* Conference table */
.conf-section-row td {
background: #343a40 !important;
color: #fff;
font-weight: 700;
font-size: 0.85em;
padding-top: 0.5rem;
padding-bottom: 0.4rem;
border-bottom: none;
}
.conf-month-row td { .conf-month-row td {
background: #e9ecef !important; background: #e9ecef !important;
font-weight: 600; font-weight: 600;
@ -121,32 +130,14 @@ tr.conf-hl > td {
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
{% macro conf_table(heading, item_list, badge) %} {% macro conf_rows(heading, item_list, badge) %}
{% if item_list %} {% if item_list %}
{% set count = item_list | length %} {% set count = item_list | length %}
<h2>{{ heading }} <small class="text-muted fs-6 fw-normal">{{ count }} conference{{ "" if count == 1 else "s" }}</small></h2> <tr class="conf-section-row">
<table class="table table-sm table-hover align-middle mb-4"> <td colspan="6">{{ heading }} <span class="fw-normal opacity-75">{{ count }} conference{{ "" if count == 1 else "s" }}</span></td>
<colgroup> </tr>
<col style="width: 9rem"> {% set ns = namespace(prev_month="") %}
<col> {% for item in item_list %}
<col style="width: 18rem">
<col style="width: 14rem">
<col style="width: 7rem">
<col style="width: 10rem">
</colgroup>
<thead class="table-light">
<tr>
<th>Dates</th>
<th>Conference</th>
<th>Topic</th>
<th>Location</th>
<th>CFP ends</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{% set ns = namespace(prev_month="") %}
{% for item in item_list %}
{% set month_label = item.start_date.strftime("%B %Y") %} {% set month_label = item.start_date.strftime("%B %Y") %}
{% if month_label != ns.prev_month %} {% if month_label != ns.prev_month %}
{% set ns.prev_month = month_label %} {% set ns.prev_month = month_label %}
@ -206,9 +197,7 @@ tr.conf-hl > td {
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody>
</table>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
@ -219,9 +208,31 @@ tr.conf-hl > td {
{{ render_timeline(timeline) }} {{ render_timeline(timeline) }}
{{ conf_table("Current", current, "attending") }} <table class="table table-sm table-hover align-middle">
{{ conf_table("Future", future, "going") }} <colgroup>
{{ conf_table("Past", past|reverse|list, "went") }} <col style="width: 9rem">
<col>
<col style="width: 18rem">
<col style="width: 14rem">
<col style="width: 7rem">
<col style="width: 10rem">
</colgroup>
<thead class="table-light">
<tr>
<th>Dates</th>
<th>Conference</th>
<th>Topic</th>
<th>Location</th>
<th>CFP ends</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{{ conf_rows("Current", current, "attending") }}
{{ conf_rows("Future", future, "going") }}
{{ conf_rows("Past", past|reverse|list, "went") }}
</tbody>
</table>
</div> </div>
<script> <script>