diff --git a/services/web/app/views/project/list.jade b/services/web/app/views/project/list.jade index 6f1d87424a..dc4bff9444 100644 --- a/services/web/app/views/project/list.jade +++ b/services/web/app/views/project/list.jade @@ -22,9 +22,21 @@ block content .content.content-alt(ng-controller="ProjectPageController") .container - //- div(ng-controller="AnnouncementsController", ng-cloak) - //- .alert.alert-success(ng-show="dataRecived") - //- a(href, ng-click="openLink()") {{title}} and {{totalAnnouncements}} others + div( + ng-controller="AnnouncementsController" + ng-cloak + ) + .announcements(ng-if="announcements.length") + span.announcements-badge {{ announcements.length }} + .announcements-body + .announcement( + ng-repeat="announcement in announcements" + ) + a.announcement-title(href, ng-click="openLink()") {{ announcement.title }} + p.announcement-description {{ announcement.excerpt }} + //- .card.card-thin(ng-show="dataReceived") + //- a.announcement-title(href, ng-click="openLink()") {{ title }} + //- p.announcement-description {{ excerpt }} .row(ng-cloak) span(ng-if="projects.length > 0") diff --git a/services/web/public/coffee/main/announcements.coffee b/services/web/public/coffee/main/announcements.coffee index b0960bcc09..36a1185d0c 100644 --- a/services/web/public/coffee/main/announcements.coffee +++ b/services/web/public/coffee/main/announcements.coffee @@ -2,19 +2,19 @@ define [ "base" ], (App) -> App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window) -> + $scope.announcements = [] - $scope.dataRecived = false - announcement = null - $http.get("/announcements").success (announcements) -> - if announcements?[0]? - announcement = announcements[0] - $scope.title = announcement.title - $scope.totalAnnouncements = announcements.length - $scope.dataRecived = true + refreshAnnouncements = -> + $http.get("/announcements").success (announcements) -> + $scope.announcements = announcements + + dismissCurrentAnnouncement = -> + event_tracking.sendMB "announcement-alert-dismissed", { blogPostId:announcement.id } - dismissannouncement = -> - event_tracking.sendMB "announcement-alert-dismissed", {blogPostId:announcement.id} + refreshAnnouncements() $scope.openLink = -> - dismissannouncement() - $window.location.href = announcement.url + dismissCurrentAnnouncement() + .then(refreshAnnouncements) + + $window.open = announcement.url diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index de3307a017..1556252d2d 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -1,3 +1,14 @@ +@announcements-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2); + +@keyframes pulse { + 0% { + opacity: .7; + } + 100% { + opacity: .9; + } +} + .project-header { .btn-group > .btn { padding-left: @line-height-base / 2; @@ -293,3 +304,46 @@ ul.project-list { margin-left:-100px; } } + +.announcements { + position: absolute; + bottom: 100px; + right: 100px; + width: 80px; + height: 80px; + background: url(/img/lion-128.png) no-repeat center/80% white; + border-radius: 50%; + box-shadow: @announcements-shadow; + z-index: 1; +} + + .announcements-badge { + display: inline-block; + position: absolute; + font-size: 11px; + height: 1.8em; + min-width: 1.8em; + border-radius: 0.9em; + line-height: 1.8; + padding: 0 2px; + top: 1px; + right: 1px; + font-weight: bold; + color: #FFF; + background-color: @red; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + animation: pulse 1s alternate infinite; + } + + .announcements-body { + position: absolute; + right: 0; + bottom: 80px; + width: 500px; + min-height: 100px; + background: #FFF; + box-shadow: @announcements-shadow; + border-radius: 10px; + }