Improved positioning of notification popover (way done in controller and css with unmodified BS popover.js).

This commit is contained in:
Martin Edenhofer 2015-01-21 17:20:34 +01:00
parent f55b6c76c7
commit 0404fe31ae
2 changed files with 21 additions and 14 deletions

View file

@ -64,17 +64,19 @@ class App.OnlineNotificationWidget extends App.Controller
onShow: =>
@updateContent()
# set heigth of notification popover
heightApp = $('#navigation').height()
heightPopoverHeader = $('.js-notificationsContainer .popover-notificationsHeader').height()
heightPopoverContent = $('.js-notificationsContainer .popover-content').get(0).scrollHeight
height = heightPopoverHeader + heightPopoverContent
if height > heightApp
height = heightApp - heightPopoverHeader - 56
$('.js-notificationsContainer .popover-content').css('height', "#{height}px")
# set popover arrow
$('.js-notificationsContainer .arrow').css('top', '20px')
# set height of notification popover
notificationsContainer = $('.js-notificationsContainer')
heightApp = $('#app').height()
heightPopoverSpacer = 36
heightPopoverHeader = notificationsContainer.find('.popover-notificationsHeader').outerHeight()
heightPopoverContent = notificationsContainer.find('.popover-content').get(0).scrollHeight
heightPopoverContentNew = heightPopoverContent
if (heightPopoverHeader + heightPopoverContent + heightPopoverSpacer) > heightApp
heightPopoverContentNew = heightApp - heightPopoverHeader - heightPopoverSpacer
notificationsContainer.addClass('is-overflowing')
else
notificationsContainer.removeClass('is-overflowing')
notificationsContainer.find('.popover-content').css('height', "#{heightPopoverContentNew}px")
# close notification list on click
$('.js-notificationsContainer').on('click', (e) =>

View file

@ -2710,12 +2710,17 @@ footer {
}
.popover--notifications {
min-height: 100px;
@extend .zIndex-5;
&.is-visible {
@extend .vertical;
}
.arrow {
top: 23px !important;
}
.popover-content {
@extend .flex;
}