Lukeflix/JellySport
1
0
Fork 0
forked from lucaspatenaude/ScoreSpot
Code Pull Requests Activity

CSS reorganization started to streamline elements on generated pages

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-16 13:48:57 -06:00
parent c5336b6bae
commit f7cc426358
8 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
ProjectSourceCode/src/resources/css/generated-pages/card-styling.css Normal file
View File

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

@@ -0,0 +1,7 @@
#club-information-container {
height: fit-content;
width: 20%;
display: flex;
flex-direction: column;
}

103
ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page.css Normal file
View File

@@ -0,0 +1,103 @@
#club-page-body {
display: flex;
flex-direction: column;
width: 100%;
padding: 10px 100px;
}
/*
=================================
LEAGUE INFORMATION HEADER
=================================
*/
#club-header-container {
height: 100px;
width: fit-content;
margin: 20px;
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
padding: 10px 20px; /* Adjust padding as needed */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */
cursor: pointer; /* Change cursor to pointer on hover */
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
display: flex; /* Use flexbox for layout */
align-items: center; /* Center content vertically */
}
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Adds Red Diagonal Strip at the end of the #club-information-container */
#club-header-container::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
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;
}
/* Styling for Standings and Top Scorers Cards */
.card-container
{
/* --- POSITION CONTAINER --- */
margin: 0 10px;
margin-bottom: 20px;
/* --- 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);
}

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

@@ -0,0 +1,34 @@
/* Container for all stats and player cards */
#club-stats-and-players-container {
width: 80%;
}
/*
=================================
PLAYER TABLE CONTAINER
=================================
*/
/* Table containing player information */
#club-players-table {
width: 100%;
padding: 15px;
/* Table Header Styling */
th
{
border-bottom: 3px solid red; /* Add red bottom border */
}
/* Data in Row Style */
td
{
padding: 5px;
}
/* Every Odd Row in Table Style */
tbody tr:nth-child(odd)
{
background-color: #d2d2d2; /* Light gray for odd rows */
}
}

142
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-page.css Normal file
View File

@@ -0,0 +1,142 @@
/*
==============================================================
OVERALL PAGE STYLES
==============================================================
*/
#league-page-body
{
/* --- 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 */
}
/*
=================================
LEAGUE INFORMATION HEADER
=================================
*/
/* Stylization for League Information Header Card */
#league-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 */
/* --- 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 */
}
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Adds Red Diagonal Strip at the end of the #league-information-container */
#league-information-container::after
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
background-color: red; /* Red color */
}
/* Styling for League Logo in League Information Header */
#league-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 */
#league-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* Styling for FLag in League Information Header */
#league-flag
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 20px;
margin-right: 200px;
}
/*
=============================================
CARDS IN PAGE BODY
=============================================
*/
#table-and-top-scorers-containers {
display: flex;
flex-direction: row;
}
/* Styling for Standings and Top Scorers Cards */
#league-table-stats-container, #league-top-scorers-stats-container
{
/* --- POSITION CONTAINER --- */
margin: 0 10px;
margin-bottom: 20px;
/* --- 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);
}
/*
==============================================================
HOVER STYLES
==============================================================
*/
/* Hover Styling for Standings and Top Scorers Cards */
#table-stats-container:hover, #top-scorers-stats-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);
}
/*
==============================================================
DYNAMIC PAGE WIDTH STYLES
==============================================================
*/
/* Width of Screen is Less Than 950px */
@media (max-width: 1230px)
{
#table-and-top-scorers-containers {
display: flex;
flex-direction: column;
}
}

124
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css Normal file
View File

@@ -0,0 +1,124 @@
/*
=================================
TABLE AND HEADER CONTAINER
=================================
*/
/* Container for table and header */
#league-table-container
{
width: 60%;
justify-content: center;
align-items: center;
margin-right: 30px;
transition: transform 0.3s ease; /* Add smooth transition effect */
}
/*
=================================
TABLE CONTAINER
=================================
*/
/* Table that holds all the standing information */
#league-standings-table
{
width: 100%;
padding: 15px;
/* Table Header Styling */
th
{
border-bottom: 3px solid red; /* Add red bottom border */
}
/* Data in Row Style */
td
{
padding: 5px;
}
/* Every Odd Row in Table Style */
tbody tr:nth-child(odd)
{
background-color: #d2d2d2; /* Light gray for odd rows */
}
}
/*
===========================
TABLE COLUMNS STYLE
===========================
*/
/* Club Logo Column in Table Style */
#league-table-club-logo-column {
width: 25px;
/* Club Logo Style */
#league-table-club-logo
{
width: 25px;
margin-right: 5px;
cursor: pointer;
}
}
/* Club Name Column in Table Style */
#league-table-club-name-column
{
font-weight: 500;
cursor: pointer;
}
/* Points Column in Table Style */
#league-table-points-column
{
font-weight: bolder;
}
/*
==============================================================
HOVER STYLES
==============================================================
*/
/* Add hover effect to table rows */
#league-standings-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;
}
/* Undeline club name on hover */
#league-table-club-name-column
{
text-decoration: underline; /* Add underline effect */
}
}
/*
==============================================================
DYNAMIC PAGE WIDTH STYLES
==============================================================
*/
/* Stlye for Screens Smaller than 1230px */
@media (max-width: 1230px)
{
#league-table-container
{
align-items: center;
width: 75%;
min-width: 580px;
}
}

96
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css Normal file
View File

@@ -0,0 +1,96 @@
/*
=================================
TABLE ADN HEADER CONTAINER
=================================
*/
#league-top-scorers-container
{
width: 40%;
}
#league-top-scorers-stats-container {
/* Table Header Styling */
th
{
border-bottom: 3px solid red; /* Add red bottom border */
}
tr
{
padding: 3px;
}
/* Data in Row Style */
td
{
padding: 5px;
}
}
/*
===========================
TABLE COLUMNS STYLE
===========================
*/
#league-top-scorers-goals-column
{
text-align: center;
font-size: 20px;
font-weight: bolder;
}
#league-top-scorers-logo
{
width: 25px;
margin: 0 15px;
cursor: pointer;
}
#league-top-scorers-player-name-column
{
font-size: 14px;
font-weight: bold;
padding-right: 15px;
}
#league-top-scorers-club-name-column
{
padding-right: 15px;
}
/*
==============================================================
HOVER STYLES
==============================================================
*/
#league-top-scorers-stats-container tbody tr:hover
{
border: 1px solid lightgray;
#league-top-scorers-logo {
width: 32px;
}
#league-top-scorers-player-name-column {
text-decoration: underline;
}
}
/*
==============================================================
DYNAMIC PAGE WIDTH STYLES
==============================================================
*/
@media (max-width: 1230px) {
#league-top-scorers-logo {
align-items: center;
width: 75%;
}
}