Notifications responsiveness

app/views/members/_follow_buttons.haml

@@ -0,0 +1,6 @@
+- if current_member && current_member != member # must be logged in, can't follow yourself
+  - follow = current_member.get_follow(member)
+  - if !follow && can?(:create, Follow) # not already following
+    = link_to 'Follow', follows_path(followed: member), method: :post, class: 'btn btn-block'
+  - if follow && can?(:destroy, follow) # already following
+    = link_to 'Unfollow', follow_path(follow), method: :delete, class: 'btn btn-block'

app/views/members/show.html.haml

@@ -43,12 +43,8 @@
             = icon('fas', 'envelope')
             Send message
 
-        - if current_member && current_member != @member # must be logged in, can't follow yourself
-          - follow = current_member.get_follow(@member)
-          - if !follow && can?(:create, Follow) # not already following
-            = link_to 'Follow', follows_path(followed: @member), method: :post, class: 'btn btn-block'
-          - if follow && can?(:destroy, follow) # already following
-            = link_to 'Unfollow', follow_path(follow), method: :delete, class: 'btn btn-block'
+        = render 'members/follow_buttons', member: @member
+
       = render "stats", member: @member
       .card-footer
         = render "contact", member: @member, twitter_auth: @twitter_auth,

app/views/notifications/_form.html.haml

@@ -1,24 +1,26 @@
-= form_for @notification do |f|
-  - if @notification.errors.any?
-    #error_explanation
-      %h2
-        = pluralize(@post.errors.size, "error")
-        prohibited this message from being sent:
-      %ul
-        - @notification.errors.full_messages.each do |msg|
-          %li= msg
+= bootstrap_form_for @notification do |f|
+  .card
+    .card-body
+      - if @notification.errors.any?
+        #error_explanation
+          %h2
+            = pluralize(@post.errors.size, "error")
+            prohibited this message from being sent:
+          %ul
+            - @notification.errors.full_messages.each do |msg|
+              %li= msg
 
-  .field
-    = f.hidden_field :recipient_id, value: @recipient.id
+      .field
+        = f.hidden_field :recipient_id, value: @recipient.id
 
-  %p
-    To:
-    = link_to @recipient, @recipient
-  = label_tag :notification, "Subject:"
-  = f.text_field :subject, value: @subject, class: 'form-control', maxlength: 255
-  = label_tag :body, "Type your message here:"
-  = f.text_area :body, rows: 12, class: 'form-control'
-  %span.help-block
-    = render partial: "shared/markdown_help"
+      %p
+        To
+        = link_to @recipient, @recipient
+        = render 'members/tiny', member: @recipient
+      = f.text_field :subject, value: @subject, class: 'form-control', maxlength: 255
+      = f.text_area :body, rows: 12, label: "Type your message here"
+      %span.help-block= render partial: "shared/markdown_help"
+    .card-footer
 
-  = f.submit "Send", class: 'btn btn-primary'
+      = link_to 'cancel', notifications_path, class: 'btn'
+      .float-right= f.submit "Send", class: 'btn btn-primary'

app/views/notifications/_notification.html.haml

@@ -1,4 +1,4 @@
-%p
+%p.text-muted
   From
   = link_to notification.sender, notification.sender
   on

app/views/notifications/index.html.haml

@@ -4,35 +4,27 @@
   .alert.alert-success{role: "alert"} You have no messages.
 - else
   = paginate @notifications, theme: 'twitter-bootstrap-3'
-  %table.table.table-striped
-    %thead
-      %tr
-        %th From
-        %th Subject
-        %th Date
-        %th
 
+  .index-cards
     - @notifications.each do |n|
-      - if can? :read, n
-        %tr
-          %td
-            - if n.sender.present?
-              - if n.read
-                = link_to n.sender, member_path(n.sender)
-              - else
-                %strong= link_to n.sender, member_path(n.sender)
-            - else
-              *deleted member*
-          %td
-            - if n.read
-              = link_to n.subject, notification_path(n)
-            - else
-              %strong= link_to n.subject, notification_path(n)
-          %td
-            - if n.read
-              = n.created_at
-            - else
-              %strong= n.created_at
-          %td
-            = link_to 'Delete', n, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-default background-danger btn-xs'
-  = paginate @notifications, theme: 'twitter-bootstrap-3'
+      .card.message
+        .card-body
+          .row
+            .col-6
+              %p= link_to  n.subject, notification_path(n)
+              %p
+                - if n.read
+                  = n.created_at
+                - else
+                  %strong= n.created_at
+            .col-6
+              = render 'members/tiny', member: n.sender
+              = n.sender
+              = render 'members/follow_buttons', member: n.sender
+        .card-footer
+          = link_to 'Read', n, class: 'btn btn-primary'
+          = link_to 'Reply', reply_link(n), class: 'btn btn-secondary'
+          = link_to n, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-default btn-danger btn-xs' do
+            = delete_icon
+            = t('buttons.delete')
+  = paginate @notifications

app/views/notifications/reply.html.haml

@@ -1,6 +1,6 @@
 = content_for :title, "Send a message to #{@recipient}"
 
-= render @sender_notification
-
+.card
+  .card-body= render @sender_notification
 = render 'form'
 

app/views/notifications/show.html.haml

@@ -1,7 +1,13 @@
 = content_for :title, @notification.subject
 
-= render @notification
+.card
+  .card-header
+    .card-title= @notification.subject
+  .card-body
+    = render @notification
 
-%p
-  = link_to 'Delete', @notification, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-default'
-  = link_to 'Reply', @reply_link, class: 'btn btn-primary'
+  .card-footer
+    = link_to 'Reply', @reply_link, class: 'btn btn-primary'
+    = link_to @notification, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-default btn-danger' do
+      = delete_icon
+      = t('buttons.delete')