Render cards
This commit is contained in:
parent
0da076ddcf
commit
9d1682012d
126
public/style.css
126
public/style.css
|
@ -419,7 +419,6 @@ video {
|
||||||
.profile-banner-color {
|
.profile-banner-color {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 25%;
|
padding-bottom: 25%;
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-card {
|
.profile-card {
|
||||||
|
@ -882,6 +881,131 @@ video {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
border-radius: 10px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #404040;
|
||||||
|
background-color: #121212;
|
||||||
|
overflow: hidden;
|
||||||
|
color: inherit;
|
||||||
|
display: flex;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container:hover {
|
||||||
|
border-color: #808080;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large .card-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
margin: 0.3em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-destination {
|
||||||
|
color: hsla(240,1%,73%,.9);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image-container {
|
||||||
|
width: 98px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large .card-image-container {
|
||||||
|
width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image-container:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
padding-top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large .card-image-container:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large .card-image {
|
||||||
|
position: unset;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #404040;
|
||||||
|
border-width: 0;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-overlay-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #404040;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
border-width: 5px;
|
||||||
|
border-color: #d8574d;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-overlay-triangle {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 12px 0 12px 17px;
|
||||||
|
border-color: transparent transparent transparent #d8574d;
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.poll-meter {
|
.poll-meter {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -179,7 +179,6 @@ proc getCard*(tweet: Tweet) {.async.} =
|
||||||
if html == nil: return
|
if html == nil: return
|
||||||
|
|
||||||
parseCard(get(tweet.card), html)
|
parseCard(get(tweet.card), html)
|
||||||
# echo tweet.card.get()
|
|
||||||
|
|
||||||
proc getCards*(thread: Thread) {.async.} =
|
proc getCards*(thread: Thread) {.async.} =
|
||||||
if thread == nil: return
|
if thread == nil: return
|
||||||
|
|
|
@ -77,6 +77,27 @@ proc renderPoll(poll: Poll): VNode =
|
||||||
span(class="poll-info"):
|
span(class="poll-info"):
|
||||||
text $poll.votes & " votes • " & poll.status
|
text $poll.votes & " votes • " & poll.status
|
||||||
|
|
||||||
|
proc renderCard(card: Card): VNode =
|
||||||
|
const largeCards = {summaryLarge, liveEvent, promoWebsite}
|
||||||
|
let large = if card.kind in largeCards: " large" else: ""
|
||||||
|
|
||||||
|
buildHtml(tdiv(class=("card" & large))):
|
||||||
|
a(class="card-container", href=card.url):
|
||||||
|
if card.image.len > 0:
|
||||||
|
tdiv(class="card-image-container"):
|
||||||
|
tdiv(class="card-image"):
|
||||||
|
img(src=card.image.getSigUrl("pic"))
|
||||||
|
if card.kind == player:
|
||||||
|
tdiv(class="card-overlay"):
|
||||||
|
tdiv(class="card-overlay-circle"):
|
||||||
|
span(class="card-overlay-triangle")
|
||||||
|
|
||||||
|
tdiv(class="card-content-container"):
|
||||||
|
tdiv(class="card-content"):
|
||||||
|
h2(class="card-title"): text card.title
|
||||||
|
p(class="card-description"): text card.text
|
||||||
|
span(class="card-destination"): text card.dest
|
||||||
|
|
||||||
proc renderStats(stats: TweetStats): VNode =
|
proc renderStats(stats: TweetStats): VNode =
|
||||||
buildHtml(tdiv(class="tweet-stats")):
|
buildHtml(tdiv(class="tweet-stats")):
|
||||||
span(class="tweet-stat"): text "💬 " & $stats.replies
|
span(class="tweet-stat"): text "💬 " & $stats.replies
|
||||||
|
@ -168,6 +189,8 @@ proc renderTweet*(tweet: Tweet; class=""; index=0; total=(-1); last=false): VNod
|
||||||
renderGif(tweet.gif.get())
|
renderGif(tweet.gif.get())
|
||||||
elif tweet.poll.isSome:
|
elif tweet.poll.isSome:
|
||||||
renderPoll(tweet.poll.get())
|
renderPoll(tweet.poll.get())
|
||||||
|
elif tweet.card.isSome:
|
||||||
|
renderCard(tweet.card.get())
|
||||||
|
|
||||||
renderStats(tweet.stats)
|
renderStats(tweet.stats)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue