Merge pull request #28 from olinpin/ph

branch merge

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/js/code.js

@@ -24,16 +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">
+                <div>
                     <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>
-                <!-- add tweet date called created_at-->
+                </div>
-                <p class="tweet-date">${tweet.created_at}</p>
+                <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/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%;