Display unavailable tweets
This commit is contained in:
parent
d052ff538c
commit
547cd635bf
4 changed files with 30 additions and 11 deletions
|
@ -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;
|
||||||
|
|
|
@ -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]
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue