style: Implement responsive table design

This commit is contained in:
Paul Gauthier (aider) 2024-09-27 11:28:52 -07:00
parent 9575f4e5ea
commit da3e0f6ec8

View file

@ -26,18 +26,33 @@ top coding models, as compared to their previous "solo" scores (striped bars).
background-color: #f2f2f2; background-color: #f2f2f2;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
table { .table-container {
max-width: 100%;
overflow-x: auto;
}
.responsive-table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
font-size: 16px;
} }
th { .responsive-table th, .responsive-table td {
padding: 8px; padding: 8px;
text-align: left; text-align: left;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
word-break: break-word;
} }
th { .responsive-table th {
background-color: #e2e2e2; background-color: #e2e2e2;
} }
@media screen and (max-width: 600px) {
.responsive-table {
font-size: 12px;
}
.responsive-table th, .responsive-table td {
padding: 4px;
}
}
</style> </style>
<style> <style>
@ -355,29 +370,30 @@ For more details, see documentation on
## Full results ## Full results
<table> <div class="table-container">
<thead> <table class="responsive-table">
<tr> <thead>
<th>Architect</th> <tr>
<th>Editor</th> <th>Architect</th>
<th>Edit Format</th> <th>Editor</th>
<th>Pass Rate</th> <th>Edit Format</th>
</tr> <th>Pass Rate</th>
</thead> </tr>
<tbody> </thead>
{% for group in grouped_data %} <tbody>
{% assign group_class = forloop.index | modulo: 2 | plus: 1 %} {% for group in grouped_data %}
{% for item in group.items %} {% assign group_class = forloop.index | modulo: 2 | plus: 1 %}
<tr class="{% if group_class == 1 %}shaded{% endif %}"> {% for item in group.items %}
<td>{{ item.model }}</td> <tr class="{% if group_class == 1 %}shaded{% endif %}">
<td>{{ item.editor_model }}</td> <td>{{ item.model }}</td>
<td style="text-align: center;">{{ item.editor_edit_format | default: item.edit_format }}</td> <td>{{ item.editor_model }}</td>
<td style="text-align: right;">{{ item.pass_rate_2 }}%</td> <td style="text-align: center;">{{ item.editor_edit_format | default: item.edit_format }}</td>
<!-- <td style="text-align: right;">${{ item.total_cost | round: 2 }}</td> --> <td style="text-align: right;">{{ item.pass_rate_2 }}%</td>
</tr> </tr>
{% endfor %}
{% endfor %} {% endfor %}
{% endfor %} </tbody>
</tbody> </table>
</table> </div>