VRFS-1558 make play/comment/like icons clickable in feed and add share icon

web/app/assets/stylesheets/web/audioWidgets.css.scss

@@ -238,7 +238,7 @@
     font-size:12px;
     font-weight:bold;
     color:#ccc;
-    margin-bottom:10px;
+    margin-bottom:5px;
     overflow: hidden;
     white-space: nowrap;
     text-decoration: none;

web/app/views/users/_feed_music_session.html.haml

@@ -4,7 +4,7 @@
     = session_avatar(feed_item)
   / type and artist
   .left.ml20.w15
-    .title{hoveraction: 'session', :'session-id' => feed_item.id } SESSION
+    .title{:'session-id' => feed_item.id } SESSION
     .artist
       = session_artist_name(feed_item)
     = timeago(feed_item.created_at, class: 'small created_at')
@@ -31,18 +31,24 @@
     .left.small
       = session_genre(feed_item)
     .right.small.feed-details
+      %a{title: 'Share', id: 'btn-share'}
+        = image_tag 'content/icon_share.png', :height => "12", :width => "7"
+       
       %span.play-count
         %span.plays
           = feed_item.play_count
-        = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+        %a{title: 'Play', id: 'btn-play'}
+          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
       %span.comment-count
         %span.comments
           = feed_item.comment_count
-        = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
+        %a{title: 'Comment', id: 'btn-comment'}
+          = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
       %span.like-count
         %span.likes
           = feed_item.like_count
-        = image_tag 'content/icon_like.png', :height => "12", :width => "12"
+        %a{title: 'Like', id: 'btn-like'}
+          = image_tag 'content/icon_like.png', :height => "12", :width => "12"
       %a.details{:href => "#"} Details
       %a.details-arrow.arrow-down-orange{:href => "#"}
     %br/

web/app/views/users/_feed_music_session_ajax.html.haml

@@ -5,10 +5,10 @@
       %img{ src: '{{data.feed_item.helpers.avatar}}' }
     / type and artist
     .left.ml20.w15
-      .title{hoveraction: 'session', :'session-id' => '{{data.feed_item.id}}' } SESSION
+      .title{:'session-id' => '{{data.feed_item.id}}' } SESSION
       .artist
         %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'}
-        = '{{data.feed_item.helpers.artist_name}}'
+          = '{{data.feed_item.helpers.artist_name}}'
       %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'}= '{{data.feed_item.created_at}}'
     / name and description
     .left.ml20.w30
@@ -34,18 +34,24 @@
       / genre and social
       .left.small= '{{data.feed_item.helpers.genre}}'
       .right.small.feed-details
+        %a{title: 'Share', id: 'btn-share'}
+          = image_tag 'content/icon_share.png', :height => "12", :width => "7"
+         
         %span.play-count
           %span.plays
             = '{{data.feed_item.play_count}}'
-          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+          %a{title: 'Play', id: 'btn-play'}
+            = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
         %span.comment-count
           %span.comments
             = '{{data.feed_item.comment_count}}'
-          = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
+          %a{title: 'Comment', id: 'btn-comment'}
+            = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
         %span.like-count
           %span.likes
-            = '{{data.feed_item.comment_count}}'
-          = image_tag 'content/icon_like.png', :height => "12", :width => "12"
+            = '{{data.feed_item.like_count}}'
+          %a{title: 'Like', id: 'btn-like'}
+            = image_tag 'content/icon_like.png', :height => "12", :width => "12"
         %a.details{:href => "#"} Details
         %a.details-arrow.arrow-down-orange{:href => "#"}
       %br/

web/app/views/users/_feed_recording.html.haml

@@ -7,7 +7,7 @@
     = recording_avatar(feed_item)
   / type and artist
   .left.ml20.w15.feed-type-title
-    .title{hoveraction: 'recording', :'recording-id' => feed_item.candidate_claimed_recording.id } RECORDING
+    .title{:'recording-id' => feed_item.candidate_claimed_recording.id } RECORDING
     .artist
       = recording_artist_name(feed_item)
     = timeago(feed_item.created_at, class: 'small created_at')
@@ -52,18 +52,24 @@
     .left.small
       = recording_genre(feed_item)
     .right.small.feed-details
+      %a{title: 'Share', id: 'btn-share'}
+        = image_tag 'content/icon_share.png', :height => "12", :width => "7"
+       
       %span.play-count
         %span.plays
           = feed_item.play_count
-        = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+        %a{title: 'Play', id: 'btn-play'}
+          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
       %span.comment-count
         %span.comments
           = feed_item.comment_count
-        = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
+        %a{title: 'Comment', id: 'btn-comment'}
+          = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
       %span.like-count
         %span.likes
           = feed_item.like_count
-        = image_tag 'content/icon_like.png', :height => "12", :width => "12"
+        %a{title: 'Like', id: 'btn-like'}
+          = image_tag 'content/icon_like.png', :height => "12", :width => "12"
       %a.details{:href => "#"} Details
       %a.details-arrow.arrow-down-orange{:href => "#"}
     %br/

web/app/views/users/_feed_recording_ajax.html.haml

@@ -5,10 +5,10 @@
       %img{ src: '{{data.feed_item.helpers.avatar}}' }
     / type and artist
     .left.ml20.w15
-      .title{hoveraction: 'recording', :'recording-id' => '{{data.candidate_claimed_recording.id}}' } RECORDING
+      .title{:'recording-id' => '{{data.candidate_claimed_recording.id}}' } RECORDING
       .artist
         %a.artist{href: "#", :hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'}
-        = '{{data.feed_item.helpers.artist_name}}'
+          = '{{data.feed_item.helpers.artist_name}}'
       %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'}
         = '{{data.feed_item.created_at}}'
     / name and description
@@ -54,18 +54,24 @@
       / genre and social
       .left.small= '{{data.feed_item.helpers.genre}}'
       .right.small.feed-details
+        %a{title: 'Share', id: 'btn-share'}
+          = image_tag 'content/icon_share.png', :height => "12", :width => "7"
+         
         %span.play-count
           %span.plays
             = '{{data.feed_item.play_count}}'
-          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
+          %a{title: 'Play', id: 'btn-play'}
+            = image_tag 'content/icon_arrow.png', :height => "12", :width => "7"
         %span.comment-count
           %span.comments
             = '{{data.feed_item.comment_count}}'
-          = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
+          %a{title: 'Comment', id: 'btn-comment'}
+            = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
         %span.like-count
           %span.likes
             = '{{data.feed_item.like_count}}'
-          = image_tag 'content/icon_like.png', :height => "12", :width => "12"
+          %a{title: 'Like', id: 'btn-like'}
+            = image_tag 'content/icon_like.png', :height => "12", :width => "12"
         %a.details{:href => "#"} Details
         %a.details-arrow.arrow-down-orange{:href => "#"}
       %br/