Display unavailable tweets

This commit is contained in:
Zed 2019-06-26 21:06:42 +02:00
parent d052ff538c
commit 547cd635bf
4 changed files with 30 additions and 11 deletions

View file

@ -64,6 +64,7 @@ a:hover {
.status-body { .status-body {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
margin-left: 58px;
} }
.media-heading { .media-heading {
@ -266,10 +267,6 @@ nav {
flex-basis: 300px; flex-basis: 300px;
} }
.status-body {
margin-left: 58px;
}
.avatar { .avatar {
float: left; float: left;
margin-top: 3px; margin-top: 3px;
@ -477,16 +474,22 @@ nav {
margin-bottom: 10px; margin-bottom: 10px;
} }
.after-tweet .status-el::before, .before-tweet .status-el::before, .thread .status-el::before { .thread-line .status-el::before {
background: #8a3731; background: #8a3731;
content: ''; content: '';
position: relative; position: relative;
width: 3px; width: 3px;
min-width: 3px;
left: 26px; left: 26px;
border-radius: 2px;
margin-left: -3px;
top: 56px; top: 56px;
margin-bottom: 37px; margin-bottom: 37px;
margin-left: -3px; }
border-radius: 2px;
.thread-line .unavailable::before {
top: 40px;
margin-bottom: 19px;
} }
.thread-last .status-el::before { .thread-last .status-el::before {
@ -633,6 +636,15 @@ video {
font-size: 20px; font-size: 20px;
} }
.unavailable-box {
width: 100%;
height: 100%;
padding: 8px;
border: solid 1px #404040;
border-radius: 10px;
background-color: #121212;
}
.quote { .quote {
margin-top: 10px; margin-top: 10px;
border: solid 1px #404040; border: solid 1px #404040;

View file

@ -73,6 +73,7 @@ type
gif*: Option[Gif] gif*: Option[Gif]
video*: Option[Video] video*: Option[Video]
photos*: seq[string] photos*: seq[string]
available*: bool
Tweets* = seq[Tweet] Tweets* = seq[Tweet]

View file

@ -122,6 +122,7 @@
#if divClass.len > 0: #if divClass.len > 0:
<div class="${divClass}"> <div class="${divClass}">
#end if #end if
#if tweet.available:
<div class="status-el"> <div class="status-el">
<div class="status-body"> <div class="status-body">
${renderHeading(tweet)} ${renderHeading(tweet)}
@ -140,6 +141,11 @@
${renderStats(tweet)} ${renderStats(tweet)}
</div> </div>
</div> </div>
#else:
<div class="status-el unavailable">
<div class="unavailable-box">This tweet is unavailable</div>
</div>
#end if
#if divClass.len > 0: #if divClass.len > 0:
</div> </div>
#end if #end if

View file

@ -111,18 +111,18 @@
<div class="conversation" id="tweets"> <div class="conversation" id="tweets">
<div class="main-thread"> <div class="main-thread">
#if conversation.before.len > 0: #if conversation.before.len > 0:
<div class="before-tweet"> <div class="before-tweet thread-line">
#for tweet in conversation.before: #for tweet in conversation.before:
${renderTweet(tweet)} ${renderTweet(tweet)}
#end for #end for
</div> </div>
#end if #end if
<div class="main-tweet"> <div class="main-tweet">
#let afterClass = if conversation.after.len > 0: "thread" else: "" #let afterClass = if conversation.after.len > 0: "thread thread-line" else: ""
${renderTweet(conversation.tweet, class=afterClass)} ${renderTweet(conversation.tweet, class=afterClass)}
</div> </div>
#if conversation.after.len > 0: #if conversation.after.len > 0:
<div class="after-tweet"> <div class="after-tweet thread-line">
#for i, tweet in conversation.after: #for i, tweet in conversation.after:
${renderTweet(tweet, last=(i == conversation.after.high))} ${renderTweet(tweet, last=(i == conversation.after.high))}
#end for #end for
@ -132,7 +132,7 @@
#if conversation.replies.len > 0: #if conversation.replies.len > 0:
<div class="replies"> <div class="replies">
#for thread in conversation.replies: #for thread in conversation.replies:
<div class="reply thread"> <div class="reply thread thread-line">
#for i, tweet in thread: #for i, tweet in thread:
${renderTweet(tweet, last=(i == thread.high))} ${renderTweet(tweet, last=(i == thread.high))}
#end for #end for