modified table

apps/nightpass/static/styles.css

@@ -245,31 +245,39 @@ footer {
     width: 100%;
 }
 
-
-.student-table {
+.custom-table {
     width: 100%;
     border-collapse: collapse;
-    margin-top: 20px;
 }
 
-.student-table th, .student-table td {
+.custom-table th,
+.custom-table td {
     border: 1px solid #ddd;
     padding: 8px;
     text-align: left;
 }
 
-.student-table th {
-    background-color: #f2f2f2;
+.custom-table th {
+    background-color: #eb1b23;
+    color: #fff;
+    font-weight: bold;
 }
 
-.student-container {
-    max-width: 800px; /* Adjust the maximum width as needed */
-    margin: 10px auto; /* Center the container horizontally */
-    padding: 20px; /* Add some padding for spacing */
-    overflow-x: auto; /* Add horizontal scrolling for small screens */
-    background-color: #fff;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+.red {
+    background-color: #d92550;
+}
 
+.green {
+    background-color: #3ac47d;
+}
+
+.yellow {
+    background-color: #f7b924;
+}
+
+.badge {
+    color: white;
+    padding: 5px 10px;
 }
 
 @media (max-width: 768px) {
@@ -290,28 +298,4 @@ footer {
     .activity-table th, .activity-table td {
         padding: 5px;
     }
-
-    .student-table th, .student-table td {
-        display: block;
-        box-sizing: border-box;
-    }
-
-    .student-table th, .student-table td::before {
-        content: attr(data-label);
-        font-weight: bold;
-        float: left;
-        text-transform: uppercase;
-    }
-
-    .student-table th, .student-table td {
-        border: none;
-        border-bottom: 1px solid #ddd;
-    }
-    .student-container {
-        padding: 10px; /* Reduce padding for smaller screens */
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-    }
 }

apps/nightpass/templates/caretaker.html

@@ -1,30 +1,45 @@
 {% extends 'base.html' %}
 
 {% block content %}
-
-<div class="student-container">
-    <table class="student-table">
+<div class="table-responsive">
+    <table class="custom-table">
         <thead>
             <tr>
-                <th data-label="Roll Number" class="student-sno">S.No</th>
-                <th data-label="Name" class="student-name">Name</th>
-                <th data-label="Room Number" class="student-room">Room No</th>
-                <th data-label="Mobile No" class="student-mobile">Mobile No</th>
-                <th data-label="Status" class="student-status">Status</th>
+                <th>Roll Number</th>
+                <th>Name</th>
+                <th>Room Number</th>
+                <th>Mobile Number</th>
+                <th>Status</th>
+                <th>Action</th>
             </tr>
         </thead>
         <tbody>
             {% for pass in hostel_passes %}
             <tr>
-                <td data-label="Roll Number" class="student-sno">{{ pass.user.student.registration_number }}</td>
-                <td data-label="Name" class="student-name">{{ pass.user.student.name }}</td>
-                <td data-label="Room Number" class="student-room">{{ pass.user.student.room_number }}</td>
-                <td data-label="Mobile Number" class="student-mobile">{{ pass.user.student.contact_number }}</td>
-                <td data-label="Status" class="student-status">Active</td>
+                <td>{{ pass.user.student.registration_number }}</td>
+                <td>{{ pass.user.student.name }}</td>
+                <td>{{ pass.user.student.room_number }}</td>
+                <td>{{ pass.user.student.contact_number }}</td>
+
+                {% if pass.user.student.is_checked_in  %}
+                    <td><span class="badge green">Inside Hostel {{ pass.user.student.hostel }}</span></td>
+                {% else %}
+                    {% if pass %}
+                        {% if pass.check_in and not pass.check_out %}
+                            <td><span class="badge yellow">In {{ pass.campus_resource }}</span></td>
+                        {% else %}
+                            <td><span class="badge red">Outside Hostel</span></td>
+                        {% endif %}
+                    {% else %}
+                        <td><span class="badge red">Outside Hostel</span></td>
+                    {% endif %}
+                {% endif %}
+                <td><button>Details</button></td>
             </tr>
             {% endfor %}
         </tbody>
     </table>
+
 </div>
 
 {% endblock %}