Merged from main

2022-11-02 12:10:05 +01:00
parent abb8c77e3f abb93024a2
commit 73182cb41a
8 changed files with 109 additions and 130 deletions
--- a/pycache/dashboard.cpython-310.pyc
+++ b/pycache/dashboard.cpython-310.pyc
--- 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,16 +90,18 @@
                    </div>
                </div>
                <div class="centercol column">
-                    <h1 class="colheader">FILTERED CLUCCS</h1>
+                    <span class="colheader">Filtered Cluccs</span>
                </div>
-                <div class="searchcontainer column">
-                    <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
-                    <button class = "button">SORT BY</button>
-                    <button class = "button">BLOCKED WORDS</button>
-                    <button class = "button">POPULARITY FILTER</button>
-                </div>
-                <div class="popchart column">
-                    <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                <div class="rightcol column">
+                    <div class="searchcontainer column">
+                        <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
+                        <button class = "button">SORT BY</button>
+                        <button class = "button">BLOCKED WORDS</button>
+                        <button class = "button">POPULARITY FILTER</button>
+                    </div>
+                    <div class="popchart column">
+                        <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                    </div>
                </div>
            </div>
        </div> 
@@ -113,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({
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -16,13 +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 tweetCell(tweet, parent) {
+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) {
    var cell = document.createElement("div");
    cell.innerHTML =
    `<div class="tweet">
@@ -49,61 +73,7 @@ function tweetCell(tweet, parent) {
            </div>
        </div>
    </div>`
-    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"));
+    return cell
 }

 function filter(tweets, bannedWords=[], searchWords=[], likesTop=null, likesBottom=null, retweetsTop=null, retweetsBottom=null, repliesTop=null, repliesBottom=null) {
--- a/dashboard_static/lib/tweets.js
+++ b/dashboard_static/lib/tweets.js
@@ -68,15 +68,11 @@ var process_entities = function(message, entities) {

 block.fn.tweets = function(config) {
    var options = $.extend({
-        memory: 20
+        memory: 100
    }, config);

-    // create the necessary HTML in the block container
-    this.$element.append('<ol class="tweet-list stream-items"></ol>');
-
    // store list for later
-    var $list = this.$element.find('ol');
-
+    var $list = $("div.tweetcontainer");

    // register default handler for handling tweet data
    this.actions(function(e, tweet){
@@ -89,41 +85,7 @@ block.fn.tweets = function(config) {
        }
        window.sessionStorage.setItem('tweets', JSON.stringify(tweets));

-        var $item = $('<li class="stream-item"></li>');
-
-        var $tweet = $('<div class="tweet"></div>');
-        var $content = $('<div class="content"></div>');
-        var $header = $('<div class="stream-item-header"></div>');
-
-        // Build a tag image and header:
-        var $account = $('<a class="account-group"></a>');
-        $account.attr("href", "http://twitter.com/" + tweet.user.screen_name);
-
-        var $avatar = $("<img>").addClass("avatar");
-        $avatar.attr("src", tweet.user.profile_image_url);
-        $account.append($avatar);
-        $account.append($('<strong class="fullname">' + tweet.user.name + '</strong>'));
-        $account.append($('<span>&nbsp;</span>'));
-        $account.append($('<span class="username"><s>@</s><b>' + tweet.user.screen_name + '</b></span>'));
-        $header.append($account);
-
-        // Build timestamp:
-        var $time = $('<small class="time"></small>');
-        $time.append($('<span>' + tweet.created_at + '</span>'));
-
-        $header.append($time);
-        $content.append($header);
-
-        // Build contents:
-        var text = process_entities(tweet.text, tweet.entities);
-        var $text = $('<p class="tweet-text">' + text + '</p>');
-        $content.append($text);
-
-        // Build outer structure of containing divs:
-        $tweet.append($content);
-        $item.append($tweet);
-        
-        // place new tweet in front of list 
+        var $item = tweetCell(tweet)
        $list.prepend($item);

        // remove stale tweets
--- a/dashboard_static/style/responsive.css
+++ 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 */
--- 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,51 +149,61 @@ 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;
 }

 .searchcontainer {
 	background-color: blue;
-	height: 400px;
+	/* height: 400px; */
 }

 .popchart {
 	background-color: rgba(255, 0, 255, 0.344);
-	height: 400px;
+	/* height: 400px; */
 }

 .colheader {
+	display: block;
+	font-weight: 500;
+	font-size: 40px;
+	padding: 8px 16px;
 	font-size: 38px;
 	padding-left: 30px;
 }

-.searchbar {
-	width: 500px;
-}
 .searchbar, .button {
 	font-weight: bold;
 	font-size: 32px;
@@ -205,6 +217,6 @@ body {
 	border: none;
 }

-.button:hover {
+/* .button:hover {
 	background-color: ;
-}
+} */
--- a/eca/pycache/arff.cpython-310.pyc
+++ b/eca/pycache/arff.cpython-310.pyc
--- a/eca/pycache/generators.cpython-310.pyc
+++ b/eca/pycache/generators.cpython-310.pyc