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

More CSS clean-up to remove redundant styling and streamline elements

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-16 14:56:22 -06:00
parent 80c1dca846
commit ae054ed60a
8 changed files with 98 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -89,7 +89,7 @@
=============================================
*/
/* Styling for Standings and Top Scorers Cards */
/* Styling for All Card Containers on Generated Pages */
.card-container
{
/* --- POSITION CONTAINER --- */
@@ -105,15 +105,61 @@
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}
/* Styling for All Tables on Generated Pages */
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;
}
}
/* Styling for All Tables Designated to Alternate on Generated Pages */
.alternating-table tbody tr:nth-child(odd)
{
/* Every Odd Row in Table Style */
background-color: #d2d2d2; /* Light gray for odd rows */
}
/*
==============================================================
HOVER STYLES
==============================================================
*/
/* Hover Styling for Standings and Top Scorers Cards */
/* Hover Styling for All Card Containers on Generated Pages */
.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);
}
/* Hover Styling for All Tables Designated to Alternate on Generated Pages */
.alternating-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 */
}
}

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

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

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

@@ -1,9 +1,3 @@
/*
=============================================
CARDS IN PAGE BODY
=============================================
*/
#club-page-contents-container {
display: flex;
flex-direction: row;

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

@@ -1,34 +1,4 @@
/* 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 */
}
}

106
ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css
View File

@@ -1,6 +1,6 @@
/*
=================================
TABLE AND HEADER CONTAINER
LEAGUE TABLE CONTAINER
=================================
*/
@@ -8,102 +8,40 @@
#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
=================================
============================================
LEAGUE TABLE COLUMNS STYLE
============================================
*/
/* Table that holds all the standing information */
#league-standings-table
{
width: 100%;
padding: 15px;
/* Club Logo Column in Table Style */
#league-table-club-logo-column {
width: 25px;
/* 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;
/* Club Logo Style */
#league-table-club-logo
{
width: 25px;
margin-right: 5px;
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
/* Club Name Column in Table Style */
#league-table-club-name-column
{
/* Create border around row on hover */
border: 1px solid lightgray;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
}
/* 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 */
}
/* Points Column in Table Style */
#league-table-points-column
{
font-weight: bolder;
}
/*

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

@@ -9,58 +9,38 @@
width: 40%;
}
#league-top-scorers-stats-container {
/*
===========================
TABLE COLUMNS STYLE
===========================
*/
/* Table Header Styling */
th
{
border-bottom: 3px solid red; /* Add red bottom border */
}
tr
{
padding: 3px;
}
/* Data in Row Style */
td
{
padding: 5px;
}
#league-top-scorers-goals-column
{
text-align: center;
font-size: 20px;
font-weight: bolder;
}
/*
===========================
TABLE COLUMNS STYLE
===========================
*/
#league-top-scorers-logo
{
width: 25px;
margin: 0 15px;
cursor: pointer;
}
#league-top-scorers-goals-column
{
text-align: center;
font-size: 20px;
font-weight: bolder;
}
#league-top-scorers-player-name-column
{
#league-top-scorers-logo
{
width: 25px;
margin: 0 15px;
cursor: pointer;
}
font-size: 14px;
font-weight: bold;
padding-right: 15px;
}
#league-top-scorers-player-name-column
{
font-size: 14px;
font-weight: bold;
padding-right: 15px;
}
#league-top-scorers-club-name-column
{
padding-right: 15px;
}
#league-top-scorers-club-name-column
{
padding-right: 15px;
}
/*
==============================================================

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

@@ -93,7 +93,7 @@
</div>
<div id="club-players-table-container" class="card-container">
<table id="club-players-table">
<table id="club-players-table" class="alternating-table">
<thead>
<tr>
<th>Name</th>

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

@@ -20,7 +20,7 @@
<!-- Container containing all league table stats -->
<div id="league-table-stats-container" class="card-container">
<table id="league-standings-table">
<table id="league-standings-table" class="alternating-table">
<thead>
<tr>
<th>#</th>