From a1c319083a584eea4aeeb05bffbbb8d5cb590e98 Mon Sep 17 00:00:00 2001 From: Lucas Patenaude Date: Tue, 9 Apr 2024 23:49:45 -0600 Subject: [PATCH] Styling added to game cards in live scoreboard --- .../src/resources/css/homepage/homepage.css | 2 +- .../css/navigation-bar/navigation-bar.css | 11 +++---- .../scoreboard-header/game-card.css | 29 +++++++++++-------- .../scoreboard-header/current-match-routes.js | 2 +- .../src/views/partials/navigation-bar/nav.hbs | 7 ----- .../scoreboard-header/game-card.hbs | 2 +- 6 files changed, 26 insertions(+), 27 deletions(-) diff --git a/ProjectSourceCode/src/resources/css/homepage/homepage.css b/ProjectSourceCode/src/resources/css/homepage/homepage.css index cc7d305..f53aac8 100644 --- a/ProjectSourceCode/src/resources/css/homepage/homepage.css +++ b/ProjectSourceCode/src/resources/css/homepage/homepage.css @@ -6,7 +6,7 @@ /* Styling for text at top of the page */ #leagues-header { - font-family: 'Golos Text'; + font-family: 'Scottsdale-Italic'; display: inline-block; /* Ensure the width is based on content */ border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */ diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css b/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css index c72d5a3..4298ff6 100644 --- a/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css +++ b/ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css @@ -1,3 +1,9 @@ +/* Add logo font face */ +@font-face { + font-family: 'Scottsdale-Italic'; + src: url('../fonts/Scottsdale-Italic.ttf') format('truetype'); +} + #navigation-bar-container { background-color: hsl(0, 98%, 40%); box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); @@ -13,11 +19,6 @@ z-index: 1000; /* Adjust as needed */ } -@font-face { - font-family: 'Scottsdale-Italic'; - src: url('../fonts/Scottsdale-Italic.ttf') format('truetype'); -} - #logo { color: white; text-decoration: none; diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css b/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css index 3de5107..67e88e9 100644 --- a/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css +++ b/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css @@ -1,21 +1,25 @@ +.scoreboard-league-container { + height: 100%; +} + #game-card { display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */ - border: 1px solid #ccc; - border-radius: 4px; - padding: 6px; - margin: 6px 0px; /* Distance between cards and container */ - margin-left: 5px; - min-width: 150px; - - color: rgb(0, 0, 0); - background-color: rgb(255, 255, 255); - border: 1px solid rgb(160, 159, 159); - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + margin: 0px; + height: 100%; + background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ + padding: 10px; /* Adjust padding as needed */ + position: relative; /* Needed for absolute positioning */ + overflow: hidden; /* Hide the overflowing skewed content */ + transform: skewX(-20deg); /* Skew the banner to create a triangular side */ + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */ + cursor: pointer; /* Change cursor to pointer on hover */ transition: transform 0.4s ease; /* Add transition for smooth effect */ } + + #game-card:hover { transform: scale(1.05); /* Scale up by 10% on hover */ } @@ -24,8 +28,9 @@ .score-card-body { display: flex; width: 100%; - justify-content: center; + justify-content: flex-end align-items: center; + transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */ } /* Left Side of Container (Scores) */ diff --git a/ProjectSourceCode/src/resources/js/navigation-bar/scoreboard-header/current-match-routes.js b/ProjectSourceCode/src/resources/js/navigation-bar/scoreboard-header/current-match-routes.js index 08b01db..2b28a4a 100644 --- a/ProjectSourceCode/src/resources/js/navigation-bar/scoreboard-header/current-match-routes.js +++ b/ProjectSourceCode/src/resources/js/navigation-bar/scoreboard-header/current-match-routes.js @@ -7,7 +7,7 @@ const fetchMatchesData = async (req, res, next) => { const today = moment().format('YYYY-MM-DD'); // Get today's date in YYYY-MM-DD format // Subtract one day to get yesterday's date - const yesterdayUnformatted = moment().subtract(1, 'days'); + const yesterdayUnformatted = moment().subtract(3, 'days'); // Format yesterday's date as YYYY-MM-DD const yesterday = yesterdayUnformatted.format('YYYY-MM-DD'); diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs index cd7ac57..247019d 100644 --- a/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs +++ b/ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs @@ -44,13 +44,6 @@
Your Image
- - diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs index a418d4b..db34089 100644 --- a/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs +++ b/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs @@ -1,4 +1,4 @@ -
+