update notification's classes and add fix for FF flex bug

This commit is contained in:
Felix Niklas 2015-06-11 12:35:31 +02:00
parent 61bacb8d32
commit a0ce969a1a
4 changed files with 34 additions and 33 deletions

View file

@ -1,7 +1,7 @@
<div class="activity-entry horizontal">
<div class="activity-entry">
<div class="activity-avatar js-avatar"></div>
<a href="<%- @item.link %>" class="activity-body flex horizontal">
<span class="activity-message flex">
<a href="<%- @item.link %>" class="activity-body">
<span class="activity-message">
<span class="activity-text">
<%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %>
</span>

View file

@ -1,7 +1,7 @@
<div class="popover popover--notifications js-notificationsContainer" role="tooltip">
<div class="arrow"></div>
<div class="popover-notificationsHeader">
<span class="popover-title"></span>
<div class="popover-title"></div>
<a class="popover-notificationsMarkRead js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
</div>
<div class="popover-content"></div>

View file

@ -1,15 +1,15 @@
<% if @items.length: %>
<% for item in @items: %>
<div class="activity-entry horizontal">
<div class="activity-entry<% if item.seen: %> is-inactive<% end %>">
<a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
<%- item.created_by.avatar() %>
</a>
<a href="<%- item.link %>" class="activity-body flex horizontal">
<span class="activity-message flex">
<span class="activity-text <% if item.seen: %>inactive<% end %>">
<a href="<%- item.link %>" class="activity-body">
<span class="activity-message">
<span class="activity-text">
<%= item.created_by.displayName() %> <%- @T( item.type ) %> <%- @T( item.object_name ) %><% if item.title: %> (<%= item.title %>)<% end %>
</span>
<span class="activity-time <% if item.seen: %>inactive<% end %> humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
<span class="activity-time humanTimeFromNow" data-time="<%- item.created_at %>">?</span>
</span>
</a>
</div>

View file

@ -642,10 +642,6 @@ table {
overflow-y: scroll;
}
.inactive {
color: #ddd !important;
}
/*
#content > *:not(.active) {
display: none !important;
@ -2481,10 +2477,8 @@ footer {
}
.popover-notificationsHeader {
display: flex;
padding-bottom: 8px;
margin: 21px 17px 0;
@extend .vertical;
.popover-title {
@extend h1;
@ -2500,8 +2494,11 @@ footer {
.popover-notificationsMarkRead {
@extend .btn;
@extend .btn--subtle;
cursor: pointer;
padding: 7px 0 0 2px;
text-decoration: underline;
color: hsl(0,0%,77%);
display: block;
&:hover {
padding: 7px 0 0 2px;
@ -2727,34 +2724,37 @@ footer {
margin-right: 26px;
}
.activity-entry.state--read {
opacity: 0.5;
.activity-entry {
display: flex;
&.is-inactive {
opacity: 0.5;
}
}
.activity-avatar {
padding-top: 16px;
padding-left: 2px;
padding-right: 2px;
padding: 16px 2px 0;
margin-right: 10px;
flex-shrink: 0;
}
.activity-avatar:hover .avatar {
}
.activity-body {
color: #444a4f;
padding: 16px 0 16px 2px;
position: relative;
display: flex;
flex: 1;
min-width: 0;
}
.activity-body:after {
content: "";
position: absolute;
bottom: 0;
right: 30px;
left: 8px;
border-bottom: 1px solid #f2f2f3;
}
.activity-entry:not(:last-child) .activity-body:after {
content: "";
position: absolute;
bottom: 0;
right: 30px;
left: 0;
border-bottom: 1px solid #f2f2f3;
}
.activity-body:hover {
color: #444a4f;
@ -2766,7 +2766,8 @@ footer {
}
.activity-message {
padding-right: 0;
flex: 1;
min-width: 0;
}
.activity-time {