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 { /* Adds Red Diagonal Strip at the end of the #club-information-container */
height: 100px; #club-header-container::after {
width: fit-content; content: '';
margin: 20px; position: absolute;
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ top: 0;
padding: 10px 20px; /* Adjust padding as needed */ right: 0;
transform: skewX(-20deg); /* Skew the banner to create a triangular side */ bottom: 0;
cursor: pointer; /* Change cursor to pointer on hover */ width: 8px; /* Width of the red strip */
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); background-color: red; /* Red color */
}
display: flex; /* Use flexbox for layout */ /* Styling for League Logo in Club Information Header */
align-items: center; /* Center content vertically */ #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
LEAGUE INFORMATION CHILD ITEMS {
=========================== 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 */ /* Styling for FLag in Club Information Header */
#club-header-container::after { #club-flag
content: ''; {
position: absolute; transform: skewX(20deg); /* Skew the banner to create a triangular side */
top: 0; height: 20px;
right: 0; margin-right: 200px;
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;
}
/* /*
============================================= =============================================
@@ -76,21 +49,7 @@
flex-direction: row; 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 --- */ content: '';
width: 100%; /* Set the width to the full width of screen */ position: absolute;
padding: 10px 100px; /* Create some distance between page boundries and elements */ top: 0;
right: 0;
/* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */ bottom: 0;
display: flex; /* Enable flexbox layout */ width: 8px; /* Width of the red strip */
flex-direction: column; /* Arrange child elements vertically */ background-color: red; /* Red color */
} }
/* /* Styling for League Logo in League Information Header */
================================= #league-logo
LEAGUE INFORMATION HEADER
=================================
*/
/* Stylization for League Information Header Card */
#league-information-container
{ {
/* --- POSITION CONTAINER --- */ margin: 0px 30px;
align-items: center; /* Center content vertically */ transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin: 20px; height: 80%;
/* --- 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 */
} }
/* /* Styling for League Title in League Information Header */
=========================== #league-title
LEAGUE INFORMATION CHILD ITEMS {
=========================== 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 */ /* Styling for FLag in League Information Header */
#league-information-container::after #league-flag
{ {
content: ''; transform: skewX(20deg); /* Skew the banner to create a triangular side */
position: absolute; height: 20px;
top: 0; margin-right: 200px;
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;
}
/* /*
============================================= =============================================
@@ -95,22 +50,6 @@
flex-direction: row; 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 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"> <div id="league-page-body" class="page-container">
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px --> <!-- 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"> <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h1 id="league-title">{{league.competition.league_name}}</h2> <h1 id="league-title">{{league.competition.league_name}}</h2>
<img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag"> <img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
</div> </div>
<!-- Container to display all stats for league <- bottom rest of the container --> <!-- 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% --> <!-- 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 --> <!-- 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> <h2>Table</h2>
</div> </div>
<!-- Container containing all league table stats --> <!-- 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"> <table id="league-standings-table">
<thead> <thead>
<tr> <tr>
@@ -54,13 +54,14 @@
</div> </div>
<!-- Container to display top scorers for league <- Split 50% --> <!-- Container to display top scorers for league <- Split 50% -->
<div id="league-top-scorers-container" class="stats-container"> <div id="league-top-scorers-container" class="content-container">
<div id="league-top-scorers-header-container" class="header">
<div id="league-top-scorers-header-container" class="header-container">
<h2>Top Scorers</h2> <h2>Top Scorers</h2>
</div> </div>
<div id="league-top-scorers-stats-container" class="stats-container"> <div id="league-top-scorers-stats-container" class="card-container">
<table> <table id="league-top-scorers-table">
<thead> <thead>
<tr> <tr>
<th>Goals</th> <th>Goals</th>