lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

File structure updates

Browse Source
This commit is contained in:
Lucas Patenaude
2024-05-03 00:41:58 -06:00
parent 28489e8db7 717b41bec0
commit 631f82672f
16 changed files with 436 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
public/assets/css/generated-pages/club-pages/club-page-layouts.css
View File

@@ -1,35 +1,20 @@
/* Main Contents Container (Below Header) */
#club-page-contents-container
{
display: flex;
flex-direction: row;
#club-page-contents-container {
display: flex;
flex-direction: row;
}
/* Child Containers */
/* Left 20% of #club-page-contents-container */
#club-information-container
{
width: 20%;
display: flex;
flex-direction: column;
}
/* Right 80% of #club-page-contents-container */
#club-stats-and-players-container
{
width: 80%;
}
/* Child Containers */
/* Left 20% of #club-page-contents-container */
#club-information-container {
width: 20%;
display: flex;
flex-direction: column;
}
/* Right 80% of #club-page-contents-container */
#club-stats-and-players-container {
width: 80%;
}

29
public/assets/css/generated-pages/club-pages/club-page-styling.css
View File

@@ -1,23 +1,20 @@
#club-information-container
{
margin-right: 20px;
#club-information-container {
margin-right: 20px;
}
#club-favorite-button
{
width: 35px;
transform: skewX(20deg);
margin-right: 25px;
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3));
filter: outline(2px solid red);
#club-favorite-button {
width: 35px;
transform: skewX(20deg);
margin-right: 25px;
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3));
filter: outline(2px solid red);
}
#club-favorite-button:hover
{
cursor: pointer;
#club-favorite-button:hover {
cursor: pointer;
}
#competition-logo {
width: 60px;
margin-right: 10px;
}
width: 60px;
margin-right: 10px;
}

206
public/assets/css/generated-pages/generated-pages-styling.css
View File

@@ -5,18 +5,18 @@
*/
.page-container {
/* --- SIZE CONTAINER --- */
width: 100%; /* Set the width to the full width of screen */
padding: 10px 100px; /* Create some distance between page boundries and elements */
/* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */
display: flex; /* Enable flexbox layout */
flex-direction: column; /* Arrange child elements vertically */
/* --- SIZE CONTAINER --- */
width: 100%; /* Set the width to the full width of screen */
padding: 10px 100px; /* Create some distance between page boundries and elements */
/* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */
display: flex; /* Enable flexbox layout */
flex-direction: column; /* Arrange child elements vertically */
}
.page-content-container {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
}
/*
@@ -26,114 +26,114 @@
*/
/* Stylization for League Information Header Card */
.information-container
{
/* --- POSITION CONTAINER --- */
align-items: center; /* Center content vertically */
margin: 20px;
.information-container {
/* --- POSITION CONTAINER --- */
align-items: center; /* Center content vertically */
margin: 20px;
/* --- SIZE CONTAINER --- */
height: 100px;
width: fit-content;
padding: 10px 20px; /* Adjust padding as needed */
/* --- SIZE CONTAINER --- */
height: 100px;
width: fit-content;
padding: 10px 20px; /* Adjust padding as needed */
/* --- STYLE CONTAINER --- */
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
/* --- STYLE CONTAINER --- */
background: linear-gradient(
to right,
white,
rgb(245, 245, 245),
rgb(227, 227, 227)
); /* Gradient from white to gray */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
/* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */
display: flex; /* Enable flexbox layout */
flex-direction: row; /* Arrange child elements horizontally */
/* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */
display: flex; /* Enable flexbox layout */
flex-direction: row; /* Arrange child elements horizontally */
}
/* Adds Red Diagonal Strip at the end of the #league-information-container */
.information-container::after
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
background-color: red; /* Red color */
.information-container::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
background-color: red; /* Red color */
}
/*
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Styling for League Logo in League Information Header */
#generated-page-header-logo
{
margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%;
}
/* Styling for League Logo in League Information Header */
#generated-page-header-logo {
margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%;
}
/* Styling for League Title in League Information Header */
#generated-page-header-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* Styling for League Title in League Information Header */
#generated-page-header-title {
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* Styling for Flag in League Information Header */
#generated-page-header-flag
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 20px;
margin-right: 130px;
}
/* Styling for Flag in League Information Header */
#generated-page-header-flag {
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 20px;
margin-right: 130px;
}
/*
=============================================
CARDS IN PAGE BODY
=============================================
*/
/* Styling for All Card Containers on Generated Pages */
.card-container
{
/* --- POSITION CONTAINER --- */
margin: 0 10px;
margin-bottom: 20px;
.card-container {
/* --- POSITION CONTAINER --- */
margin: 0 10px;
margin-bottom: 20px;
/* --- SIZE CONTAINER --- */
padding: 15px;
/* --- SIZE CONTAINER --- */
padding: 15px;
/* --- STYLE CONTAINER --- */
background: linear-gradient(to top, rgb(216, 216, 216), rgb(236, 236, 236), rgb(241, 240, 240));
border: 1px solid gray;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
/* --- STYLE CONTAINER --- */
background: linear-gradient(
to top,
rgb(216, 216, 216),
rgb(236, 236, 236),
rgb(241, 240, 240)
);
border: 1px solid gray;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}
/* Styling for All Tables on Generated Pages */
table
{
width: 100%;
padding: 15px;
table {
width: 100%;
padding: 15px;
/* Table Header Styling */
th
{
border-bottom: 3px solid red; /* Add red bottom border */
}
/* Table Header Styling */
th {
border-bottom: 3px solid red; /* Add red bottom border */
}
/* Data in Row Style */
td
{
padding: 5px;
}
/* Data in Row Style */
td {
padding: 5px;
}
}
/* Styling for All Tables Designated to Alternate on Generated Pages */
.alternating-table tbody tr:nth-child(odd)
{
/* Every Odd Row in Table Style */
background-color: #d2d2d2; /* Light gray for odd rows */
.alternating-table tbody tr:nth-child(odd) {
/* Every Odd Row in Table Style */
background-color: #d2d2d2; /* Light gray for odd rows */
}
/*
@@ -143,28 +143,24 @@ table
*/
/* Hover Styling for All Card Containers on Generated Pages */
.card-container:hover
{
transform: scale(1.01); /* Scale the row by 1.1 on hover */
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
.card-container:hover {
transform: scale(1.01); /* Scale the row by 1.1 on hover */
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
}
/* Hover Styling for All Tables Designated to Alternate on Generated Pages */
.alternating-table tbody tr:hover
{
/* Create border around row on hover */
border: 1px solid lightgray;
border-radius: 10px;
.alternating-table tbody tr:hover {
/* Create border around row on hover */
border: 1px solid lightgray;
border-radius: 10px;
/* Make club logo larger on hover */
#league-table-club-logo
{
width: 32px;
}
/* Make club logo larger on hover */
#league-table-club-logo {
width: 32px;
}
/* Undeline club name on hover */
#league-table-club-name-column
{
text-decoration: underline; /* Add underline effect */
}
}
/* Undeline club name on hover */
#league-table-club-name-column {
text-decoration: underline; /* Add underline effect */
}
}

15
public/assets/css/homepage/homepage.css
View File

@@ -6,7 +6,7 @@
/* Styling for text at top of the page */
#leagues-header {
font-family: 'Scottsdale-Italic';
font-family: "Scottsdale-Italic";
display: inline-block; /* Ensure the width is based on content */
border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
}
@@ -24,7 +24,12 @@
height: 150px;
margin: 20px;
text-align: center; /* Center the content horizontally */
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
background: linear-gradient(
to right,
white,
rgb(245, 245, 245),
rgb(227, 227, 227)
); /* Gradient from white to gray */
padding: 10px; /* Adjust padding as needed */
position: relative; /* Needed for absolute positioning */
overflow: hidden; /* Hide the overflowing skewed content */
@@ -45,14 +50,13 @@
transform: skewX(20deg); /* Skew the banner to create a triangular side */
}
#league-card:hover {
transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */
}
#league-card::after {
content: '';
content: "";
position: absolute;
top: 0;
right: 0;
@@ -61,7 +65,6 @@
background-color: red; /* Red color */
}
#logo {
width: 30%; /* Set width for logo */
max-height: 100px;
@@ -77,5 +80,3 @@
max-height: 80px;
max-width: 250px;
}

126
public/assets/js/club-page/favorite-button.js
View File

@@ -1,73 +1,71 @@
document.addEventListener("DOMContentLoaded", function() {
var favoriteButton = document.getElementById("club-favorite-button");
if (favoriteButton) {
favoriteButton.addEventListener("click", function() {
var userID = document.getElementById("userID").value;
var teamID = document.getElementById("teamID").value;
var teamName = document.getElementById("teamName").value;
var teamLogo = document.getElementById("teamLogo").value;
if (favoriteButton.src.includes("/favorited.png")) {
removeFavoriteTeam(userID, teamID);
} else {
addFavoriteTeam(userID, teamID, teamName, teamLogo);
}
});
}
document.addEventListener("DOMContentLoaded", function () {
var favoriteButton = document.getElementById("club-favorite-button");
if (favoriteButton) {
favoriteButton.addEventListener("click", function () {
var userID = document.getElementById("userID").value;
var teamID = document.getElementById("teamID").value;
var teamName = document.getElementById("teamName").value;
var teamLogo = document.getElementById("teamLogo").value;
if (favoriteButton.src.includes("/favorited.png")) {
removeFavoriteTeam(userID, teamID);
} else {
addFavoriteTeam(userID, teamID, teamName, teamLogo);
}
});
}
});
async function addFavoriteTeam(userID, teamID, teamName, teamLogo){
try {
const response = await fetch('/favteam/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userID: userID,
teamID: teamID,
teamName: teamName,
teamLogo: teamLogo
})
});
async function addFavoriteTeam(userID, teamID, teamName, teamLogo) {
try {
const response = await fetch("/favteam/add", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userID: userID,
teamID: teamID,
teamName: teamName,
teamLogo: teamLogo,
}),
});
if (!response.ok) {
throw new Error('Failed to add favorite team');
}
if (!response.ok) {
throw new Error("Failed to add favorite team");
}
if (response.status === 200) {
console.log('New favorite team added successfully.');
var favoriteButton = document.getElementById("club-favorite-button");
favoriteButton.src = "/img/club-page/favorited.png";
location.reload(); // Refresh the page
}
} catch (error) {
console.error('Error adding favorite team:', error);
}
if (response.status === 200) {
console.log("New favorite team added successfully.");
var favoriteButton = document.getElementById("club-favorite-button");
favoriteButton.src = "/img/club-page/favorited.png";
location.reload(); // Refresh the page
}
} catch (error) {
console.error("Error adding favorite team:", error);
}
}
async function removeFavoriteTeam(userID, teamID) {
try {
const response = await fetch('/favteam/remove', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userID: userID,
teamID: teamID
})
});
if (response.status === 200) {
console.log('Favorite team removed successfully.');
var favoriteButton = document.getElementById("club-favorite-button");
favoriteButton.src = "/img/club-page/unfavorited.png";
location.reload(); // Refresh the page
}
try {
const response = await fetch("/favteam/remove", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userID: userID,
teamID: teamID,
}),
});
} catch (error) {
console.error('Error removing favorite team:', error);
}
if (response.status === 200) {
console.log("Favorite team removed successfully.");
var favoriteButton = document.getElementById("club-favorite-button");
favoriteButton.src = "/img/club-page/unfavorited.png";
location.reload(); // Refresh the page
}
} catch (error) {
console.error("Error removing favorite team:", error);
}
}

47
public/assets/js/league-page/change-goal-difference-color.js
View File

@@ -1,29 +1,26 @@
document.addEventListener("DOMContentLoaded", function() {
var goalDifferenceCells = document.querySelectorAll("#league-table-goal-difference-column"); // Selecting the cells in the goal_difference column
document.addEventListener("DOMContentLoaded", function () {
var goalDifferenceCells = document.querySelectorAll(
"#league-table-goal-difference-column"
); // Selecting the cells in the goal_difference column
goalDifferenceCells.forEach(function(cell) {
var goalDifference = parseInt(cell.textContent);
var color;
goalDifferenceCells.forEach(function (cell) {
var goalDifference = parseInt(cell.textContent);
var color;
if (goalDifference < 0)
{
// Gradually darken the text color for negative goal differences
var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor
var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red
color = "rgb(" + shade + ", 0, 0)"; // Create the color value
}
else if (goalDifference > 0)
{
// Gradually darken the text color for positive goal differences
var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor
var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker
color = "rgb(0, " + shade + ", 0)"; // Create the color value
}
else
{
color = "inherit"; // If goal difference is 0, leave text color unchanged
}
if (goalDifference < 0) {
// Gradually darken the text color for negative goal differences
var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor
var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red
color = "rgb(" + shade + ", 0, 0)"; // Create the color value
} else if (goalDifference > 0) {
// Gradually darken the text color for positive goal differences
var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor
var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker
color = "rgb(0, " + shade + ", 0)"; // Create the color value
} else {
color = "inherit"; // If goal difference is 0, leave text color unchanged
}
cell.style.color = color; // Apply the calculated color
});
cell.style.color = color; // Apply the calculated color
});
});

68
public/assets/js/navigation-bar/navigation-bar-follow.js
View File

@@ -2,44 +2,44 @@
// Function to add sticky behavior to the navbar
function makeNavbarSticky() {
// Get the navigation bar element
var navbar = document.getElementById("navigation-bar-container");
var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName
// Get the navigation bar element
var navbar = document.getElementById("navigation-bar-container");
var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName
// Get the initial offset of the navbar from the top of the page
var navbarOffset = navbar.offsetTop;
// Get the initial offset of the navbar from the top of the page
var navbarOffset = navbar.offsetTop;
// Function to add sticky behavior when scrolling
function stickyNavbar() {
// Check if the current scroll position is greater than or equal to the initial offset of the navbar
if (window.pageYOffset >= navbarOffset) {
// Add the 'fixed-top' class to make the navbar sticky
navbar.classList.add("fixed-top");
// Add padding to the body to prevent content from jumping when the navbar becomes sticky
document.body.style.paddingTop = navbar.offsetHeight + "px";
// Adjust the position of the account pane
accountPane.style.position = "fixed"; // Make the account pane fixed
accountPane.style.top = navbar.offsetHeight + 20 + 'px'; // Move the account pane below the navbar
} else {
// Remove the 'fixed-top' class to make the navbar non-sticky
navbar.classList.remove("fixed-top");
// Reset the padding of the body
document.body.style.paddingTop = 0;
accountPane.style.position = "absolute"; // Make the account pane fixed
// Set the top position of the account pane to be 150px off the top
accountPane.style.top = "160px";
}
}
// Function to add sticky behavior when scrolling
function stickyNavbar() {
// Check if the current scroll position is greater than or equal to the initial offset of the navbar
if (window.pageYOffset >= navbarOffset) {
// Add the 'fixed-top' class to make the navbar sticky
navbar.classList.add("fixed-top");
// Add padding to the body to prevent content from jumping when the navbar becomes sticky
document.body.style.paddingTop = navbar.offsetHeight + "px";
// Call the stickyNavbar function when the page is scrolled
window.onscroll = function() {
stickyNavbar();
};
// Adjust the position of the account pane
accountPane.style.position = "fixed"; // Make the account pane fixed
accountPane.style.top = navbar.offsetHeight + 20 + "px"; // Move the account pane below the navbar
} else {
// Remove the 'fixed-top' class to make the navbar non-sticky
navbar.classList.remove("fixed-top");
// Reset the padding of the body
document.body.style.paddingTop = 0;
accountPane.style.position = "absolute"; // Make the account pane fixed
// Set the top position of the account pane to be 150px off the top
accountPane.style.top = "160px";
}
}
// Call the stickyNavbar function when the page is scrolled
window.onscroll = function () {
stickyNavbar();
};
}
// Call the makeNavbarSticky function when the page loads
window.onload = function() {
makeNavbarSticky();
window.onload = function () {
makeNavbarSticky();
};

63
public/assets/js/navigation-bar/user/delete-account-favorite-club.js
View File

@@ -1,36 +1,37 @@
document.addEventListener("DOMContentLoaded", function() {
var deleteButtons = document.querySelectorAll("#account-delete-favorite-team-button-hover");
deleteButtons.forEach(function(deleteButton) {
deleteButton.addEventListener("click", function() {
var userID = deleteButton.getAttribute("userID");
var teamID = deleteButton.getAttribute("teamID");
if (deleteButton.src.includes("/delete-club-hover.png")) {
removeAccountFavoriteTeam(userID, teamID);
}
});
});
document.addEventListener("DOMContentLoaded", function () {
var deleteButtons = document.querySelectorAll(
"#account-delete-favorite-team-button-hover"
);
deleteButtons.forEach(function (deleteButton) {
deleteButton.addEventListener("click", function () {
var userID = deleteButton.getAttribute("userID");
var teamID = deleteButton.getAttribute("teamID");
if (deleteButton.src.includes("/delete-club-hover.png")) {
removeAccountFavoriteTeam(userID, teamID);
}
});
});
});
async function removeAccountFavoriteTeam(userID, teamID) {
try {
const response = await fetch('/favteam/remove', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userID: userID,
teamID: teamID
})
});
if (response.status === 200) {
console.log('Favorite team removed successfully.');
location.reload(); // Refresh the page
}
try {
const response = await fetch("/favteam/remove", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userID: userID,
teamID: teamID,
}),
});
} catch (error) {
console.error('Error removing favorite team:', error);
}
if (response.status === 200) {
console.log("Favorite team removed successfully.");
location.reload(); // Refresh the page
}
} catch (error) {
console.error("Error removing favorite team:", error);
}
}

59
public/assets/js/navigation-bar/user/login-and-register-page-linking.js
View File

@@ -1,41 +1,34 @@
$(document).ready(function() {
$(document).ready(function () {
// When #user is clicked
$("#user-profile-button").click(function () {
$("#register-screen-container").hide();
// Toggle the visibility of the login container
$("#login-pane").toggle();
});
// When #user is clicked
$('#user-profile-button').click(function() {
$('#register-screen-container').hide();
// Toggle the visibility of the login container
$('#login-pane').toggle();
});
$('#register-page-login-button').click(function (event) {
event.preventDefault(); // Prevent the default action of following the link
$('#register-screen-container').hide();
$('#login-pane').show();
});
$("#register-page-login-button").click(function (event) {
event.preventDefault(); // Prevent the default action of following the link
$("#register-screen-container").hide();
$("#login-pane").show();
});
});
$(document).ready(function () {
// Listen for click event on the register button
$('#register-button').click(function (event) {
event.preventDefault(); // Prevent the default action of following the link
// Listen for click event on the register button
$("#register-button").click(function (event) {
event.preventDefault(); // Prevent the default action of following the link
$('#login-pane').hide();
// Show the register container
$('#register-screen-container').show();
});
$("#login-pane").hide();
// Show the register container
$("#register-screen-container").show();
});
});
$(document).ready(function() {
// When #user is clicked
$('#user-profile-button').click(function() {
// Toggle the visibility of the login container
$('#account-pane').toggle();
});
});
$(document).ready(function () {
// When #user is clicked
$("#user-profile-button").click(function () {
// Toggle the visibility of the login container
$("#account-pane").toggle();
});
});

2
public/views/partials/navigation-bar/user-menu/login.hbs
View File

@@ -1,6 +1,8 @@
<!-- Linking forms.css -->
<div class="account-portal-container" id="login-pane">
<div class="form-container" id="login-form">
<img id="account-portal-logo" src="/img/logo.png" style="width: 150px;">
<h1 class="mt-5 mb-4">Login</h1>
<!-- Check if message variable is present to display message partial -->