From ae054ed60a7739f33e1febefe9f6a91ff5ad17cd Mon Sep 17 00:00:00 2001 From: Lucas Patenaude Date: Tue, 16 Apr 2024 14:56:22 -0600 Subject: [PATCH] More CSS clean-up to remove redundant styling and streamline elements --- .../css/generated-pages/card-styling.css | 50 ++++++++- .../club-pages/club-information-card.css | 7 -- .../generated-pages/club-pages/club-page.css | 6 - .../club-players-and-stats-card.css | 30 ----- .../league-pages/league-table.css | 106 ++++-------------- .../league-pages/league-top-scorers.css | 72 +++++------- .../src/views/pages/clubs-page.hbs | 2 +- .../src/views/pages/leagues-page.hbs | 2 +- 8 files changed, 98 insertions(+), 177 deletions(-) delete mode 100644 ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-information-card.css diff --git a/ProjectSourceCode/src/resources/css/generated-pages/card-styling.css b/ProjectSourceCode/src/resources/css/generated-pages/card-styling.css index 6152c67..2f69b9f 100644 --- a/ProjectSourceCode/src/resources/css/generated-pages/card-styling.css +++ b/ProjectSourceCode/src/resources/css/generated-pages/card-styling.css @@ -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 */ + } } \ No newline at end of file diff --git a/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-information-card.css b/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-information-card.css deleted file mode 100644 index 125f994..0000000 --- a/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-information-card.css +++ /dev/null @@ -1,7 +0,0 @@ -#club-information-container { - height: fit-content; - width: 20%; - - display: flex; - flex-direction: column; -} diff --git a/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page.css b/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page.css index 126b4b9..6e688be 100644 --- a/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page.css +++ b/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-page.css @@ -1,9 +1,3 @@ -/* -============================================= - CARDS IN PAGE BODY -============================================= -*/ - #club-page-contents-container { display: flex; flex-direction: row; diff --git a/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-players-and-stats-card.css b/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-players-and-stats-card.css index 80001e3..17d01a9 100644 --- a/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-players-and-stats-card.css +++ b/ProjectSourceCode/src/resources/css/generated-pages/club-pages/club-players-and-stats-card.css @@ -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 */ - } } \ No newline at end of file diff --git a/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css b/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css index 7603578..a9031d3 100644 --- a/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css +++ b/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-table.css @@ -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; } /* diff --git a/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css b/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css index 0fef2d5..1f65f87 100644 --- a/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css +++ b/ProjectSourceCode/src/resources/css/generated-pages/league-pages/league-top-scorers.css @@ -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; +} /* ============================================================== diff --git a/ProjectSourceCode/src/views/pages/clubs-page.hbs b/ProjectSourceCode/src/views/pages/clubs-page.hbs index fb4e34e..78bd9af 100644 --- a/ProjectSourceCode/src/views/pages/clubs-page.hbs +++ b/ProjectSourceCode/src/views/pages/clubs-page.hbs @@ -93,7 +93,7 @@
- +
diff --git a/ProjectSourceCode/src/views/pages/leagues-page.hbs b/ProjectSourceCode/src/views/pages/leagues-page.hbs index ef48def..15e142e 100644 --- a/ProjectSourceCode/src/views/pages/leagues-page.hbs +++ b/ProjectSourceCode/src/views/pages/leagues-page.hbs @@ -20,7 +20,7 @@
-
Name
+
#