RochesterX/PasswordManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styleeees

Browse Source
This commit is contained in:
RochesterX
2025-11-29 19:02:01 -05:00
parent ab95ba82ac
commit 29508ae9f8
7 changed files with 204 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
public/assets/css/style.css
View File

@@ -152,16 +152,125 @@ body {
white-space: nowrap; white-space: nowrap;
} }
.box table thead td {
font-weight: bold;
}
.box table td:nth-child(2), .box table td:nth-child(2),
.box table th:nth-child(2) { .box table th:nth-child(2) {
width: 58px; width: 58px;
white-space: nowrap; 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 { .grid-container {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -197,7 +306,7 @@ body {
} }
hr { hr {
min-width: 125%; min-width: 110%;
margin: auto 0; margin: auto 0;
} }
@@ -261,8 +370,6 @@ a {
max-height: 20px; max-height: 20px;
border-radius: 5px; border-radius: 5px;
color: var(--royal-blue); color: var(--royal-blue);
padding-left: 5px;
padding-right: 5px;
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -473,9 +580,9 @@ p {
.mark { .mark {
width: 32px; width: 32px;
height: 24px; height: 24px;
border: 2px solid #606060; border: 2px solid #FFFFFF;
border-radius: 4px; border-radius: 4px;
color: #888888; color: #CCCCCC;
font: 16px tahoma, sans-serif; font: 16px tahoma, sans-serif;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@@ -490,8 +597,8 @@ p {
} }
.checkbox input:checked + .mark { .checkbox input:checked + .mark {
border: 2px solid #FFFFFF; border: 2px solid #606060;
color: #CCCCCC; color: #888888;
} }
.days { .days {

5
public/info.html
View File

@@ -6,8 +6,9 @@
</head> </head>
<body> <body>
<div class="center"> <div class="center">
<h2>Personal Information</h2>
<form id="infoForm"> <form id="infoForm">
<h2>Personal Information</h2>
<hr>
<div class="inputGroup"> <div class="inputGroup">
<p>Username:</p> <p>Username:</p>
<p id="usernameField">[username]</p> <p id="usernameField">[username]</p>
@@ -25,6 +26,7 @@
<input type="date" id="dobField" placeholder=""> <input type="date" id="dobField" placeholder="">
</div> </div>
<button type="submit">Update Information</button> <button type="submit">Update Information</button>
<a href="/home">Return Home</a>
</form> </form>
<div class="error"> <div class="error">
@@ -34,7 +36,6 @@
<p>Information updated successfully</p> <p>Information updated successfully</p>
</div> </div>
<a href="/home">Return Home</a>
</div> </div>
<script type="module" src="info.js"></script> <script type="module" src="info.js"></script>

15
public/player.html
View File

@@ -7,7 +7,9 @@
</head> </head>
<body> <body>
<div class="center"> <div class="center">
<form>
<h2 class="attribute-PlayerName">[Player Name]</h2> <h2 class="attribute-PlayerName">[Player Name]</h2>
<hr>
<div class="info-container"> <div class="info-container">
<div class="info"> <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> <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> <p id="nomatch" style="display: none;">No matches found.</p>
<br> <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> </div>
<script type="module" src="/player.js"></script> <script type="module" src="/player.js"></script>

4
public/player.js
View File

@@ -38,8 +38,8 @@ watchButton.onclick = async e => {
showStatsButton.onclick = async e => { showStatsButton.onclick = async e => {
e.preventDefault(); e.preventDefault();
statsTable.style.display = statsTable.style.display == "" ? "none" : ""; statsTable.closest("div").style.display = statsTable.closest("div").style.display == "" ? "none" : "";
showStatsButton.innerHTML = statsTable.style.display == "" ? "Hide Full Stats" : "Show Full Stats"; showStatsButton.innerHTML = statsTable.closest("div").style.display == "" ? "Hide Full Stats" : "Show Full Stats";
} }
async function updateIsWatched() { async function updateIsWatched() {

6
public/search.html
View File

@@ -7,8 +7,9 @@
</head> </head>
<body> <body>
<div class="center"> <div class="center">
<h2>Search Players</h2>
<form id="searchForm"> <form id="searchForm">
<h2>Search Players</h2>
<hr>
<select id="category" style="display: none;"> <select id="category" style="display: none;">
<option value="Id">ID</option> <option value="Id">ID</option>
<option value="Username">Username</option> <option value="Username">Username</option>
@@ -46,10 +47,13 @@
<button style="display: none;" type="submit">Search</button> <button style="display: none;" type="submit">Search</button>
</form> </form>
<div class="player-box">
<table id="table"> <table id="table">
<thead id="header"></thead> <thead id="header"></thead>
<tbody id="results"></tbody> <tbody id="results"></tbody>
</table> </table>
</div>
<p id="nomatch" style="display: none;">No matches found.</p> <p id="nomatch" style="display: none;">No matches found.</p>

33
public/search.js
View File

@@ -10,7 +10,7 @@ const tableBody = document.getElementById("results");
const table = document.getElementById("table"); const table = document.getElementById("table");
const nomatch = document.getElementById("nomatch"); const nomatch = document.getElementById("nomatch");
updateTableVisibility(); updateTableVisibility(0);
document.querySelectorAll("input[type='checkbox']").forEach(checkbox => { document.querySelectorAll("input[type='checkbox']").forEach(checkbox => {
checkbox.addEventListener("change", e => { checkbox.addEventListener("change", e => {
@@ -52,6 +52,7 @@ async function updateSearch () {
if (resultObject.matches.length === 0) { if (resultObject.matches.length === 0) {
nomatch.style.display = ""; nomatch.style.display = "";
table.style.display = "none"; table.style.display = "none";
updateTableVisibility(0);
return; return;
} }
nomatch.style.display = "none" nomatch.style.display = "none"
@@ -62,11 +63,10 @@ async function updateSearch () {
// headerRow.innerHTML += `<td>${attribute}</td>`; // headerRow.innerHTML += `<td>${attribute}</td>`;
//}); //});
headerRow.innerHTML += ` headerRow.innerHTML += `
<td>ID</td>
<td>Name</td>
<td>Contract</td>
<td>Team</td>
<td>Position</td> <td>Position</td>
<td>Name</td>
<td>Team</td>
<td>Contract</td>
`; `;
tableHeader.appendChild(headerRow); tableHeader.appendChild(headerRow);
@@ -78,25 +78,28 @@ async function updateSearch () {
// row.innerHTML += `<td>${player}</td>l`; // row.innerHTML += `<td>${player}</td>l`;
//} //}
row.innerHTML = ` 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>${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); tableBody.appendChild(row);
}); });
updateTableVisibility(); updateTableVisibility(resultObject.matches.length);
}; };
function updateTableVisibility() { function updateTableVisibility(length) {
if (!tableBody) return; if (!tableBody) return;
console.log(length);
const rows = tableBody.querySelectorAll("tr"); const rows = tableBody.querySelectorAll("tr");
if (rows == null) return; if (rows == null) {
if (rows.length != 0) { table.closest("div").style.display = "none";
table.style.display = ""; return;
}
if (length != 0) {
table.closest("div").style.display = "";
} else { } else {
table.style.display = "none"; table.closest("div").style.display = "none";
} }
} }

2
server.js
View File

@@ -169,7 +169,7 @@ app.post("/getPlayers", authenticate, async (req, res) => {
.input("two", sql.VarChar, positions[1]) .input("two", sql.VarChar, positions[1])
.input("three", sql.VarChar, positions[2]) .input("three", sql.VarChar, positions[2])
.input("four", sql.VarChar, positions[3]) .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 }); res.status(200).json({ query: player, matches: result.recordset });
}); });