Refactor notification styling and layout

app/assets/stylesheets/application.scss

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

app/assets/stylesheets/base.css.scss

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

app/assets/stylesheets/components/_notifications.scss

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

app/assets/stylesheets/scss/notifications.scss

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

app/views/navigation/main/_notifications.haml

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

app/views/notifications/type/_answer.haml

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

app/views/notifications/type/_comment.haml

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

app/views/notifications/type/_commentsmile.haml

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

app/views/notifications/type/_relationship.haml

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

app/views/notifications/type/_smile.haml

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