mirrors/retrospring
1
0
Fork 0
mirror of https://github.com/Retrospring/retrospring.git synced 2024-11-20 16:29:52 +01:00
Code Issues Projects Releases Packages Wiki Activity

Refactor notification styling and layout

Browse source
This commit is contained in:
Andreas Nedbal 2020-05-01 21:57:14 +02:00
parent aa5ca6c64a
commit 185b5a65c8
10 changed files with 140 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/application.scss
View file

@ -68,6 +68,7 @@
"components/buttons",
"components/entry",
"components/jumbotron",
"components/notifications",
"components/profile",
"components/question",
"components/userbox";

8
app/assets/stylesheets/base.css.scss
View file

@ -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;
}

50
app/assets/stylesheets/components/_notifications.scss Normal file
View file

@ -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;
}
}
}

110
app/assets/stylesheets/scss/notifications.scss
View file

@ -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
app/views/navigation/main/_notifications.haml
View file

@ -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}

41
app/views/notifications/type/_answer.haml
View file

@ -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 ? '[...]' : ''}"

51
app/views/notifications/type/_comment.haml
View file

@ -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 ? '[...]' : ''}"

32
app/views/notifications/type/_commentsmile.haml
View file

@ -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 ? '[...]' : ''}"

15
app/views/notifications/type/_relationship.haml
View file

@ -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))

32
app/views/notifications/type/_smile.haml
View file

@ -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 ? '[...]' : ''}"