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:
parent
e36a326739
commit
1dfef38128
1 changed files with 98 additions and 87 deletions
|
|
@ -68,6 +68,15 @@ tr.conf-hl > td {
|
|||
}
|
||||
|
||||
/* 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 {
|
||||
background: #e9ecef !important;
|
||||
font-weight: 600;
|
||||
|
|
@ -121,94 +130,74 @@ tr.conf-hl > td {
|
|||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro conf_table(heading, item_list, badge) %}
|
||||
{% macro conf_rows(heading, item_list, badge) %}
|
||||
{% if item_list %}
|
||||
{% set count = item_list | length %}
|
||||
<h2>{{ heading }} <small class="text-muted fs-6 fw-normal">{{ count }} conference{{ "" if count == 1 else "s" }}</small></h2>
|
||||
<table class="table table-sm table-hover align-middle mb-4">
|
||||
<colgroup>
|
||||
<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 class="conf-section-row">
|
||||
<td colspan="6">{{ heading }} <span class="fw-normal opacity-75">{{ count }} conference{{ "" if count == 1 else "s" }}</span></td>
|
||||
</tr>
|
||||
{% set ns = namespace(prev_month="") %}
|
||||
{% for item in item_list %}
|
||||
{% set month_label = item.start_date.strftime("%B %Y") %}
|
||||
{% if month_label != ns.prev_month %}
|
||||
{% set ns.prev_month = month_label %}
|
||||
<tr class="conf-month-row">
|
||||
<td colspan="6">{{ month_label }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% set ns = namespace(prev_month="") %}
|
||||
{% for item in item_list %}
|
||||
{% set month_label = item.start_date.strftime("%B %Y") %}
|
||||
{% if month_label != ns.prev_month %}
|
||||
{% set ns.prev_month = month_label %}
|
||||
<tr class="conf-month-row">
|
||||
<td colspan="6">{{ month_label }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr{% if item.going %} class="conf-going"{% endif %} data-conf-key="{{ item.start_date.isoformat() }}|{{ item.name }}">
|
||||
<td class="text-nowrap text-muted small">
|
||||
{%- if item.start_date == item.end_date -%}
|
||||
{{ item.start_date.strftime("%-d %b %Y") }}
|
||||
{%- elif item.start_date.year == item.end_date.year and item.start_date.month == item.end_date.month -%}
|
||||
{{ item.start_date.strftime("%-d") }}–{{ item.end_date.strftime("%-d %b %Y") }}
|
||||
{%- else -%}
|
||||
{{ item.start_date.strftime("%-d %b") }}–{{ item.end_date.strftime("%-d %b %Y") }}
|
||||
{%- endif -%}
|
||||
</td>
|
||||
<td>
|
||||
{% 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) %}
|
||||
<span class="badge text-bg-primary ms-1">{{ badge }}</span>
|
||||
{% endif %}
|
||||
<tr{% if item.going %} class="conf-going"{% endif %} data-conf-key="{{ item.start_date.isoformat() }}|{{ item.name }}">
|
||||
<td class="text-nowrap text-muted small">
|
||||
{%- if item.start_date == item.end_date -%}
|
||||
{{ item.start_date.strftime("%-d %b %Y") }}
|
||||
{%- elif item.start_date.year == item.end_date.year and item.start_date.month == item.end_date.month -%}
|
||||
{{ item.start_date.strftime("%-d") }}–{{ item.end_date.strftime("%-d %b %Y") }}
|
||||
{%- else -%}
|
||||
{{ item.start_date.strftime("%-d %b") }}–{{ item.end_date.strftime("%-d %b %Y") }}
|
||||
{%- endif -%}
|
||||
</td>
|
||||
<td>
|
||||
{% 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) %}
|
||||
<span class="badge text-bg-primary ms-1">{{ badge }}</span>
|
||||
{% endif %}
|
||||
{% if item.accommodation_booked %}
|
||||
<span class="badge text-bg-success ms-1">accommodation</span>
|
||||
{% endif %}
|
||||
{% if item.transport_booked %}
|
||||
<span class="badge text-bg-success ms-1">transport</span>
|
||||
{% endif %}
|
||||
{% if item.linked_trip %}
|
||||
{% set trip = item.linked_trip %}
|
||||
<a href="{{ url_for('trip_page', start=trip.start.isoformat()) }}"
|
||||
class="text-muted ms-1 text-decoration-none"
|
||||
title="Trip: {{ trip.title }}">
|
||||
🧳{% if trip.title != item.name %} {{ trip.title }}{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-muted small">{{ item.topic }}</td>
|
||||
<td class="text-nowrap">
|
||||
{% 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">
|
||||
{% if item.cfp_end %}{{ item.cfp_end.strftime("%-d %b %Y") }}{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% 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 %}
|
||||
<span class="badge bg-info text-nowrap">{{ "{:,.0f}".format(item.price / fx_rate[item.currency]) }} GBP</span>
|
||||
{% endif %}
|
||||
{% elif item.free %}
|
||||
<span class="badge bg-success text-nowrap">free</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if item.accommodation_booked %}
|
||||
<span class="badge text-bg-success ms-1">accommodation</span>
|
||||
{% endif %}
|
||||
{% if item.transport_booked %}
|
||||
<span class="badge text-bg-success ms-1">transport</span>
|
||||
{% endif %}
|
||||
{% if item.linked_trip %}
|
||||
{% set trip = item.linked_trip %}
|
||||
<a href="{{ url_for('trip_page', start=trip.start.isoformat()) }}"
|
||||
class="text-muted ms-1 text-decoration-none"
|
||||
title="Trip: {{ trip.title }}">
|
||||
🧳{% if trip.title != item.name %} {{ trip.title }}{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-muted small">{{ item.topic }}</td>
|
||||
<td class="text-nowrap">
|
||||
{% 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">
|
||||
{% if item.cfp_end %}{{ item.cfp_end.strftime("%-d %b %Y") }}{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% 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 %}
|
||||
<span class="badge bg-info text-nowrap">{{ "{:,.0f}".format(item.price / fx_rate[item.currency]) }} GBP</span>
|
||||
{% endif %}
|
||||
{% elif item.free %}
|
||||
<span class="badge bg-success text-nowrap">free</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
|
@ -219,9 +208,31 @@ tr.conf-hl > td {
|
|||
|
||||
{{ render_timeline(timeline) }}
|
||||
|
||||
{{ conf_table("Current", current, "attending") }}
|
||||
{{ conf_table("Future", future, "going") }}
|
||||
{{ conf_table("Past", past|reverse|list, "went") }}
|
||||
<table class="table table-sm table-hover align-middle">
|
||||
<colgroup>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue