Flag added to league header

ProjectSourceCode/src/resources/css/league-page/league-page.css

@@ -38,6 +38,13 @@
 
 #league-title {
     transform: skewX(20deg); /* Skew the banner to create a triangular side */
+    margin-right: 20px;
+}
+
+#league-flag {
+
+    transform: skewX(20deg); /* Skew the banner to create a triangular side */
+    height: 20px;
     margin-right: 200px;
 }
 

ProjectSourceCode/src/resources/middleware/league-page/get-current-league-information.js

@@ -18,6 +18,9 @@ const fetchLeaguesData = async (req, res, next) => {
 
         // Attach the data to res.locals
         res.locals.league = {
+            area: {
+                league_flag: leagueData.area.flag,
+            },
             competition: {
                 league_id: leagueData.competition.id,
                 league_name: leagueData.competition.name,

ProjectSourceCode/src/views/pages/league-page.hbs

@@ -4,6 +4,7 @@
     <div class="container" id="league-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">
     </div>
 
     <!-- Container to display all stats for league <- bottom rest of the container -->