From 41dd8deceb1ad4ce47953b83e8d56183f63ba107 Mon Sep 17 00:00:00 2001
From: Thibaut Courouble <thibaut@me.com>
Date: Sun, 24 Jan 2016 09:18:49 -0500
Subject: [PATCH] Improve changelog notif

---
 .../javascripts/templates/notif_tmpl.coffee   |  2 +-
 .../templates/pages/news_tmpl.coffee.erb      |  4 +--
 assets/stylesheets/components/_notif.scss     | 29 +++++++++++++++----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/assets/javascripts/templates/notif_tmpl.coffee b/assets/javascripts/templates/notif_tmpl.coffee
index b1a584d3..2b32a9b4 100644
--- a/assets/javascripts/templates/notif_tmpl.coffee
+++ b/assets/javascripts/templates/notif_tmpl.coffee
@@ -24,7 +24,7 @@ app.templates.notifInvalidLocation = ->
             """ Otherwise things are likely to break. """
 
 app.templates.notifNews = (news) ->
-  notif 'Changelog', app.templates.newsList(news)
+  notif 'Changelog', """<div class="_notif-content _notif-news">#{app.templates.newsList(news, years: false)}</div>"""
 
 app.templates.notifShare = ->
   textNotif """ Hi there! """,
diff --git a/assets/javascripts/templates/pages/news_tmpl.coffee.erb b/assets/javascripts/templates/pages/news_tmpl.coffee.erb
index d670e307..9eb9847f 100644
--- a/assets/javascripts/templates/pages/news_tmpl.coffee.erb
+++ b/assets/javascripts/templates/pages/news_tmpl.coffee.erb
@@ -8,13 +8,13 @@ app.templates.newsPage = ->
         For development updates, follow the project on <a href="https://github.com/Thibaut/devdocs">GitHub</a>.
       <div class="_news">#{app.templates.newsList app.news}</div> """
 
-app.templates.newsList = (news) ->
+app.templates.newsList = (news, options = {}) ->
   year = new Date().getUTCFullYear()
   result = ''
 
   for value in news
     date = new Date(value[0])
-    if year isnt date.getUTCFullYear()
+    if options.years isnt false and year isnt date.getUTCFullYear()
       year = date.getUTCFullYear()
       result += "<h4>#{year}</h4>"
     result += newsItem(date, value[1..])
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index 2bfa10ed..66ade3b7 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -19,7 +19,7 @@
 }
 
 ._notif-title {
-  margin: 0 0 .375rem;
+  margin: 0 0 .5rem;
   line-height: 1rem;
   font-size: inherit;
 }
@@ -49,23 +49,42 @@
   &:before { @extend %icon, %icon-close-white; }
 }
 
-._notif-news {
-  width: 20rem;
-  max-height: 85%;
+._notif-content {
+  max-height: calc(50vh - 4.5rem);
+  margin: 0 -.25rem 0 0;
+  padding-right: .75rem;
   overflow-y: auto;
 
+  &::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
+  &::-webkit-scrollbar-button { display: none; }
+  &::-webkit-scrollbar-track { background: $notifBackground; }
+  &::-webkit-scrollbar-thumb {
+    min-height: 2rem;
+    background: $scrollbarColor;
+    background-clip: padding-box;
+    border: 3px solid $notifBackground;
+    border-radius: 5px;
+
+    &:active {
+      background-color: $scrollbarColorHover;
+      border-width: 2px;
+    }
+  }
+
   > ._notif-title {
     margin-bottom: .5rem;
     text-align: center;
   }
+}
 
+._notif-news {
   > ._news-row {
     line-height: 1.125rem;
     font-size: .6875rem;
     color: $notifColorLight;
     margin-bottom: .25rem;
 
-    + ._news-row { margin-top: .75rem; }
+    + ._news-row { margin-top: .625rem; }
   }
 
   ._news-title {