Social links formatting and style

app/assets/stylesheets/profiles.sass

@@ -11,6 +11,19 @@ a .profile
     color: black
 
 .social-links
+  width: 100%
+  text-align: center
+  position: relative
+  background: #40a10b
+  background: linear-gradient(90deg, #e1b02777 0%, rgba(0,0,0,0) 88%)
+  > a
+    padding: 0 1em
   .x-logo
-    width: 1.6rem
+    width: 1.2em
     vertical-align: middle
+  .controls
+    position: absolute
+    top: -1em
+    margin-left: 0.8em
+    a
+      font-size: 0.6em

app/controllers/social_links_controller.rb

@@ -55,6 +55,7 @@ class SocialLinksController < ApplicationController
 
   # DELETE /social_links/1 or /social_links/1.json
   def destroy
+    authorize @social_link
     @social_link.destroy
 
     respond_to do |format|

app/models/social_link.rb

@@ -1,3 +1,21 @@
 class SocialLink < ActiveRecord::Base
   belongs_to :profile
+  has_one :user, through: :profile
+
+  def to_icon
+    case self.url
+      when /twitter\.com/, /x\.com/
+        social_icon = "<svg class='x-logo' viewBox='0 0 24 24' aria-hidden='true'><g><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'></path></g></svg>"
+      else
+        social_icon = "🌐"
+    end
+  end
+
+  def to_url
+    if self.url.scan(/https?:\/\//).empty?
+      "https://#{self.url}"
+    else
+      self.url
+    end
+  end
 end

app/views/profiles/show.html.haml

@@ -12,16 +12,15 @@
 
 .social-links
   -# = "<svg class='x-logo' viewBox='0 0 24 24' aria-hidden='true'><g><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'></path></g></svg>".html_safe
-  %p
-    - @profile.social_links.each do |social_link|
-      - case social_link.url
-        - when /twitter\.com/, /x\.com/
-          - social_icon = "<svg class='x-logo' viewBox='0 0 24 24' aria-hidden='true'><g><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'></path></g></svg>"
-      -# = link_to "#{social_icon} #{social_link.url}".html_safe, "https://#{social_link.url}"
-      = link_to "https://#{social_link.url}" do
-        #{social_icon.try("html_safe") || "🌐"}
-    - if policy(@profile).edit?
-      %br= link_to '+ Add Social Link', new_social_link_path(profile_id: @profile.id)
+  - @profile.social_links.each do |social_link|
+    -# = link_to "#{social_icon} #{social_link.url}".html_safe, "https://#{social_link.url}"
+    - if policy(social_link).destroy?
+      %span.controls
+        = link_to '📝', edit_social_link_path(social_link)
+        = link_to '❌', social_link, method: :delete, data: { confirm: 'Are you sure?' }
+    = link_to social_link.to_icon.html_safe, social_link.to_url
+  - if policy(@profile).edit?
+    %br= link_to '+ Add Social Link', new_social_link_path(profile_id: @profile.id)
 
 %h2 About #{@profile.name}
 

app/views/social_links/edit.html.haml

@@ -1,7 +1,3 @@
 %h1 Editing social_link
 
 = render 'form'
-
-= link_to 'Show', @social_link
-\|
-= link_to 'Back', social_links_path