From 821e556dd32e80b98a750c6f74b5af4b476cb792 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 6 Dec 2016 17:15:56 +0000
Subject: [PATCH] Better handling of overflowing content.

---
 services/web/app/views/project/list.jade      | 23 ++++++++++---------
 .../public/stylesheets/app/project-list.less  | 12 ++++++++--
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade
index e4ba2ae3f2..1311b1a2c8 100644
--- a/services/web/app/views/project/list.jade
+++ b/services/web/app/views/project/list.jade
@@ -40,17 +40,18 @@ block content
 				.announcements-body(
 					ng-if="ui.isOpen"
 				)
-					.announcement(
-						ng-repeat="announcement in announcements"
-					)
-						h2.announcement-header {{ announcement.title }}
-						p.announcement-description {{ announcement.excerpt }}
-						.announcement-meta
-							p.announcement-date {{ announcement.date | date:"longDate" }}
-							a.announcement-link(
-								ng-href="{{ announcement.url }}"
-								target="_blank"
-							) Read more
+					.announcements-scroller
+						.announcement(
+							ng-repeat="announcement in announcements"
+						)
+							h2.announcement-header {{ announcement.title }}
+							p.announcement-description {{ announcement.excerpt }}
+							.announcement-meta
+								p.announcement-date {{ announcement.date | date:"longDate" }}
+								a.announcement-link(
+									ng-href="{{ announcement.url }}"
+									target="_blank"
+								) Read more
 
 			.row(ng-cloak)
 				span(ng-if="projects.length > 0")
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index d2562d4546..e9aa20d2da 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -319,12 +319,18 @@ ul.project-list {
 
 .announcements {
 	position: absolute;
-	top: -100%;
 	bottom: 0;
 	right: 0;
-	height: auto;
+	height: 150px;
 	width: 100%;
+	pointer-events: none;
 	overflow: hidden;
+
+	&-open {
+		top: -100%;
+		height: auto;
+		pointer-events: all;
+	}
 }
 
 .announcements-backdrop {
@@ -349,6 +355,7 @@ ul.project-list {
 	border-radius: 50%;
 	box-shadow: none;
 	z-index: 1;
+	pointer-events: all;
 	transition: bottom 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55),
 				background 0.25s ease,
 				box-shadow 0.25s ease;
@@ -391,6 +398,7 @@ ul.project-list {
 	margin-right: 95px;
 	bottom: 30px;
 	width: 700px;
+	max-height: 52%;
 	min-height: 100px;
 	background: #FFF;
 	z-index: 1;