From 9e9717dd2ef4d3cca394241410ca88e89f4a4784 Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Mon, 15 Apr 2024 20:17:43 -0600
Subject: [PATCH] CSS arrangement updated. More comments added to .hbs and .css
 files

---
 .../css/club-pages/club-information-card.css  |  3 +
 .../resources/css/club-pages/club-page.css    | 81 +++++++++++++++----
 .../club-players-and-stats-card.css           |  3 +
 .../css/club-pages/club-top-scorers.css       |  8 --
 .../css/club-pages/players-table.css          |  0
 .../src/views/pages/clubs-page.hbs            |  6 +-
 ProjectSourceCode/src/views/partials/head.hbs |  7 +-
 7 files changed, 78 insertions(+), 30 deletions(-)
 create mode 100644 ProjectSourceCode/src/resources/css/club-pages/club-information-card.css
 create mode 100644 ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css
 delete mode 100644 ProjectSourceCode/src/resources/css/club-pages/club-top-scorers.css
 delete mode 100644 ProjectSourceCode/src/resources/css/club-pages/players-table.css

diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css b/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css
new file mode 100644
index 0000000..7ea8057
--- /dev/null
+++ b/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css
@@ -0,0 +1,3 @@
+#club-history-container {
+    width: 20%;
+}
diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-page.css b/ProjectSourceCode/src/resources/css/club-pages/club-page.css
index 825e56d..60544d2 100644
--- a/ProjectSourceCode/src/resources/css/club-pages/club-page.css
+++ b/ProjectSourceCode/src/resources/css/club-pages/club-page.css
@@ -3,6 +3,12 @@
     flex-direction: column;
 }
 
+/*
+=================================
+    LEAGUE INFORMATION HEADER
+=================================
+*/
+
 #club-information-container {
     height: 100px;
     width: fit-content;
@@ -15,31 +21,73 @@
 
     display: flex; /* Use flexbox for layout */
     align-items: center; /* Center content vertically */
-
-    /* Add any other styling you need for the club information container */
 }
 
-#club-information-container::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 8px; /* Width of the red strip */
-    background-color: red; /* Red color */
-  }
+    /*
+    ===========================
+   LEAGUE INFORMATION CHILD ITEMS
+    ===========================
+    */
+
+    /* Adds Red Diagonal Strip at the end of the #club-information-container */
+    #club-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 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
+=============================================
+*/
 
 #club-page-contents-container {
     display: flex;
     flex-direction: row;
 }
 
-#club-history-container {
-    width: 20%;
-}
+/* Styling for Standings and Top Scorers Cards */
+#club-history-container, #club-stats-and-players-container 
+{
+    /* --- POSITION CONTAINER --- */
+    margin: 0 10px;
+    margin-bottom: 20px;
 
-#club-stats-and-players-container {
-    width: 80%;
+    /* --- SIZE CONTAINER --- */
+    padding: 15px;
+
+    /* --- STYLE CONTAINER --- */
+    background: linear-gradient(to top, rgb(216, 216, 216), rgb(236, 236, 236), rgb(241, 240, 240));
+    border: 1px solid gray;
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
 }
 
 
@@ -50,3 +98,4 @@
 
 
 
+
diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css b/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css
new file mode 100644
index 0000000..66df4fd
--- /dev/null
+++ b/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css
@@ -0,0 +1,3 @@
+#club-stats-and-players-container {
+    width: 80%;
+}
\ No newline at end of file
diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-top-scorers.css b/ProjectSourceCode/src/resources/css/club-pages/club-top-scorers.css
deleted file mode 100644
index 9453548..0000000
--- a/ProjectSourceCode/src/resources/css/club-pages/club-top-scorers.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* 
-#club-top-scorers-container {
-    flex: 1;
-    background-color: #dcdcdc; /* Example background color */
-    width: 40%;
-    /* Add any other styling you need for the top scorers container */
-} 
-*/
diff --git a/ProjectSourceCode/src/resources/css/club-pages/players-table.css b/ProjectSourceCode/src/resources/css/club-pages/players-table.css
deleted file mode 100644
index e69de29..0000000
diff --git a/ProjectSourceCode/src/views/pages/clubs-page.hbs b/ProjectSourceCode/src/views/pages/clubs-page.hbs
index 95793ae..cd4e644 100644
--- a/ProjectSourceCode/src/views/pages/clubs-page.hbs
+++ b/ProjectSourceCode/src/views/pages/clubs-page.hbs
@@ -2,9 +2,9 @@
 
     <!-- Container on Top containing Club Information -->
     <div id="club-information-container" class="information-container">
-        <img id="league-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
-        <h1 id="league-title">{{club.name}}</h2>
-        <img id="league-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
+        <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">
     </div>
 
     <div id="club-page-contents-container" class="information-container">
diff --git a/ProjectSourceCode/src/views/partials/head.hbs b/ProjectSourceCode/src/views/partials/head.hbs
index 9764758..1905c75 100644
--- a/ProjectSourceCode/src/views/partials/head.hbs
+++ b/ProjectSourceCode/src/views/partials/head.hbs
@@ -4,6 +4,7 @@
   <!-- Set the Content-Security-Policy header to allow inline scripts -->
   <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://code.jquery.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com;">
 
+  <!--------------- CSS Stylesheets ---------------->
 
   <!-- CSS on All Pages -->
   <link rel="stylesheet" type="text/css" href="/css/all-pages-style.css">
@@ -27,10 +28,10 @@
   <link rel="stylesheet" type="text/css" href="/css/league-pages/league-table.css">
   <link rel="stylesheet" type="text/css" href="/css/league-pages/league-top-scorers.css">
 
-  <!-- League Page Stylesheets -->
+  <!-- Club Page Stylesheets -->
   <link rel="stylesheet" type="text/css" href="/css/club-pages/club-page.css">
-  <link rel="stylesheet" type="text/css" href="/css/club-pages/players-table.css">
-  <link rel="stylesheet" type="text/css" href="/css/club-pages/club-top-scorers.css">
+  <link rel="stylesheet" type="text/css" href="/css/club-pages/club-players-and-stats-card.css">
+  <link rel="stylesheet" type="text/css" href="/css/club-pages/club-information-card.css">
 
   <title>Group 6 Final Project</title>