style notification header

This commit is contained in:
Felix Niklas 2015-01-19 13:21:43 +01:00
parent 749a5c073b
commit 6d6631ae2f
4 changed files with 28 additions and 5 deletions

View file

@ -77,13 +77,13 @@ class App.OnlineNotificationWidget extends App.Controller
trigger: 'click' trigger: 'click'
container: 'body' container: 'body'
html: true html: true
delay: { show: 100, hide: 0 }
placement: 'right' placement: 'right'
title: -> title: =>
App.i18n.translateInline( 'Notifications' ) + " <span>#{counter}</span>" # add header with counter and mark as read button
$( App.view('widget/online_notification_header')(counter: counter) )
content: => content: =>
# insert data # insert data
$( App.view('widget/online_notification')(items: items)) $( App.view('widget/online_notification')(items: items) )
).on('shown.bs.popover', => ).on('shown.bs.popover', =>
# show frontend times # show frontend times

View file

@ -5,7 +5,7 @@
<div class="white close icon"></div> <div class="white close icon"></div>
</div> </div>
</div> </div>
<div class="logo" title="<%- @C( 'product_name' ) %>"></div> <div class="logo"></div>
<ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul> <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
</form> </form>

View file

@ -0,0 +1,5 @@
<span class="popover-notificationsTitle">
<%- @T( 'Notifications' ) %>
<span class="popover-notificationsCounter"><%= @counter %></span>
<a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
</span>

View file

@ -2693,6 +2693,24 @@ footer {
margin-bottom: 8px; margin-bottom: 8px;
} }
.popover-notificationsTitle {
@extend h1;
@extend .horizontal;
@extend .justified;
}
.popover-notificationsCounter {
color: #e25253;
padding-left: 10px;
}
.popover-notificationsMarkRead {
@extend .btn;
@extend .btn--subtle;
@extend .align-right;
margin-top: -8px;
}
.stat-widgets { .stat-widgets {
margin: 0 -7px 20px; margin: 0 -7px 20px;
} }