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

CSS styling streamlined for all generated page contents

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-16 14:30:18 -06:00
parent f7cc426358
commit 6cdec74029
5 changed files with 157 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
ProjectSourceCode/src/resources/css/generated-pages/card-styling.css
View File

@@ -0,0 +1,83 @@
/*
==============================================================
ENTIRE PAGE CONTAINER
==============================================================
*/
.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 */
}
/*
=================================
LEAGUE INFORMATION HEADER
=================================
*/
/* Stylization for League Information Header Card */
.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 */
.information-container::after
{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
background-color: red; /* Red color */
}
/*
=============================================
CARDS IN PAGE BODY
=============================================
*/
/* 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);
}

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

@@ -1,69 +1,42 @@
#club-page-body {
display: flex;
flex-direction: column;
width: 100%;
padding: 10px 100px;
}
/*
=================================
LEAGUE INFORMATION HEADER
=================================
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
#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);
/* 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 */
}
display: flex; /* Use flexbox for layout */
align-items: center; /* Center content vertically */
/* 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%;
}
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Styling for League Title in Club Information Header */
#club-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* 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;
}
/* 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;
}
/*
=============================================
@@ -76,21 +49,7 @@
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);
}

121
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-page.css
View File

@@ -1,88 +1,43 @@
/*
==============================================================
OVERALL PAGE STYLES
==============================================================
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
#league-page-body
/* Adds Red Diagonal Strip at the end of the #league-information-container */
#league-information-container::after
{
/* --- 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 */
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
background-color: red; /* Red color */
}
/*
=================================
LEAGUE INFORMATION HEADER
=================================
*/
/* Stylization for League Information Header Card */
#league-information-container
/* Styling for League Logo in League Information Header */
#league-logo
{
/* --- 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 */
margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%;
}
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* Styling for League Title in League Information Header */
#league-title
{
transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 20px;
}
/* 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;
}
/* 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;
}
/*
=============================================
@@ -95,22 +50,6 @@
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

2
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css
View File

@@ -1,6 +1,6 @@
/*
=================================
TABLE ADN HEADER CONTAINER
TABLE AND HEADER CONTAINER
=================================
*/

19
ProjectSourceCode/src/views/pages/leagues-page.hbs
View File

@@ -1,25 +1,25 @@
<div id="league-page-body" class="page-container">
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<div id="league-information-container" class="information-container">
<div id="league-header-container" class="information-container">
<img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h1 id="league-title">{{league.competition.league_name}}</h2>
<img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
</div>
<!-- Container to display all stats for league <- bottom rest of the container -->
<div id="table-and-top-scorers-containers" class="stats-container">
<div id="table-and-top-scorers-containers" class="page-content-container">
<!-- Container to display league table <- split 50% -->
<div id="league-table-container" class="stats-container">
<div id="league-table-container" class="content-container">
<!-- Put header above table container -->
<div id="league-table-header-container" class="header">
<div id="league-table-header-container" class="header-container">
<h2>Table</h2>
</div>
<!-- Container containing all league table stats -->
<div id="league-table-stats-container" class="stats-container">
<div id="league-table-stats-container" class="card-container">
<table id="league-standings-table">
<thead>
<tr>
@@ -54,13 +54,14 @@
</div>
<!-- Container to display top scorers for league <- Split 50% -->
<div id="league-top-scorers-container" class="stats-container">
<div id="league-top-scorers-header-container" class="header">
<div id="league-top-scorers-container" class="content-container">
<div id="league-top-scorers-header-container" class="header-container">
<h2>Top Scorers</h2>
</div>
<div id="league-top-scorers-stats-container" class="stats-container">
<table>
<div id="league-top-scorers-stats-container" class="card-container">
<table id="league-top-scorers-table">
<thead>
<tr>
<th>Goals</th>