Styleeees

2025-11-29 19:02:01 -05:00
parent ab95ba82ac
commit 29508ae9f8
7 changed files with 204 additions and 84 deletions
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -152,16 +152,125 @@ body {
    white-space: nowrap;
 }

-.box table thead td {
-    font-weight: bold;
-}
-
 .box table td:nth-child(2),
 .box table th:nth-child(2) {
    width: 58px;
    white-space: nowrap;
 }

+.box table thead td {
+    font-weight: bold;
+}
+
+#table tbody,
+#stats tbody,
+.box tbody {
+    scrollbar-gutter: stable overlay;
+}
+
+#table thead td {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+#table tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 500px;
+}
+
+#table thead,
+#table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+#table td:first-child,
+#table th:first-child {
+    width: 58px;
+    white-space: nowrap;
+}
+
+#table thead td {
+    font-weight: bold;
+}
+
+#table td:nth-child(5),
+#table th:nth-child(5) {
+    width: 30px;
+    white-space: nowrap;
+}
+
+#table {
+    width: 800px;
+}
+
+#stats thead td {
+    font-weight: bold;
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    text-orientation: mixed;
+    white-space: nowrap;
+}
+
+#stats tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 500px;
+}
+
+#stats thead,
+#stats tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+#stats td:first-child,
+#stats th:first-child {
+    width: 30px;
+    white-space: nowrap;
+}
+
+#stats thead td {
+    font-weight: bold;
+}
+
+#stats td:nth-child(2),
+#stats th:nth-child(2) {
+    width: 45px;
+    white-space: nowrap;
+}
+
+#stats td:nth-child(3),
+#stats th:nth-child(3) {
+    width: 20px;
+    white-space: nowrap;
+}
+
+#stats {
+    width: 800px;
+}
+
+.player-box {
+    border: 2px solid #AAAAAA;
+    background-color: white;
+    border-radius: 16px;
+    margin: 4px;
+    min-height: auto;
+    box-shadow: 5px 5px 5px #00000055;
+    display: block;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-justify: center;
+    text-align: left;
+    gap: 5px;
+    overflow: hidden;
+}
+
 .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
@@ -197,7 +306,7 @@ body {
 }

 hr {
-    min-width: 125%;
+    min-width: 110%;
    margin: auto 0;
 }

@@ -261,8 +370,6 @@ a {
    max-height: 20px;
    border-radius: 5px;
    color: var(--royal-blue);
-    padding-left: 5px;
-    padding-right: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
@@ -473,9 +580,9 @@ p {
 .mark {
    width: 32px;
    height: 24px;
-    border: 2px solid #606060;
+    border: 2px solid #FFFFFF;
    border-radius: 4px;
-    color: #888888;
+    color: #CCCCCC;
    font: 16px tahoma, sans-serif;
    font-weight: bold;
    text-align: center;
@@ -490,8 +597,8 @@ p {
 }

 .checkbox input:checked + .mark {
-    border: 2px solid #FFFFFF;
-    color: #CCCCCC;
+    border: 2px solid #606060;
+    color: #888888;
 }

 .days {
--- a/public/info.html
+++ b/public/info.html
@@ -6,8 +6,9 @@
 </head>
 <body>
    <div class="center">
-        <h2>Personal Information</h2>
        <form id="infoForm">
+            <h2>Personal Information</h2>
+            <hr>
            <div class="inputGroup">
                <p>Username:</p>
                <p id="usernameField">[username]</p>
@@ -25,6 +26,7 @@
                <input type="date" id="dobField" placeholder="">
            </div>
            <button type="submit">Update Information</button>
+            <a href="/home">Return Home</a>
        </form>

        <div class="error">
@@ -34,7 +36,6 @@
            <p>Information updated successfully</p>
        </div>

-        <a href="/home">Return Home</a>
    </div>

    <script type="module" src="info.js"></script>
--- a/public/player.html
+++ b/public/player.html
@@ -7,7 +7,9 @@
 </head>
 <body>
    <div class="center">
+        <form>
            <h2 class="attribute-PlayerName">[Player Name]</h2>
+            <hr>

            <div class="info-container">
                <div class="info">
@@ -52,17 +54,20 @@

            <a href="#" onclick="if (history.length > 1) history.back(); else if (document.referrer) window.location.href = document.referrer; else window.location.href = '#';">Back</a>

-        <button id="showStats">Show Full Stats</button>
-        <table id="stats" style="display: none;">
-            <thead></thead>
-            <tbody></tbody>
-        </table>

            <p id="nomatch" style="display: none;">No matches found.</p>


            <br>
+        </form>

+        <button id="showStats">Show Full Stats</button>
+        <div style="display: none;" class="player-box">
+            <table id="stats">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
+        </div>
    </div>

    <script type="module" src="/player.js"></script>
--- a/public/player.js
+++ b/public/player.js
@@ -38,8 +38,8 @@ watchButton.onclick = async e => {
 showStatsButton.onclick = async e => {
    e.preventDefault();

-    statsTable.style.display = statsTable.style.display == "" ? "none" : "";
-    showStatsButton.innerHTML = statsTable.style.display == "" ? "Hide Full Stats" : "Show Full Stats";
+    statsTable.closest("div").style.display = statsTable.closest("div").style.display == "" ? "none" : "";
+    showStatsButton.innerHTML = statsTable.closest("div").style.display == "" ? "Hide Full Stats" : "Show Full Stats";
 }

 async function updateIsWatched() {
--- a/public/search.html
+++ b/public/search.html
@@ -7,8 +7,9 @@
 </head>
 <body>
    <div class="center">
-        <h2>Search Players</h2>
        <form id="searchForm"> 
+            <h2>Search Players</h2>
+            <hr>
            <select id="category" style="display: none;">
                <option value="Id">ID</option>
                <option value="Username">Username</option>
@@ -46,10 +47,13 @@
            <button style="display: none;" type="submit">Search</button>
        </form>

+        <div class="player-box">
            <table id="table">
                <thead id="header"></thead>
                <tbody id="results"></tbody>
            </table>
+        </div>
+        

        <p id="nomatch" style="display: none;">No matches found.</p>

--- a/public/search.js
+++ b/public/search.js
@@ -10,7 +10,7 @@ const tableBody = document.getElementById("results");
 const table = document.getElementById("table");
 const nomatch = document.getElementById("nomatch");

-updateTableVisibility();
+updateTableVisibility(0);

 document.querySelectorAll("input[type='checkbox']").forEach(checkbox => {
    checkbox.addEventListener("change", e => {
@@ -52,6 +52,7 @@ async function updateSearch () {
    if (resultObject.matches.length === 0) {
       nomatch.style.display = "";
       table.style.display = "none";
+       updateTableVisibility(0);
       return;
    }
    nomatch.style.display = "none"
@@ -62,11 +63,10 @@ async function updateSearch () {
    //   headerRow.innerHTML += `<td>${attribute}</td>`; 
    //});
    headerRow.innerHTML += `
-            <td>ID</td>
-            <td>Name</td>
-            <td>Contract</td>
-            <td>Team</td>
            <td>Position</td>
+            <td>Name</td>
+            <td>Team</td>
+            <td>Contract</td>
            `;
    tableHeader.appendChild(headerRow);

@@ -78,25 +78,28 @@ async function updateSearch () {
        //    row.innerHTML += `<td>${player}</td>l`;
        //}
        row.innerHTML = `
-            <td>${player.PlayerID}</td>
-            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
-            <td>${formatSalary(player.TotalValue)}</td>
-            <td>${player.Team}</td>
            <td>${player.Position}</td>
+            <td><a href="/player/${player.PlayerID}">${player.PlayerName}</a></td>
+            <td>${player.Team}</td>
+            <td>${formatSalary(player.TotalValue)}</td>
        `;
        tableBody.appendChild(row);
    });
-    updateTableVisibility();
+    updateTableVisibility(resultObject.matches.length);
 };

-function updateTableVisibility() {
+function updateTableVisibility(length) {
    if (!tableBody) return;
+    console.log(length);

    const rows = tableBody.querySelectorAll("tr");
-    if (rows == null) return;
-    if (rows.length != 0) {
-        table.style.display = "";
+    if (rows == null) {
+        table.closest("div").style.display = "none";
+        return;
+    }
+    if (length != 0) {
+        table.closest("div").style.display = "";
    } else {
-        table.style.display = "none";
+        table.closest("div").style.display = "none";
    }
 }
--- a/server.js
+++ b/server.js
@@ -169,7 +169,7 @@ app.post("/getPlayers", authenticate, async (req, res) => {
        .input("two", sql.VarChar, positions[1])
        .input("three", sql.VarChar, positions[2])
        .input("four", sql.VarChar, positions[3])
-        .query(`SELECT p.PlayerID, p.PlayerName, c.TotalValue, p.Team, p.Position FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID WHERE p.PlayerName LIKE '%' + @query + '%' AND p.Position IN (@one, @two, @three, @four);`);
+        .query(`SELECT p.PlayerID, p.PlayerName, c.TotalValue, p.Team, p.Position FROM Player AS p JOIN Contract AS c ON p.PlayerID = c.PlayerID WHERE p.PlayerName LIKE '%' + @query + '%' AND p.Position IN (@one, @two, @three, @four) ORDER BY p.PlayerName;`);

    res.status(200).json({ query: player, matches: result.recordset });
 });