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

CSS arrangement updated. More comments added to .hbs and .css files

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-15 20:17:43 -06:00
parent b540360e3f
commit 9e9717dd2e
7 changed files with 78 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ProjectSourceCode/src/resources/css/club-pages/club-information-card.css Normal file
View File

@@ -0,0 +1,3 @@
#club-history-container {
width: 20%;
}

65
ProjectSourceCode/src/resources/css/club-pages/club-page.css
View File

@@ -3,6 +3,12 @@
flex-direction: column;
}
/*
=================================
LEAGUE INFORMATION HEADER
=================================
*/
#club-information-container {
height: 100px;
width: fit-content;
@@ -15,11 +21,16 @@
display: flex; /* Use flexbox for layout */
align-items: center; /* Center content vertically */
/* Add any other styling you need for the club information container */
}
#club-information-container::after {
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Adds Red Diagonal Strip at the end of the #club-information-container */
#club-information-container::after {
content: '';
position: absolute;
top: 0;
@@ -29,17 +40,54 @@
background-color: red; /* Red color */
}
/* Styling for League Logo in Club Information Header */
#club-logo
{
margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%;
}
/* Styling for League Title in Club Information Header */
#club-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* Styling for FLag in Club Information Header */
#club-flag
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 20px;
margin-right: 200px;
}
/*
=============================================
CARDS IN PAGE BODY
=============================================
*/
#club-page-contents-container {
display: flex;
flex-direction: row;
}
#club-history-container {
width: 20%;
}
/* Styling for Standings and Top Scorers Cards */
#club-history-container, #club-stats-and-players-container
{
/* --- POSITION CONTAINER --- */
margin: 0 10px;
margin-bottom: 20px;
#club-stats-and-players-container {
width: 80%;
/* --- 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);
}
@@ -50,3 +98,4 @@

3
ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css Normal file
View File

@@ -0,0 +1,3 @@
#club-stats-and-players-container {
width: 80%;
}

8
ProjectSourceCode/src/resources/css/club-pages/club-top-scorers.css
View File

@@ -1,8 +0,0 @@
/*
#club-top-scorers-container {
flex: 1;
background-color: #dcdcdc; /* Example background color */
width: 40%;
/* Add any other styling you need for the top scorers container */
}
*/

0
ProjectSourceCode/src/resources/css/club-pages/players-table.css
View File

6
ProjectSourceCode/src/views/pages/clubs-page.hbs
View File

@@ -2,9 +2,9 @@
<!-- Container on Top containing Club Information -->
<div id="club-information-container" class="information-container">
<img id="league-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
<h1 id="league-title">{{club.name}}</h2>
<img id="league-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
<img id="club-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
<h1 id="club-title">{{club.name}}</h2>
<img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
</div>
<div id="club-page-contents-container" class="information-container">

7
ProjectSourceCode/src/views/partials/head.hbs
View File

@@ -4,6 +4,7 @@
<!-- Set the Content-Security-Policy header to allow inline scripts -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://code.jquery.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com;">
<!--------------- CSS Stylesheets ---------------->
<!-- CSS on All Pages -->
<link rel="stylesheet" type="text/css" href="/css/all-pages-style.css">
@@ -27,10 +28,10 @@
<link rel="stylesheet" type="text/css" href="/css/league-pages/league-table.css">
<link rel="stylesheet" type="text/css" href="/css/league-pages/league-top-scorers.css">
<!-- League Page Stylesheets -->
<!-- Club Page Stylesheets -->
<link rel="stylesheet" type="text/css" href="/css/club-pages/club-page.css">
<link rel="stylesheet" type="text/css" href="/css/club-pages/players-table.css">
<link rel="stylesheet" type="text/css" href="/css/club-pages/club-top-scorers.css">
<link rel="stylesheet" type="text/css" href="/css/club-pages/club-players-and-stats-card.css">
<link rel="stylesheet" type="text/css" href="/css/club-pages/club-information-card.css">
<title>Group 6 Final Project</title>