From 46c08db591e908b2b59214754d134e9250c01ff5 Mon Sep 17 00:00:00 2001
From: Ethan Nguyen <etnguyen03@hotmail.com>
Date: Mon, 19 Apr 2021 23:24:10 -0400
Subject: [PATCH] feat: make college_list.html table horizontally scrollable

---
 .../templates/destinations/college_list.html  | 86 ++++++++++---------
 1 file changed, 44 insertions(+), 42 deletions(-)

diff --git a/tjdests/templates/destinations/college_list.html b/tjdests/templates/destinations/college_list.html
index b180164..fa50dd8 100644
--- a/tjdests/templates/destinations/college_list.html
+++ b/tjdests/templates/destinations/college_list.html
@@ -7,50 +7,52 @@
 
     <p><b>Note</b>: All data is self-reported. We do not make any claim as to the accuracy of this data.</p>
 
-    <table class="table">
-        <thead>
-            <tr>
-                <th scope="col">University Name</th>
-                <th scope="col">Total Applications</th>
-                <th scope="col">Admitted</th>
-                <th scope="col">Waitlisted</th>
-                <th scope="col">Waitlist-Admitted</th>
-                <th scope="col">Waitlist-Denied</th>
-                <th scope="col">Deferred</th>
-                <th scope="col">Deferred-Admitted</th>
-                <th scope="col">Deferred-Denied</th>
-                <th scope="col">Denied</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for college in object_list %}
+    <div class="table-responsive">
+        <table class="table">
+            <thead>
                 <tr>
-                    <th scope="row"><a href="{% url "destinations:students" %}?college={{ college.id }}">{{ college.name }}</a></th>
-                    <td>{{ college.count_decisions }}</td>
-                    <td>{{ college.count_admit }}</td>
-                    <td>{{ college.count_waitlist }}</td>
-                    <td>{{ college.count_waitlist_admit }}</td>
-                    <td>{{ college.count_waitlist_deny }}</td>
-                    <td>{{ college.count_defer }}</td>
-                    <td>{{ college.count_defer_admit }}</td>
-                    <td>{{ college.count_defer_deny }}</td>
-                    <td>{{ college.count_deny }}</td>
+                    <th scope="col">University Name</th>
+                    <th scope="col">Total Applications</th>
+                    <th scope="col">Admitted</th>
+                    <th scope="col">Waitlisted</th>
+                    <th scope="col">Waitlist-Admitted</th>
+                    <th scope="col">Waitlist-Denied</th>
+                    <th scope="col">Deferred</th>
+                    <th scope="col">Deferred-Admitted</th>
+                    <th scope="col">Deferred-Denied</th>
+                    <th scope="col">Denied</th>
                 </tr>
-            {% empty %}
-                <tr>
-                    <td>There is no data to display.</td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+            </thead>
+            <tbody>
+                {% for college in object_list %}
+                    <tr>
+                        <th scope="row"><a href="{% url "destinations:students" %}?college={{ college.id }}">{{ college.name }}</a></th>
+                        <td>{{ college.count_decisions }}</td>
+                        <td>{{ college.count_admit }}</td>
+                        <td>{{ college.count_waitlist }}</td>
+                        <td>{{ college.count_waitlist_admit }}</td>
+                        <td>{{ college.count_waitlist_deny }}</td>
+                        <td>{{ college.count_defer }}</td>
+                        <td>{{ college.count_defer_admit }}</td>
+                        <td>{{ college.count_defer_deny }}</td>
+                        <td>{{ college.count_deny }}</td>
+                    </tr>
+                {% empty %}
+                    <tr>
+                        <td>There is no data to display.</td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 
     <div class="row py-3">
         <div class="col justify-content-center">