mirror of
https://github.com/Aider-AI/aider.git
synced 2025-06-02 10:45:00 +00:00
style: Implement responsive table design
This commit is contained in:
parent
9575f4e5ea
commit
da3e0f6ec8
1 changed files with 42 additions and 26 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue