From 713c401ee680871baa8a1b25b7e05904bb2b5b84 Mon Sep 17 00:00:00 2001
From: Tim Wijma <tim.wijma@gmail.com>
Date: Wed, 2 Nov 2022 11:38:04 +0100
Subject: [PATCH 1/2] css responsive

---
 dashboard_static/index.html           |  16 ++--
 dashboard_static/js/code.js           | 126 +++++++++++++++-----------
 dashboard_static/style/responsive.css |  33 +++++++
 dashboard_static/style/style.css      |  41 ++++++---
 4 files changed, 144 insertions(+), 72 deletions(-)
 create mode 100644 dashboard_static/style/responsive.css
diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index b37911b..ba93174 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Twitter sports dashboard</title>
     <link rel="stylesheet" href="./style/style.css">
+    <link rel="stylesheet" href="./style/responsive.css">
     <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">
@@ -13,10 +14,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
     <link rel="icon" type="image/x-icon" href="./media/logo.png">
-    
 </head>
 <body>
-    <div id="tweet" style="height: 200px;"></div>
+    <!-- <div id="tweet" style="height: 200px;"></div> -->
     <div class="container">
         <div class="header">
             <div class="logo">
@@ -61,7 +61,7 @@
         <div class="main">
             <div class="maintable">
                 <div class="leftcol column">
-                    <h1 class="colheader">LATEST CLUCCS</h1>
+                    <span class="colheader">Latest Cluccs</span>
                     <div class="tweetcontainer">
                         <div class="tweet">
                             <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
@@ -90,11 +90,13 @@
                     </div>
                 </div>
                 <div class="centercol column">
-                    <h1 class="colheader">FILTERED CLUCCS</h1>
+                    <span class="colheader">Filtered Cluccs</span>
                 </div>
-                <div class="searchbar column"></div>
-                <div class="popchart column">
-                    <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                <div class="rightcol column">
+                    <div class="searchbar column"></div>
+                    <div class="popchart column">
+                        <span class="colheader chartheader">Sports Popularity Chart</span>
+                    </div>
                 </div>
             </div>
         </div> 
diff --git a/dashboard_static/js/code.js b/dashboard_static/js/code.js
index 2fea0fc..7ed572d 100644
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -16,12 +16,37 @@ $(".sport").on("click", function() {
     }
 
     $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
+    showFeeds()
 })
 
 function getCSSVariable(name) {
     return getComputedStyle(root).getPropertyValue(name)
 }
 
+
+function showFeeds() {
+    if ($(window).width() < 1280) {
+        if (selectedSports.length === 0) {
+            $(".leftcol").show()
+            $(".centercol").hide()
+        } else {
+            $(".leftcol").hide()
+            $(".centercol").show()
+        }
+    } else {
+        $(".leftcol").show()
+        $(".centercol").show()
+    }
+}
+
+$(window).on("resize", function(){
+    showFeeds()
+});
+
+$(window).on("load", function() {
+    showFeeds()
+})
+
 function tweetCell(tweet, parent) {
     var cell = document.createElement("div");
     cell.innerHTML =
@@ -52,56 +77,55 @@ function tweetCell(tweet, parent) {
     parent.append(cell);
 }
 
-
-var atweet = {
-    "created_at": "Sat Nov 16 12:51:41 +0000 2019",
-    "text": "@BobGreenburg @ONeill_Coffee Congrats to the excellent football program at Wilmington. One classy organization!",
-    "source": "<a href=\"http:\/\/twitter.com\/download\/iphone\" rel=\"nofollow\">Twitter for iPhone<\/a>",
-    "user": {
-        "name": "Express Youngstown",
-        "screen_name": "ExpressProsYO",
-        "url": "http:\/\/apply.expresspros.com\/",
-        "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/775167844921188353\/fWquHsOK_normal.jpg",
-    },
-    "quote_count": 0,
-    "reply_count": 0,
-    "retweet_count": 0,
-    "favorite_count": 0,
-    "entities": {
-        "hashtags": [
-
-        ],
-        "urls": [
-
-        ],
-        "user_mentions": [
-            {
-                "screen_name": "BobGreenburg",
-                "name": "Bob Greenburg",
-                "id": 483881032,
-                "id_str": "483881032",
-                "indices": [
-                    0,
-                    13
-                ]
-            },
-            {
-                "screen_name": "ONeill_Coffee",
-                "name": "O'NeillCoffeeCompany",
-                "id": 2804543925,
-                "id_str": "2804543925",
-                "indices": [
-                    14,
-                    28
-                ]
-            }
-        ],
-        "symbols": [
-
-        ]
-    },
-}
-
 for (let i = 0; i < 2; i++) {
     tweetCell(atweet, $(".leftcol"));
-}
\ No newline at end of file
+}
+
+    var atweet = {
+        "created_at": "Sat Nov 16 12:51:41 +0000 2019",
+        "text": "@BobGreenburg @ONeill_Coffee Congrats to the excellent football program at Wilmington. One classy organization!",
+        "source": "<a href=\"http:\/\/twitter.com\/download\/iphone\" rel=\"nofollow\">Twitter for iPhone<\/a>",
+        "user": {
+            "name": "Express Youngstown",
+            "screen_name": "ExpressProsYO",
+            "url": "http:\/\/apply.expresspros.com\/",
+            "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/775167844921188353\/fWquHsOK_normal.jpg",
+        },
+        "quote_count": 0,
+        "reply_count": 0,
+        "retweet_count": 0,
+        "favorite_count": 0,
+        "entities": {
+            "hashtags": [
+    
+            ],
+            "urls": [
+    
+            ],
+            "user_mentions": [
+                {
+                    "screen_name": "BobGreenburg",
+                    "name": "Bob Greenburg",
+                    "id": 483881032,
+                    "id_str": "483881032",
+                    "indices": [
+                        0,
+                        13
+                    ]
+                },
+                {
+                    "screen_name": "ONeill_Coffee",
+                    "name": "O'NeillCoffeeCompany",
+                    "id": 2804543925,
+                    "id_str": "2804543925",
+                    "indices": [
+                        14,
+                        28
+                    ]
+                }
+            ],
+            "symbols": [
+    
+            ]
+        },
+    }
\ No newline at end of file
diff --git a/dashboard_static/style/responsive.css b/dashboard_static/style/responsive.css
new file mode 100644
index 0000000..379fbba
--- /dev/null
+++ b/dashboard_static/style/responsive.css
@@ -0,0 +1,33 @@
+@media only screen and (max-width: 1280px) {
+    .maintable {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 32px;
+    }
+}
+
+
+@media only screen and (max-width: 850px) {
+    .maintable {
+        grid-template-columns: 1fr;
+    }
+    .header-title {
+        display: none;
+    }
+    .sport-name {
+        font-size: 20px;
+    }
+    .column {
+        grid-row: unset;
+    }
+    .colheader {
+        font-size: 32px;
+    }
+
+}
+
+
+
+
+
+  /* 360x640 414x896
+  601x962 1280x800 */
\ No newline at end of file
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index 5c3f4af..60509f7 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -24,6 +24,8 @@ body {
 	background-color: var(--main-bg);
 	color: white;
 	padding: 16px 48px;
+	display: flex;
+	flex-direction: column;
 }
 
 .header, .sports, .logo {
@@ -45,11 +47,11 @@ body {
 }
 
 .logo img {
-	height: 40px;
+	height: 36px;
 }
 
 .logo span {
-	font-size: 40px;
+	font-size: 36px;
 	font-weight: 500;
 	margin: 0 8px;
 }
@@ -112,7 +114,7 @@ body {
 .tweet-interaction {
 	display: flex;
 	align-items: center;
-	margin-right: 32px;
+	margin-right: 24px;
 }
 
 .tweet-interaction .material-symbols-outlined {
@@ -147,44 +149,55 @@ body {
 /* Three main columns; CSS Grid */
 .maintable {
 	/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
-	display: grid;
 	width: 100%;
+	height: 100%;
+	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr;
-
-	gap: 48px;
+	grid-template-rows: 1fr;
+	grid-gap: 48px;
 	/* margin:20px; */
 }
 
 .main {
-	margin-top: 48px;
+	margin-top: 32px;
+	height: 100%;
 }
 
 .column {
 	border-radius: 16px;
 }
 
+.leftcol, .centercol {
+	overflow-y: auto;
+	grid-row: 1/ -1;
+}
+
 .leftcol {
 	background-color: red;
-	grid-row: 1/ -1;
 }
 
 .centercol {
 	background-color: green;
-	grid-row: 1/ -1;
+}
+
+.rightcol {
+	display: flex;
+    flex-direction: column;
 }
 
 .searchbar {
 	background-color: blue;
-	height: 400px;
+	/* height: 400px; */
 }
 
 .popchart {
 	background-color: rgba(255, 0, 255, 0.344);
-	height: 400px;
+	/* height: 400px; */
 }
 
 .colheader {
-	font-size: 38px;
-	padding-left: 30px;
+	display: block;
+	font-weight: 500;
+	font-size: 40px;
+	padding: 8px 16px;
 }
\ No newline at end of file

From 221ae7631ea389f6069854ee5fe8144b48522c01 Mon Sep 17 00:00:00 2001
From: Tim Wijma <tim.wijma@gmail.com>
Date: Wed, 2 Nov 2022 11:55:42 +0100
Subject: [PATCH 2/2] responsive css

---
 dashboard_static/index.html | 8 ++++----
 dashboard_static/js/code.js | 5 +----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index e2b713e..12a5c4c 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -115,10 +115,10 @@
     <script src="./js/code.js"></script>
     <script src="./js/connection.js"></script>
     <script>
-        block("#tweet").tweets({
-            memory: 20
-        });
-        events.connect("tweet", "#tweet");
+        // block("#tweet").tweets({
+        //     memory: 20
+        // });
+        // events.connect("tweet", "#tweet");
         
         // // create a rolling chart block
         // block('#graph').rolling_chart({
diff --git a/dashboard_static/js/code.js b/dashboard_static/js/code.js
index 24e6fe2..20a8484 100644
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -74,7 +74,4 @@ function tweetCell(tweet) {
         </div>
     </div>`
     return cell
-}
-
-$(document).on('tweet', console.log(tweet));
-    
+}
\ No newline at end of file
