This commit is contained in:
youri.apell@gmail.com
2022-11-01 15:08:52 +01:00
9 changed files with 74 additions and 1058 deletions

View File

@@ -1,3 +0,0 @@
{
"CurrentProjectSetting": null
}

View File

@@ -1,6 +0,0 @@
{
"ExpandedNodes": [
""
],
"PreviewInSolutionExplorer": false
}

View File

Binary file not shown.

View File

File diff suppressed because it is too large Load Diff

View File

Binary file not shown.

View File

Binary file not shown.

View File

@@ -62,6 +62,32 @@
<div class="maintable"> <div class="maintable">
<div class="leftcol column"> <div class="leftcol column">
<h1 class="colheader">LATEST CLUCCS</h1> <h1 class="colheader">LATEST CLUCCS</h1>
<div class="tweetcontainer">
<div class="tweet">
<img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
<div class="tweet-content">
<div class="tweet-name">
<span class="tweet-nickname">Tim Wijma</span>
<span class="tweet-username">@timwijma</span>
</div>
<span class="tweet-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus velit maiores non deserunt adipisci dicta quam nobis ad. Iste, unde?</span>
<div class="tweet-interactions">
<div class="tweet-interaction tweet-likes">
<span class="material-symbols-outlined">favorite</span>
<span>20</span>
</div>
<div class="tweet-interaction tweet-retweets">
<span class="material-symbols-outlined">repeat</span>
<span>20</span>
</div>
<div class="tweet-interaction tweet-replies">
<span class="material-symbols-outlined">chat_bubble</span>
<span>20</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="centercol column"> <div class="centercol column">
<h1 class="colheader">FILTERED CLUCCS</h1> <h1 class="colheader">FILTERED CLUCCS</h1>

View File

@@ -25,30 +25,30 @@ function getCSSVariable(name) {
function tweetCell(tweet, parent) { function tweetCell(tweet, parent) {
var cell = document.createElement("div"); var cell = document.createElement("div");
cell.innerHTML = cell.innerHTML =
'<div class="tweet">'+ `<div class="tweet">
'<img src="' + tweet.user.profile_image_url + '" alt="" class="tweet-profilepicture">' + <img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture">
'<div class="tweet-content">' + <div class="tweet-content">
'<div class="tweet-name">'+ <div class="tweet-name">
'<span class="tweet-nickname">'+tweet.user.name+' </span>'+ <span class="tweet-nickname">${tweet.user.name}</span>
'<span class="tweet-username">@'+tweet.user.screen_name+'</span>'+ <span class="tweet-username">@${tweet.user.screen_name}</span>
'</div>'+ </div>
'<span class="tweet-text">'+tweet.text+'</span>'+ <span class="tweet-text">${tweet.text}</span>
'<div class="tweet-interactions">'+ <div class="tweet-interactions">
'<div class="tweet-interaction tweet-likes">'+ <div class="tweet-interaction tweet-likes">
'<span class="material-symbols-outlined">favorite</span>'+ <span class="material-symbols-outlined">favorite</span>
'<span>'+tweet.favorite_count+'</span>'+ <span>${tweet.favorite_count}</span>
'</div>'+ </div>
'<div class="tweet-interaction tweet-retweets">'+ <div class="tweet-interaction tweet-retweets">
'<span class="material-symbols-outlined">repeat</span>'+ <span class="material-symbols-outlined">repeat</span>
'<span>'+tweet.retweet_count+'</span>'+ <span>${tweet.retweet_count}</span>
'</div>'+ </div>
'<div class="tweet-interaction tweet-replies">'+ <div class="tweet-interaction tweet-replies">
'<span class="material-symbols-outlined">chat_bubble</span>'+ <span class="material-symbols-outlined">chat_bubble</span>
'<span>'+tweet.reply_count+'</span>'+ <span>${tweet.reply_count}</span>
'</div>'+ </div>
'</div>'+ </div>
'</div>'+ </div>
'</div>'; </div>`
parent.append(cell); parent.append(cell);
} }

View File

@@ -88,19 +88,43 @@ body {
.tweet { .tweet {
display: flex; display: flex;
background-color: var(--main-dark);
border-radius: 16px;
padding: 16px;
} }
.tweet-profilepicture { .tweet-profilepicture {
border-radius: 100%; border-radius: 100%;
width: 60px;
height: 60px;
/* padding: 8px; */
}
.tweet-content {
padding-left: 16px;
} }
.tweet-interactions { .tweet-interactions {
display: flex; display: flex;
margin-top: 8px;
} }
.tweet-interaction { .tweet-interaction {
display: flex; display: flex;
align-items: center; 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 { .filters-search input {