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', """
#{app.templates.newsList(news, years: false)}
"""
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 GitHub.
#{app.templates.newsList app.news}
"""
-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 += "#{year}
"
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 {