diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss index 759da37..f193453 100644 --- a/src/sass/timeline.scss +++ b/src/sass/timeline.scss @@ -123,4 +123,5 @@ min-width: 0; padding: .75em; display: flex; + position: relative; } diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss index ef0b2e0..ac623ff 100644 --- a/src/sass/tweet/_base.scss +++ b/src/sass/tweet/_base.scss @@ -11,11 +11,15 @@ flex: 1; min-width: 0; margin-left: 58px; + pointer-events: none; + z-index: 1; } .tweet-content { font-family: $font_3; line-height: 1.4em; + pointer-events: all; + display: inline; } .tweet-header { @@ -28,6 +32,7 @@ display: inline-block; word-break: break-all; max-width: 100%; + pointer-events: all; } } @@ -80,6 +85,7 @@ .replying-to { color: $fg_dark; margin: -2px 0 4px; + pointer-events: all; } .retweet, .pinned, .tweet-stats { @@ -122,3 +128,15 @@ border-radius: 10px; background-color: $bg_color; } + +.tweet-link { + height: 100%; + width: 100%; + left: 0; + top: 0; + position: absolute; + + &:hover { + background-color: #1a1a1a; + } +} diff --git a/src/sass/tweet/card.scss b/src/sass/tweet/card.scss index e30cf4b..fc49aa2 100644 --- a/src/sass/tweet/card.scss +++ b/src/sass/tweet/card.scss @@ -3,6 +3,7 @@ .card { margin: 5px 0; + pointer-events: all; } .card-container { diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss index 3c6c348..17de94a 100644 --- a/src/sass/tweet/media.scss +++ b/src/sass/tweet/media.scss @@ -9,6 +9,7 @@ flex-grow: 1; max-height: 379.5px; max-width: 533px; + pointer-events: all; .still-image { width: 100%; @@ -27,6 +28,7 @@ flex-flow: column; background-color: $bg_color; align-items: center; + pointer-events: all; .image-attachment { width: 100%; diff --git a/src/sass/tweet/poll.scss b/src/sass/tweet/poll.scss index b58e92c..2709ba5 100644 --- a/src/sass/tweet/poll.scss +++ b/src/sass/tweet/poll.scss @@ -24,14 +24,17 @@ margin-right: 6px; min-width: 30px; text-align: right; + pointer-events: all; } .poll-choice-option { position: relative; + pointer-events: all; } .poll-info { color: $grey; + pointer-events: all; } .leader .poll-choice-bar { diff --git a/src/sass/tweet/quote.scss b/src/sass/tweet/quote.scss index 9b7f7c2..7c435bc 100644 --- a/src/sass/tweet/quote.scss +++ b/src/sass/tweet/quote.scss @@ -8,6 +8,7 @@ overflow: auto; padding: 6px; position: relative; + pointer-events: all; &:hover { border-color: $grey; @@ -28,6 +29,9 @@ left: 0; top: 0; position: absolute; +} + +.quote .quote-link { z-index: 1; } diff --git a/src/sass/tweet/thread.scss b/src/sass/tweet/thread.scss index bc66dfb..e72597f 100644 --- a/src/sass/tweet/thread.scss +++ b/src/sass/tweet/thread.scss @@ -20,7 +20,8 @@ } .thread-line { - .timeline-item::before { + .timeline-item::before, + &.timeline-item::before { background: $accent_dark; content: ''; position: relative; @@ -31,6 +32,8 @@ margin-left: -3px; margin-bottom: 37px; top: 56px; + z-index: 1; + pointer-events: none; } .unavailable::before { diff --git a/src/views/tweet.nim b/src/views/tweet.nim index c890667..523dafa 100644 --- a/src/views/tweet.nim +++ b/src/views/tweet.nim @@ -1,4 +1,4 @@ -import strutils, sequtils +import strutils, sequtils, strformat import karax/[karaxdsl, vdom, vstyles] import renderutils @@ -228,15 +228,15 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class=""; divClass = "thread-last " & class if not tweet.available: - return buildHtml(tdiv(class=divClass)): - tdiv(class="timeline-item unavailable"): - tdiv(class="unavailable-box"): - if tweet.tombstone.len > 0: - text tweet.tombstone - else: - text "This tweet is unavailable" + return buildHtml(tdiv(class=divClass & "unavailable timeline-item")): + tdiv(class="unavailable-box"): + if tweet.tombstone.len > 0: + text tweet.tombstone + else: + text "This tweet is unavailable" buildHtml(tdiv(class=("timeline-item " & divClass))): + a(class="tweet-link", href=getLink(tweet)) tdiv(class="tweet-body"): var views = "" renderHeader(tweet)