From ff1e2c97b41d10adb0939a9ce9523245687dd23c Mon Sep 17 00:00:00 2001
From: Sam Ottenhoff <ottenhoff@longsight.com>
Date: Fri, 3 Jan 2025 13:08:40 -0500
Subject: [PATCH] Fix #9 improve responsiveness on small devices

---
 .../attendance/tool/pages/EventView.html             | 12 ++++++------
 tool/src/webapp/css/attendance.css                   |  7 +++++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/tool/src/java/org/sakaiproject/attendance/tool/pages/EventView.html b/tool/src/java/org/sakaiproject/attendance/tool/pages/EventView.html
index 788e0ed..8a7feeb 100644
--- a/tool/src/java/org/sakaiproject/attendance/tool/pages/EventView.html
+++ b/tool/src/java/org/sakaiproject/attendance/tool/pages/EventView.html
@@ -45,13 +45,13 @@ <h3 class="takeAttendanceHeader">
         <table id="takeAttendanceTable" class="table table-striped table-bordered">
             <thead>
             <tr class="div-table-row">
-                <th>
+                <th class="d-none d-sm-table-cell">
                     <span wicket:id="student-photo" />
                 </th>
-                <th class="col-sm-5">
+                <th class="col-sm-4">
                     <span wicket:id="student-name" />
                 </th>
-                <th class="row">
+                <th class="col-sm-8">
                     <div class="justify-flex-div" id="justify-flex-div" >
                         <span wicket:id="status-names">
                             <label class="status-label-centered" wicket:id="header-status-name" />
@@ -63,13 +63,13 @@ <h3 class="takeAttendanceHeader">
             </thead>
             <tbody>
             <tr wicket:id="records" class="div-table-row">
-                <td class="studentPhotoCol">
+                <td class="studentPhotoCol d-none d-sm-table-cell">
                     <img wicket:id="stu-photo"/>
                 </td>
-                <td>
+                <td class="col-sm-4">
                     <a wicket:id="stu-link"><span wicket:id="stu-name"></span></a>
                 </td>
-                <td id="attendanceStatusTd" class="attendanceStatusTd">
+                <td id="attendanceStatusTd" class="attendanceStatusTd col-sm-8">
                     <span wicket:id="dataPanelSlow"></span>
                 </td>
             </tr>
diff --git a/tool/src/webapp/css/attendance.css b/tool/src/webapp/css/attendance.css
index 838274c..e966a4b 100644
--- a/tool/src/webapp/css/attendance.css
+++ b/tool/src/webapp/css/attendance.css
@@ -342,6 +342,13 @@ div.takeAttendanceContainer, div.itemInfoContainer, div.gradeContainer {
     margin: 2em;
 }
 
+@media (max-width: 576px) {
+    div.takeAttendanceContainer, div.itemInfoContainer, div.gradeContainer, div.gradingContainer {
+        margin: 2em 0;
+        padding: 2em 0.25em;
+    }
+}
+
 div.itemInfoContainer {
     display: flex;
 }