made table responsive for tickers

zackrylangford · Jun 1, 2024 · 5d7112c · 5d7112c
1 parent 5a5725e
commit 5d7112c
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -28,7 +28,6 @@ header nav ul {
     display: flex;
 }
 
-
 header nav ul li a {
     color: #fff;
     text-decoration: none;
@@ -59,7 +58,6 @@ header .menu-toggle .bar {
     transition: 0.3s;
 }
 
-
 header .nav-list li a {
     color: #fff;
 }
@@ -179,6 +177,11 @@ footer {
     background-color: #f1f1f1;
 }
 
+.table-responsive {
+    width: 100%;
+    overflow-x: auto;
+}
+
 @media (max-width: 768px) {
     header nav {
         flex-direction: column;
@@ -240,6 +243,34 @@ footer {
     .cam-table {
         overflow-x: auto;
     }
+
+    .cam-table, .cam-table thead, .cam-table tbody, .cam-table th, .cam-table td, .cam-table tr {
+        display: block;
+    }
+
+    .cam-table tr {
+        margin-bottom: 15px;
+    }
+
+    .cam-table td {
+        text-align: right;
+        padding-left: 50%;
+        position: relative;
+    }
+
+    .cam-table td::before {
+        content: attr(data-label);
+        position: absolute;
+        left: 0;
+        width: 50%;
+        padding-left: 10px;
+        font-weight: bold;
+        text-align: left;
+    }
+
+    .cam-table th {
+        display: none;
+    }
 }
 
 .img-responsive {

diff --git a/assets/js/table.js b/assets/js/table.js
@@ -63,17 +63,17 @@ document.addEventListener("DOMContentLoaded", function() {
             if (item) {
                 const row = document.createElement("tr");
                 row.innerHTML = `
-                    <td>${ticker.symbol}</td>
-                    <td>${ticker.name}</td>
-                    <td>${item.resistance_4.toFixed(2)}</td>
-                    <td>${item.resistance_3.toFixed(2)}</td>
-                    <td>${item.resistance_2.toFixed(2)}</td>
-                    <td>${item.resistance_1.toFixed(2)}</td>
-                    <td>${item.pivot_point.toFixed(2)}</td>
-                    <td>${item.support_1.toFixed(2)}</td>
-                    <td>${item.support_2.toFixed(2)}</td>
-                    <td>${item.support_3.toFixed(2)}</td>
-                    <td>${item.support_4.toFixed(2)}</td>
+                    <td data-label="Ticker">${ticker.symbol}</td>
+                    <td data-label="Name">${ticker.name}</td>
+                    <td data-label="R4">${item.resistance_4.toFixed(2)}</td>
+                    <td data-label="R3">${item.resistance_3.toFixed(2)}</td>
+                    <td data-label="R2">${item.resistance_2.toFixed(2)}</td>
+                    <td data-label="R1">${item.resistance_1.toFixed(2)}</td>
+                    <td data-label="P">${item.pivot_point.toFixed(2)}</td>
+                    <td data-label="S1">${item.support_1.toFixed(2)}</td>
+                    <td data-label="S2">${item.support_2.toFixed(2)}</td>
+                    <td data-label="S3">${item.support_3.toFixed(2)}</td>
+                    <td data-label="S4">${item.support_4.toFixed(2)}</td>
                 `;
                 tableBody.appendChild(row);
             }