From 7fcd85e7e96ffca8084341bda87d9b9909a9a309 Mon Sep 17 00:00:00 2001
From: jnywong <jnywong.pro@gmail.com>
Date: Tue, 26 Nov 2024 15:35:57 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Make=20tables=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frx_challenges/web/templates/results.html     | 54 +++++++++--------
 .../web/templates/submission/detail.html      | 50 ++++++++--------
 .../web/templates/submission/list.html        | 60 ++++++++++---------
 3 files changed, 85 insertions(+), 79 deletions(-)

diff --git a/frx_challenges/web/templates/results.html b/frx_challenges/web/templates/results.html
index ed43651..b419eb7 100644
--- a/frx_challenges/web/templates/results.html
+++ b/frx_challenges/web/templates/results.html
@@ -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>
diff --git a/frx_challenges/web/templates/submission/detail.html b/frx_challenges/web/templates/submission/detail.html
index 6d7a6d3..600210f 100644
--- a/frx_challenges/web/templates/submission/detail.html
+++ b/frx_challenges/web/templates/submission/detail.html
@@ -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 %}
diff --git a/frx_challenges/web/templates/submission/list.html b/frx_challenges/web/templates/submission/list.html
index e00f47c..0d69f3d 100644
--- a/frx_challenges/web/templates/submission/list.html
+++ b/frx_challenges/web/templates/submission/list.html
@@ -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>
@@ -76,7 +78,7 @@ <h1>My Submissions</h1>
                         return dayjs(data).fromNow();
                     }
                 }
-            ]
+            ],
         });
     }