LATEST CLUCCS
+
+                        
                 
+                             +
+                            
+                     +
+                            
+                                
+                        
+                                    Tim Wijma
+                                    @timwijma
+                                
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus velit maiores non deserunt adipisci dicta quam nobis ad. Iste, unde?
+                                
+                                    
+                            
+                                        favorite
+                                        20
+                                    
+                                    
+                                        repeat
+                                        20
+                                    
+                                    
+                                        chat_bubble
+                                        20
+                                    
+                                FILTERED CLUCCS
diff --git a/dashboard_static/js/code.js b/dashboard_static/js/code.js index 6f5074e..2fea0fc 100644 --- a/dashboard_static/js/code.js +++ b/dashboard_static/js/code.js @@ -25,30 +25,30 @@ function getCSSVariable(name) { function tweetCell(tweet, parent) { var cell = document.createElement("div"); cell.innerHTML = - ''+
-            ' ' +
-            '
' +
-            '
';
+    `' +
-                '
'+
-        ''+
-                    ''+tweet.user.name+' '+
-                    '@'+tweet.user.screen_name+''+
-                '
'+
-                ''+tweet.text+''+
-                ''+
-                    '
'+
-            ''+
-                        'favorite'+
-                        ''+tweet.favorite_count+''+
-                    '
'+
-                    ''+
-                        'repeat'+
-                        ''+tweet.retweet_count+''+
-                    '
'+
-                    ''+
-                        'chat_bubble'+
-                        ''+tweet.reply_count+''+
-                    '
'+
-                '
+         +
+        
`
     parent.append(cell);
 }
 
diff --git a/dashboard_static/js/connection.js b/dashboard_static/js/connection.js
index a9f1f0f..8d26743 100644
--- a/dashboard_static/js/connection.js
+++ b/dashboard_static/js/connection.js
@@ -2,4 +2,7 @@
 // Sports = all selected sports, ARRAY
 $(".sport").on("selected", function(e, selected, sports) {
     console.log(selected, sports);
-})
\ No newline at end of file
+})
+window.addEventListener('DOMContentLoaded', (event) => {
+    window.sessionStorage.setItem('tweets', JSON.stringify([]));
+});
\ No newline at end of file
diff --git a/dashboard_static/lib/tweets.js b/dashboard_static/lib/tweets.js
index caae015..6cc4642 100644
--- a/dashboard_static/lib/tweets.js
+++ b/dashboard_static/lib/tweets.js
@@ -80,6 +80,14 @@ block.fn.tweets = function(config) {
 
     // register default handler for handling tweet data
     this.actions(function(e, tweet){
+        tweets = window.sessionStorage.getItem('tweets');
+        tweets = JSON.parse(tweets);
+        tweets.push(tweet);
+        if(tweets.length >= options.memory) {
+            tweets.shift();
+        }
+        window.sessionStorage.setItem('tweets', JSON.stringify(tweets));
+
         var $item = $('');
 
         var $tweet = $('');
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index bc3074b..a33777c 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -88,19 +88,43 @@ body {
 
 .tweet {
 	display: flex;
+	background-color: var(--main-dark);
+	border-radius: 16px;
+	padding: 16px;
 }
 
 .tweet-profilepicture {
 	border-radius: 100%;
+	width: 60px;
+	height: 60px;
+	/* padding: 8px; */
+}
+
+.tweet-content {
+	padding-left: 16px;
 }
 
 .tweet-interactions {
 	display: flex;
+	margin-top: 8px;
 }
 
 .tweet-interaction {
 	display: flex;
 	align-items: center;
+	margin-right: 32px;
+}
+
+.tweet-interaction .material-symbols-outlined {
+	margin-right: 4px;
+}
+
+.tweet-nickname {
+	font-weight: bold;
+}
+
+.tweet-username {
+	opacity: 0.8;
 }
 
 .filters-search input {
 
+            
+    
+                ${tweet.user.name}
+                @${tweet.user.screen_name}
+            
+            ${tweet.text}
+            
+                
+        
+                    favorite
+                    ${tweet.favorite_count}
+                
+                
+                    repeat
+                    ${tweet.retweet_count}
+                
+                
+                    chat_bubble
+                    ${tweet.reply_count}
+                
+