html: Add a sidebar to quickly jump to messages.

1 files changed, 25 insertions, 0 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index deb4ce0..ba043ce 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -172,10 +172,35 @@ table {
     display: block;
 }
 
+a.message-anchor {
+    display: block;
+    position: relative;
+    top: -80px;
+    visibility: hidden;
+}
+
+#sidebar {
+    display: none;
+    position: fixed;
+    right: 10px;
+    top: 30%;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: .5em;
+}
+
+@media (min-width: 1200px) {
+    #sidebar {
+        display: block;
+    }
+}
+
 .conversation .avatar {
     display: none;
 }
 
+#sidebar .avatar,
 .message .from .avatar {
     width: 1.2em;
     height: 1.2em;