From c6ffc8f3ffe8268cdf076bcee59caa1ba564d252 Mon Sep 17 00:00:00 2001
From: Tim Wijma <tim.wijma@gmail.com>
Date: Mon, 31 Oct 2022 20:36:08 +0100
Subject: [PATCH] logo, sports bar, jquery event handler

---
 dashboard_static/index.html       |  52 ++++++++++++++++----
 dashboard_static/js/code.js       |  23 +++++++++
 dashboard_static/js/connection.js |   5 ++
 dashboard_static/media/logo.png   | Bin 0 -> 4028 bytes
 dashboard_static/style/style.css  |  78 +++++++++++++++++++++++++++++-
 5 files changed, 147 insertions(+), 11 deletions(-)
 create mode 100644 dashboard_static/js/connection.js
 create mode 100644 dashboard_static/media/logo.png
diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index 8b2419a..6f15a61 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -6,22 +6,52 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Twitter sports dashboard</title>
     <link rel="stylesheet" href="./style/style.css">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <script src="./js/code.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
 </head>
 <body>
     <div class="container">
         <div class="header">
+            <div class="logo">
+                <img src="./media/logo.png" alt="">
+                <span class="header-title">Cluccer</span>
+            </div>
             <div class="sports">
-                <div class="sport baseball"></div>
-                <div class="sport basketball"></div>
-                <div class="sport volleyball"></div>
-                <div class="sport tennis"></div>
-                <div class="sport cricket"></div>
-                <div class="sport soccer"></div>
-                <div class="sport football"></div>
-                <div class="sport rugby"></div>
+                <div class="sport baseball">
+                    <span class="material-icons-outlined">sports_baseball</span>
+                    <span class="sport-name">Baseball</span>
+                </div>
+                <div class="sport basketball">
+                    <span class="material-icons-outlined">sports_basketball</span>
+                    <span class="sport-name">Basketball</span>
+                </div>
+                <div class="sport volleyball">
+                    <span class="material-icons-outlined">sports_volleyball</span>
+                    <span class="sport-name">Volleyball</span>
+                </div>
+                <div class="sport tennis">
+                    <span class="material-icons-outlined">sports_tennis</span>
+                    <span class="sport-name">Tennis</span>
+                </div>
+                <div class="sport cricket">
+                    <span class="material-icons-outlined">sports_cricket</span>
+                    <span class="sport-name">Cricket</span>
+                </div>
+                <div class="sport soccer">
+                    <span class="material-icons-outlined">sports_soccer</span>
+                    <span class="sport-name">Soccer</span>
+                </div>
+                <div class="sport football">
+                    <span class="material-icons-outlined">sports_football</span>
+                    <span class="sport-name">Football</span>
+                </div>
+                <div class="sport rugby">
+                    <span class="material-icons-outlined">sports_rugby</span>
+                    <span class="sport-name">Rugby</span>
+                </div>
             </div>
         </div>
         <div class="main">
@@ -30,6 +60,8 @@
             <div class="rightcol"></div>
         </div> 
     </div>
+    <script src="./js/code.js"></script>
+    <script src="./js/connection.js"></script>
 </body>
 <!-- <script>
 // create a rolling chart block
diff --git a/dashboard_static/js/code.js b/dashboard_static/js/code.js
index e69de29..d2959bf 100644
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -0,0 +1,23 @@
+let root = document.documentElement // Used for css variables
+
+let selectedSports = []
+
+$(".sport").on("click", function() {
+    $(this).toggleClass("selected")
+
+    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name
+
+    
+    let index = selectedSports.indexOf(sportName)
+    if (index > -1 ) {  // If element is found in array
+        selectedSports.splice(index, 1) // Remove sport at index
+    } else {
+        selectedSports.push(sportName)  // Add sport to array
+    }
+
+    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
+})
+
+function getCSSVariable(name) {
+    return getComputedStyle(root).getPropertyValue(name)
+}
\ No newline at end of file
diff --git a/dashboard_static/js/connection.js b/dashboard_static/js/connection.js
new file mode 100644
index 0000000..a9f1f0f
--- /dev/null
+++ b/dashboard_static/js/connection.js
@@ -0,0 +1,5 @@
+// Selected = is clicked sport selected or not, BOOL
+// Sports = all selected sports, ARRAY
+$(".sport").on("selected", function(e, selected, sports) {
+    console.log(selected, sports);
+})
\ No newline at end of file
diff --git a/dashboard_static/media/logo.png b/dashboard_static/media/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd8edd540e331a0223cd21761d49ea371429cb91
GIT binary patch
literal 4028
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

literal 0
HcmV?d00001

diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index 6b545ed..e4c11d5 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -1,11 +1,87 @@
+:root {
+	--main-bg: #292929;
+	--main-light: #ffffff;
+	--main-medium-dark: #1E1E1E;
+	--main-dark: #000000;
+	--secondary: #1D9BF0;
+}
+
 body, html, .container {
 	width: 100%;
 	height: 100%;
 	margin: 0;
 	padding: 0;
+	overflow: auto;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: 'Roboto', sans-serif;
+	font-weight: 400;
 }
 
 .container {
-	background-color: #292929;
+	background-color: var(--main-bg);
 	color: white;
+	padding: 16px 32px;
+}
+
+.header, .sports, .logo {
+	display: flex;
+	flex-direction: row;
+}
+
+.header {
+	align-items: center;
+	user-select: none;
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	padding: 16px;
+	background-color: var(--main-medium-dark);
+	border-radius: 16px;
+}
+
+.logo img {
+	height: 40px;
+}
+
+.logo span {
+	font-size: 40px;
+	font-weight: 500;
+	margin: 0 8px;
+}
+
+.sports {
+	margin-left: 16px;
+	overflow-x: auto;
+}
+
+.sport {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	height: 30px;
+	padding: 4px;
+	margin-right: 8px;
+	border: 1px solid white;
+	border-radius: 100px;
+	cursor: pointer;
+}
+
+.sport .material-icons-outlined {
+	font-size: 32px;
+}
+
+.sport-name {
+	font-weight: 500;
+	font-size: 24px;
+	margin: 0 6px 0 4px;
+}
+
+.selected {
+	color: var(--secondary);
+	border-color: var(--secondary);
 }
\ No newline at end of file
