merged from main

dashboard.py

@@ -13,7 +13,7 @@ root_content_path = 'dashboard_static'
 # the action will be called with the context and the event
 @event('init')
 def setup(ctx, e):
-    start_offline_tweets('sports1.txt', event_name="tweet", time_factor=0.1)
+    start_offline_tweets('sports1.txt', event_name="tweet", time_factor=0.01)
     ctx.count = 0
     # fire('sample', {'previous': 0.0})
 

dashboard_static/index.html

@@ -99,15 +99,17 @@
                     <div class="searchcontainer column">
                         <input class="searchbar" onchange="updateSearched(this.value)" type="text" placeholder="Search Cluccs">
                         <input class="blockedwords" onchange="updateBlocked(this.value)" type="text" placeholder="Blocked words (separated by comma)">
-                        <div class="button sort-btn">
+                        <div class="sort-by">
-                            <span class="sortby">Sort By <span class="material-symbols-outlined">arrow_drop_down</span></span>
+                            <span class="sort-by-title">Sort By</span> 
                             <div class="sort-dropdown">
                                 <ul class="sort-dropdown-list">
+                                    <li class="current-sort">Time</li>
                                     <li onclick="updateSort('time')">Time</li>
                                     <li onclick="updateSort('likes')">Likes</li>
                                     <li onclick="updateSort('retweets')">Retweets</li>
                                     <li onclick="updateSort('replies')">Replies</li>
                                 </ul>
+                                <span class="material-symbols-outlined sort-btn">arrow_drop_down</span>
                             </div>
                         </div>
                         <span class="material-symbols-outlined order-btn">arrow_downward</span>

dashboard_static/js/code.js

@@ -24,14 +24,19 @@ function showFeeds() {
 }
 
 function tweetCell(tweet) {
+    const date = new Date(tweet.created_at);
+    console.log(new Intl.DateTimeFormat('en-GB').format(date));
     var cell = document.createElement("div");
     cell.innerHTML =
     `<div class="tweet">
         <a href ="https://www.twitter.com/${tweet.user.screen_name}"><img src="${tweet.user.profile_image_url}" onerror="this.src='media/logo.png';" class="tweet-profilepicture"></a>
         <div class="tweet-content"> 
             <div class="tweet-name">
-                <a class="tweet-nickname" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">${tweet.user.name}</a>
+                <div>
-                <a class="tweet-username" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">@${tweet.user.screen_name}</a>
+                    <a class="tweet-nickname" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">${tweet.user.name}</a>
+                    <a class="tweet-username" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">@${tweet.user.screen_name}</a>
+                </div>
+                <span class="tweet-date"><em>${date.getHours()}:${date.getMinutes()}</em></span> 
             </div>
             <span class="tweet-text">${tweet.text}</span>
             <div class="tweet-interactions">

dashboard_static/js/events.js

@@ -38,15 +38,6 @@ $(window).on("load", function() {
     showFeeds()
 })
 
-$(".sortby").on("click", function() {
-    $(".sort-dropdown").toggle()
-    // $(".sort-btn").toggleClass("radius-bottom")
-}) 
-
-$(".sort-dropdown-list li").on("click", function() {
-    $(".sort-dropdown").toggle()
-})
-
 let root = document.querySelector(":root")
 
 $(".logo").on("click", function() {
@@ -89,6 +80,19 @@ $(window).on("filter", function() {
     }
 })
 
+$(".current-sort").on("click", function() {
+    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
+}) 
+
+$(".sort-btn").on("click", function() {
+    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
+}) 
+
+$(".sort-dropdown-list li:not(:first-of-type)").on("click", function() {
+    $(".sort-dropdown-list li:not(:first-of-type)").toggle()
+    $(".current-sort").html($(this).html())
+})
+
 
 $(".order-btn").on("click", function() {
     if($(this).html() == "arrow_downward") {    // Descending to ascending

dashboard_static/style/style.css

@@ -93,6 +93,7 @@ body {
 
 .tweet {
 	display: flex;
+	gap: 10px;
 	background-color: var(--tweet-color);
 	border-radius: 16px;
 	padding: 16px;
@@ -108,6 +109,17 @@ body {
 
 .tweet-content {
 	padding-left: 16px;
+	width: 100%;
+}
+
+.tweet-name {
+	display: flex;
+	gap: 1.5%;
+	justify-content: space-between;
+}
+
+.tweet-date {
+	align-self: flex-end;
 }
 
 .tweet-interactions {
@@ -150,6 +162,13 @@ body {
 	opacity: 0.8;
 }
 
+.tweet-date {
+	color: var(--main-light);
+	text-decoration: none;
+	justify-self: flex-end;
+	opacity: 0.8;
+}
+
 .filters-search input {
 	height: 28px;
 	width: 100%;
@@ -248,33 +267,57 @@ body {
 	user-select: none;
 }
 
-.sort-btn {
+.sort-by {
 	user-select: none;
-	position: relative;
+	display: flex;
+	padding: 8px;
+}
+
+.sort-by-title {
+	font-size: 24px;
+	font-weight: 500;
+	margin-right: 8px;
 }
 
 .sort-dropdown {
-	display: none;
+	display: flex;
+	align-items: flex-start;
+	position: relative;
 }
 
 .sort-dropdown-list {
 	/* position: absolute; */
-	width: 100%;
 	list-style-type: none;
     padding: 0;
     margin: 0;
-	margin-left: -8px;
+	background-color: white;
-	background-color: var(--main-light);
+	width: 150px;	
-	border-radius: 0 0 16px 16px;
+	border-radius: 16px;
+}
+
+.material-symbols-outlined.sort-btn {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	color: black;
+	font-size: 26px;
+}
+
+.sort-dropdown-list li:not(:first-of-type) {
+	display: none;
+}
+
+.sort-dropdown-list li:not(:first-of-type):hover {
+	background-color: rgb(215, 215, 215);
 }
 
 .sort-dropdown-list li {
+	color: #1E1E1E;
 	font-weight: 500;
 	font-size: 22px;
 	padding: 0 8px;
 }
 
-.radius-bottom {
+.current-sort {
-	border-bottom-left-radius: 16px;
+	line-height: 36px;
-	border-bottom-right-radius: 16px;
+}
-}