From 03bbda899cb91ff67eac49e7cf21ed91f0ebc932 Mon Sep 17 00:00:00 2001
From: Nicolas Perriault <nperriault@gmail.com>
Date: Thu, 27 Apr 2017 19:40:45 +0200
Subject: [PATCH] Scrollable timelines. (#75)

---
 public/style.css | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 src/View.elm     |  9 +++++----
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/public/style.css b/public/style.css
index d3735f6..4216ea1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,6 +1,50 @@
 body {
   font-family: Roboto, sans-serif;
-  padding-top: 10px;
+  padding: 10px 0 0 0;
+  overflow: hidden;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px
+}
+
+::-webkit-scrollbar-thumb {
+    background: #444;
+    border: 0px none #ffffff;
+    border-radius: 50px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: #777;
+}
+
+::-webkit-scrollbar-track {
+    border: 0px none #ffffff;
+    border-radius: 0;
+    background: rgba(0,0,0,0.1);
+}
+
+::-webkit-scrollbar-track:hover {
+    background: #2a2e31;
+}
+
+::-webkit-scrollbar-track:active {
+    background: #2a2e31;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
+.timeline {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: calc(100vh - 60px);
 }
 
 .status, .follow-profile {
diff --git a/src/View.elm b/src/View.elm
index 9dce44a..e2f3c05 100644
--- a/src/View.elm
+++ b/src/View.elm
@@ -235,7 +235,7 @@ accountTimelineView account statuses label iconName =
                     , text <| toString account.followers_count
                     ]
                 ]
-            , ul [ class "list-group" ] <|
+            , ul [ class "list-group timeline" ] <|
                 List.map
                     (\s ->
                         li [ class "list-group-item status" ]
@@ -329,7 +329,7 @@ timelineView label iconName context statuses =
                 [ icon iconName
                 , text label
                 ]
-            , ul [ class "list-group" ] <|
+            , ul [ class "list-group timeline" ] <|
                 List.map (statusEntryView context "") statuses
             ]
         ]
@@ -401,7 +401,7 @@ notificationListView notifications =
                 [ icon "bell"
                 , text "Notifications"
                 ]
-            , ul [ class "list-group" ] <|
+            , ul [ class "list-group timeline" ] <|
                 List.map notificationEntryView notifications
             ]
         ]
@@ -566,7 +566,8 @@ threadView thread =
         div [ class "col-md-3" ]
             [ div [ class "panel panel-default" ]
                 [ closeablePanelheading "list" "Thread" CloseThread
-                , ul [ class "list-group" ] <| List.map threadEntry statuses
+                , ul [ class "list-group timeline" ] <|
+                    List.map threadEntry statuses
                 ]
             ]