Skip to content

Commit

Permalink
📱 Make tables responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnywong
jnywong committed Nov 26, 2024
1 parent fadb8d7 commit 7fcd85e
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 79 deletions.
54 changes: 28 additions & 26 deletions frx_challenges/web/templates/results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,34 +25,36 @@ <h1>Leaderboard</h1>
<div class="container py-2">
<div class="row py-2">
<div class="col py-2">
<table id="results" class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Date created</th>
<th scope="col">Submission Name</th>
{% for md in metadata_display %}<th scope="col">{{ md }}</th>{% endfor %}
{% for dc in evaluation_display_config %}<th scope="col">{{ dc.display_name }}</th>{% endfor %}
</tr>
</thead>
<tbody>
{% for result in results %}
<div class="table-responsive">
<table id="results" class="table table-striped">
<thead>
<tr>
<td>{{ result.submission.id }}</td>
<td>{{ result.submission.created_at|date:"c" }}</td>
<td>
<a href='{% url "submissions-detail" result.submission.id %}'>{{ result.submission.name }}</a>
</td>
{% for m in result.metadata %}<td>{{ m }}</td>{% endfor %}
{% for r in result.best_version.latest_evaluation.ordered_results %}
<td scope="col">
{% if r %}{{ r }}{% endif %}
</td>
{% endfor %}
<th scope="col">ID</th>
<th scope="col">Date created</th>
<th scope="col">Submission Name</th>
{% for md in metadata_display %}<th scope="col">{{ md }}</th>{% endfor %}
{% for dc in evaluation_display_config %}<th scope="col">{{ dc.display_name }}</th>{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for result in results %}
<tr>
<td>{{ result.submission.id }}</td>
<td>{{ result.submission.created_at|date:"c" }}</td>
<td>
<a href='{% url "submissions-detail" result.submission.id %}'>{{ result.submission.name }}</a>
</td>
{% for m in result.metadata %}<td>{{ m }}</td>{% endfor %}
{% for r in result.best_version.latest_evaluation.ordered_results %}
<td scope="col">
{% if r %}{{ r }}{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
Expand Down
50 changes: 26 additions & 24 deletions frx_challenges/web/templates/submission/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,32 +59,34 @@ <h1>{{ submission.name }}</h1>
</div>
<div class="row py-2">
{% if versions %}
<table id="versions" class="table table-sm hover">
<thead>
<tr>
<th scope="col">Filename</th>
<th scope="col">Date uploaded</th>
<th scope="col">Evaluation Status</th>
{% for dc in evaluation_display_config %}<th scope="col">{{ dc.display_name }}</th>{% endfor %}
</tr>
</thead>
<tbody>
{% for v in versions %}
<div class="table-responsive">
<table id="versions" class="table table-sm hover">
<thead>
<tr>
<td>
<a href={% url 'versions-view' v.id %}>{{ v.filename }}</a>
</td>
<td>{{ v.created_at|date:"c" }}</td>
<td>{{ v.latest_evaluation.status }}</td>
{% for r in v.latest_evaluation.ordered_results %}
<td scope="col">
{% if r %}{{ r }}{% endif %}
</td>
{% endfor %}
<th scope="col">Filename</th>
<th scope="col">Date uploaded</th>
<th scope="col">Evaluation Status</th>
{% for dc in evaluation_display_config %}<th scope="col">{{ dc.display_name }}</th>{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for v in versions %}
<tr>
<td>
<a href={% url 'versions-view' v.id %}>{{ v.filename }}</a>
</td>
<td>{{ v.created_at|date:"c" }}</td>
<td>{{ v.latest_evaluation.status }}</td>
{% for r in v.latest_evaluation.ordered_results %}
<td scope="col">
{% if r %}{{ r }}{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="text-center">See your results here after you make an upload!</p>
{% endif %}
Expand Down
60 changes: 31 additions & 29 deletions frx_challenges/web/templates/submission/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,36 +29,38 @@ <h1>My Submissions</h1>
</div>
<div class="container py-2">
<div class="row py-2">
<table id="results" class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Date created</th>
{% for dc in evaluation_display_config %}<th scope="col">{{ dc.display_name }}</th>{% endfor %}
</tr>
</thead>
<tbody>
{% for sub in submissions %}
<div class="table-responsive">
<table id="results" class="table table-striped responsive">
<thead>
<tr>
<td>
<a href={{ sub.id }}>{{ sub.name }}</a>
</td>
<td>{{ sub.description }}</td>
<td>{{ sub.created_at|date:"c" }}</td>
{% if sub.best_version.latest_evaluation.ordered_results %}
{% for r in sub.best_version.latest_evaluation.ordered_results %}
<td scope="col">
{% if r %}{{ r }}{% endif %}
</td>
{% endfor %}
{% else %}
{% for dc in evaluation_display_config %}<td scope="col">n/a</td>{% endfor %}
{% endif %}
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Date created</th>
{% for dc in evaluation_display_config %}<th scope="col">{{ dc.display_name }}</th>{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for sub in submissions %}
<tr>
<td>
<a href={{ sub.id }}>{{ sub.name }}</a>
</td>
<td>{{ sub.description }}</td>
<td>{{ sub.created_at|date:"c" }}</td>
{% if sub.best_version.latest_evaluation.ordered_results %}
{% for r in sub.best_version.latest_evaluation.ordered_results %}
<td scope="col">
{% if r %}{{ r }}{% endif %}
</td>
{% endfor %}
{% else %}
{% for dc in evaluation_display_config %}<td scope="col">n/a</td>{% endfor %}
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
Expand All @@ -76,7 +78,7 @@ <h1>My Submissions</h1>
return dayjs(data).fromNow();
}
}
]
],
});
}

Expand Down

0 comments on commit 7fcd85e

Please sign in to comment.