Refactor notification styling and layout
This commit is contained in:
parent
aa5ca6c64a
commit
185b5a65c8
|
@ -68,6 +68,7 @@
|
|||
"components/buttons",
|
||||
"components/entry",
|
||||
"components/jumbotron",
|
||||
"components/notifications",
|
||||
"components/profile",
|
||||
"components/question",
|
||||
"components/userbox";
|
||||
|
|
|
@ -13,7 +13,6 @@ body {
|
|||
@import "scss/answerbox";
|
||||
@import "scss/comments";
|
||||
@import "scss/panel";
|
||||
@import "scss/notifications";
|
||||
|
||||
.j2-page {
|
||||
padding-top: 30px;
|
||||
|
@ -93,10 +92,3 @@ body {
|
|||
.heading-about {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.row-eq-height {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
.notification {
|
||||
&__user {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__user,
|
||||
&__text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: map-get($spacers, 2);
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__list-heading {
|
||||
margin: 0px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: RGB(var(--muted-text));
|
||||
}
|
||||
|
||||
&__bell-icon:before {
|
||||
font-size: 64px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&-dropdown {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.dropdown-item > & {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
margin-top: map-get($spacers, 2);
|
||||
background-color: var(--card-cap-bg);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,110 +0,0 @@
|
|||
.notification--img {
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.notification--img-sm {
|
||||
min-height: 18px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.notification--user, .notification--text {
|
||||
z-index: 99;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.notification--icon {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
padding: 5px;
|
||||
font-size: 36px;
|
||||
color: $gray;
|
||||
opacity: 0.4;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.notification--dropdown {
|
||||
min-width: 370px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.notification--dropdown-media {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.notification--dropdown-user, .notification--dropdown-text {
|
||||
margin-bottom: 0px;
|
||||
overflow: hidden;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.notification--dropdown-user {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.notification--dropdown-img {
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.notification-center {
|
||||
min-width: 400px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.no-notifications:before {
|
||||
font-size: 64px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.notification--heading {
|
||||
margin-bottom: 4px;
|
||||
|
||||
a {
|
||||
border-bottom: 1px dotted $link-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification--list-heading {
|
||||
margin: 0px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 3px;
|
||||
margin: 0px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.notification--list-content {
|
||||
line-height: 1.3em;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.notification--list {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.notifications--none {
|
||||
padding: 10px;
|
||||
}
|
|
@ -8,17 +8,17 @@
|
|||
%i.fa.fa-bell
|
||||
%span.sr-only Notifications
|
||||
%span.badge= notification_count
|
||||
.dropdown-menu.notification-center
|
||||
.dropdown-menu.notification-dropdown
|
||||
- if notifications.count == 0
|
||||
.dropdown-item.text-center.notifications--none
|
||||
%i.fa.fa-bell-o.no-notifications
|
||||
.dropdown-item.text-center.p-2
|
||||
%i.fa.fa-bell-o.notification__bell-icon
|
||||
%p No new notifications.
|
||||
%a.dropdown-item.text-center{href: notifications_path('all')}
|
||||
%i.fa.fa-fw.fa-chevron-right
|
||||
Show all notifications
|
||||
- else
|
||||
- notifications.each do |notification|
|
||||
.dropdown-item.media.notification--dropdown-media
|
||||
.dropdown-item
|
||||
= render "notifications/type/#{notification.target_type.downcase}", notification: notification
|
||||
|
||||
%a.dropdown-item.text-center{href: notifications_path}
|
||||
|
|
|
@ -1,23 +1,22 @@
|
|||
.pull-left
|
||||
%i.fa.fa-2x.fa-fw.fa-exclamation
|
||||
.media-body
|
||||
.notification--heading
|
||||
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
answered
|
||||
= link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group.notification--list
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification--list-heading question
|
||||
.notification--list-content
|
||||
.media.notification
|
||||
.notification__icon
|
||||
%i.fa.fa-2x.fa-fw.fa-exclamation
|
||||
.media-body
|
||||
.notification__heading
|
||||
%img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
answered
|
||||
= link_to "your question", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification__list-heading question
|
||||
= markdown notification.target.question.content[0..60] + "#{notification.target.question.content.length > 60 ? '[...]' : ''}"
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification--list-heading answer
|
||||
.notification--list-content
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification__list-heading answer
|
||||
= markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
|
|
@ -1,28 +1,27 @@
|
|||
.pull-left
|
||||
%i.fa.fa-2x.fa-fw.fa-comments
|
||||
.media-body
|
||||
.notification--heading
|
||||
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
commented on
|
||||
- if notification.target.answer.user == current_user
|
||||
= link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
- elsif notification.target.user == notification.target.answer.user
|
||||
= link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
- else
|
||||
= link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group.notification--list
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification--list-heading answer
|
||||
.notification--list-content
|
||||
.media.notification
|
||||
.notification__icon
|
||||
%i.fa.fa-2x.fa-fw.fa-comments
|
||||
.media-body
|
||||
.notification__heading
|
||||
%img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
commented on
|
||||
- if notification.target.answer.user == current_user
|
||||
= link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
- elsif notification.target.user == notification.target.answer.user
|
||||
= link_to "their answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
- else
|
||||
= link_to "#{notification.target.answer.user.screen_name}'s answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification__list-heading answer
|
||||
= markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification--list-heading comment
|
||||
.notification--list-content
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification__list-heading comment
|
||||
= markdown notification.target.content[0..60] + "#{notification.target.content.length > 60 ? '[...]' : ''}"
|
|
@ -1,17 +1,17 @@
|
|||
.pull-left
|
||||
%i.fa.fa-2x.fa-fw.fa-smile-o
|
||||
.media-body
|
||||
.notification--heading
|
||||
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
smiled
|
||||
= link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group.notification--list
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification--list-heading comment
|
||||
.notification--list-content
|
||||
.media.notification
|
||||
.notification__icon
|
||||
%i.fa.fa-2x.fa-fw.fa-smile-o
|
||||
.media-body
|
||||
.notification__heading
|
||||
%img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
smiled
|
||||
= link_to "your comment", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.comment.answer.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification__list-heading comment
|
||||
= markdown notification.target.comment.content[0..60] + "#{notification.target.comment.content.length > 60 ? '[...]' : ''}"
|
|
@ -1,7 +1,8 @@
|
|||
.pull-left
|
||||
%img.img-rounded.notification--dropdown-img{src: notification.target.source.profile_picture.url(:small)}
|
||||
.media-body
|
||||
%h6.media-heading.notification--dropdown-user
|
||||
= user_screen_name notification.target.source
|
||||
.notification--dropdown-text
|
||||
= raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
|
||||
.media.notification
|
||||
.notification__icon
|
||||
%img.avatar-sm{src: notification.target.source.profile_picture.url(:small)}
|
||||
.media-body
|
||||
%h6.media-heading.notification__user
|
||||
= user_screen_name notification.target.source
|
||||
.notification__text
|
||||
= raw t('views.notifications.relationship.body', time: time_ago_in_words(notification.target.created_at))
|
|
@ -1,17 +1,17 @@
|
|||
.pull-left
|
||||
%i.fa.fa-2x.fa-fw.fa-smile-o
|
||||
.media-body
|
||||
.notification--heading
|
||||
%img.notification--img-sm{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
smiled
|
||||
= link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group.notification--list
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification--list-heading answer
|
||||
.notification--list-content
|
||||
.media.notification
|
||||
.notification__icon
|
||||
%i.fa.fa-2x.fa-fw.fa-smile-o
|
||||
.media-body
|
||||
.notification__heading
|
||||
%img.avatar-xs{src: notification.target.user.profile_picture.url(:small)}
|
||||
= user_screen_name notification.target.user
|
||||
smiled
|
||||
= link_to "your answer", show_user_answer_path(username: notification.target.user.screen_name, id: notification.target.answer.id)
|
||||
= time_tooltip(notification.target)
|
||||
ago
|
||||
.list-group
|
||||
.list-group-item
|
||||
.media.question-media
|
||||
.media-body
|
||||
%h6.notification__list-heading answer
|
||||
= markdown notification.target.answer.content[0..60] + "#{notification.target.answer.content.length > 60 ? '[...]' : ''}"
|
Loading…
Reference in New Issue