From cde856634e71430ecc4b058a2e544c06920e86c4 Mon Sep 17 00:00:00 2001
From: Karl Hudgell <karl.hudgell@bjss.com>
Date: Sat, 2 Nov 2024 20:15:23 +0000
Subject: [PATCH] responsive layout

---
 templates/user_accounts.html | 64 +++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 30 deletions(-)
diff --git a/templates/user_accounts.html b/templates/user_accounts.html
index 96ba313..e904e71 100644
--- a/templates/user_accounts.html
+++ b/templates/user_accounts.html
@@ -1,4 +1,3 @@
-<!-- templates/user_accounts.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -7,6 +6,8 @@
     <title>KTVManager</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
+    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
+    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
     <style>
         /* Blur effect for the password field */
         .password-blur {
@@ -17,7 +18,7 @@
 </head>
 <body>
 
-    <!-- Navbar (same as index.html) -->
+    <!-- Navbar -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <a class="navbar-brand" href="#">KTVManager</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -29,10 +30,10 @@
                     <a class="nav-link" href="/">Home</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="/accounts">Accounts</a> <!-- Link to the accounts page -->
+                    <a class="nav-link" href="/accounts">Accounts</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="/urls">URLs</a> <!-- Link to the URLs page -->
+                    <a class="nav-link" href="/urls">URLs</a>
                 </li>
             </ul>
         </div>
@@ -41,32 +42,34 @@
     <!-- Main Content -->
     <div class="container mt-5">
         <h2>{{ username }}'s Accounts</h2>
-        <table class="table table-striped" id="accountsTable">
-            <thead>
-                <tr>
-                    <th>#</th>
-                    <th>Username</th>
-                    <th>Stream</th>
-                    <th>Stream URL</th>
-                    <th>Expiry Date</th>
-                    <th>Password</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for account in user_accounts %}
-                <tr>
-                    <td>{{ loop.index }}</td>
-                    <td>{{ account.username }}</td>
-                    <td>{{ account.stream }}</td>
-                    <td><a href="{{ account.streamURL }}" target="_blank">{{ account.streamURL }}</a></td>
-                    <td>{{ account.expiaryDate_rendered }}</td>
-                    <td class="password-cell" data-password="{{ account.password }}">
-                        <span class="password-blur">********</span>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+        <div class="table-responsive">
+            <table class="table table-striped" id="accountsTable">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th>Username</th>
+                        <th>Stream</th>
+                        <th>Stream URL</th>
+                        <th>Expiry Date</th>
+                        <th>Password</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for account in user_accounts %}
+                    <tr>
+                        <td>{{ loop.index }}</td>
+                        <td>{{ account.username }}</td>
+                        <td>{{ account.stream }}</td>
+                        <td><a href="{{ account.streamURL }}" target="_blank">{{ account.streamURL }}</a></td>
+                        <td>{{ account.expiaryDate_rendered }}</td>
+                        <td class="password-cell" data-password="{{ account.password }}">
+                            <span class="password-blur">********</span>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
 
     <footer class="bg-dark text-white text-center py-3 mt-5">
@@ -88,6 +91,7 @@
             const table = $('#accountsTable').DataTable({
                 "searching": true,
                 "ordering": true,
+                "responsive": true, // Enable responsive layout
                 "columnDefs": [
                     { "type": "date-eu", "targets": 4 } // Column index for Expiry Date
                 ]
