Improved positioning of notification popover (way done in controller and css with unmodified BS popover.js).
This commit is contained in:
parent
f55b6c76c7
commit
0404fe31ae
2 changed files with 21 additions and 14 deletions
|
@ -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) =>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue