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

More CSS streamlining

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-16 14:36:59 -06:00
parent 7ce001cf20
commit 80c1dca846
5 changed files with 50 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,6 +54,35 @@
flex-direction: row; /* Arrange child elements horizontally */
}
/*
===========================
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 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: 200px;
}
/*
=============================================
CARDS IN PAGE BODY
@@ -75,3 +104,16 @@
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 */
.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);
}

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

@@ -1,32 +1,3 @@
/*
===========================
LEAGUE INFORMATION CHILD ITEMS
===========================
*/
/* 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

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

@@ -1,68 +1,15 @@
/*
===========================
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 {
#table-and-top-scorers-containers
{
display: flex;
flex-direction: row;
}
/*
==============================================================
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

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

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

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

@@ -2,9 +2,9 @@
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<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">
<img id="generated-page-header-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h1 id="generated-page-header-title">{{league.competition.league_name}}</h2>
<img id="generated-page-header-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 -->