Make tweets clickable

Fixes #6

src/sass/timeline.scss

@@ -123,4 +123,5 @@
     min-width: 0;
     padding: .75em;
     display: flex;
+    position: relative;
 }

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;
+    }
+}

src/sass/tweet/card.scss

@@ -3,6 +3,7 @@
 
 .card {
     margin: 5px 0;
+    pointer-events: all;
 }
 
 .card-container {

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%;

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 {

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;
 }
 

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 {

src/views/tweet.nim

@@ -1,4 +1,4 @@
-import strutils, sequtils
+import strutils, sequtils, strformat
 import karax/[karaxdsl, vdom, vstyles]
 
 import renderutils
@@ -228,8 +228,7 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class="";
     divClass = "thread-last " & class
 
   if not tweet.available:
-    return buildHtml(tdiv(class=divClass)):
+    return buildHtml(tdiv(class=divClass & "unavailable timeline-item")):
-      tdiv(class="timeline-item unavailable"):
       tdiv(class="unavailable-box"):
         if tweet.tombstone.len > 0:
           text tweet.tombstone
@@ -237,6 +236,7 @@ proc renderTweet*(tweet: Tweet; prefs: Prefs; path: string; class="";
           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)