Include link sharing in share modal

app/assets/stylesheets/asciicasts.sass

@@ -91,7 +91,7 @@
       h2
         font-size: 20px
 
-  .embed-modal
+  .share-modal
     max-width: 900px
     width: initial
 

app/views/asciicasts/_embed.html.slim

@@ -1,27 +0,0 @@
-.modal.fade id="embed-modal" tabindex="-1" role="dialog"
-  .modal-dialog.embed-modal
-    .modal-content
-      .modal-header
-        button type="button" class="close" data-dismiss="modal"
-          span ×
-        h4.modal-title id="myModalLabel" Embed this asciicast
-      .modal-body
-        h2 Image link
-        p Use snippets below to display a screenshot linking to this asciicast. Useful in places where scripts are not allowed (e.g. in a project's README file).
-        p
-          span HTML:
-          br
-          input[type="text" value=embed_html_link(page.asciicast) data-behavior="auto-select" readonly]
-        p
-          span Markdown:
-          br
-          input[type="text" value=embed_markdown_link(page.asciicast) data-behavior="auto-select" readonly]
-
-        h2 Player
-
-        p If you're embedding on your own page or on a site which permits script tags,
-          you can use the full player widget:
-        p
-          input[type="text" value=embed_script(page.asciicast) data-behavior="auto-select" readonly]
-        p Paste the above script tag where you want the player to be displayed on your page.
-        p See the #{link_to 'embedding docs', docs_path(:embedding)} for additional options.

app/views/asciicasts/_share.html.slim

@@ -1,7 +1,47 @@
-h1 Share
+.modal.fade id="share-modal" tabindex="-1" role="dialog"
+  .modal-dialog.share-modal
+    .modal-content
+      .modal-header
+        button type="button" class="close" data-dismiss="modal"
+          span ×
+        h4.modal-title id="myModalLabel" Share this recording
+      .modal-body
+        .row
+          .col-md-6
+            h2 Link
+            p
+              input[type="text" value=asciicast_url(page.asciicast) data-behavior="auto-select" readonly]
+              br
+              span
+                ' Append
+                code
+                  ' ?t=30
+                ' to start the playback at 30s,
+                code
+                  ' ?t=3:20
+                ' to start the playback at 3m 20s.
 
-ul.delimited
-  li
-    ' Embed on your page
-    input[type="text" class="embed-script" value=@asciicast.embed_script data-behavior="auto-select" readonly]
-    span See the #{link_to 'embedding docs', docs_path(:embedding)} for options
+          .col-md-6
+            h2 Social
+            div
+              = render 'shared/add_this', title: page.asciicast_title, url: asciicast_url(page.asciicast), big: true
+
+        h2 Embed image link
+        p Use snippets below to display a screenshot linking to this recording. Useful in places where scripts are not allowed (e.g. in a project's README file).
+        p
+          span HTML:
+          br
+          input[type="text" value=embed_html_link(page.asciicast) data-behavior="auto-select" readonly]
+        p
+          span Markdown:
+          br
+          input[type="text" value=embed_markdown_link(page.asciicast) data-behavior="auto-select" readonly]
+
+        h2 Embed the player
+
+        p If you're embedding on your own page or on a site which permits script tags,
+          you can use the full player widget:
+        p
+          input[type="text" value=embed_script(page.asciicast) data-behavior="auto-select" readonly]
+        p Paste the above script tag where you want the player to be displayed on your page.
+        p See the #{link_to 'embedding docs', docs_path(:embedding)} for additional options.

app/views/asciicasts/show.html.slim

@@ -4,7 +4,7 @@
   = render 'alternate_links', page: page
 
 .asciicast-page
-  = render 'embed', page: page
+  = render 'share', page: page
 
   section.cinema
     .container
@@ -13,7 +13,7 @@
   section.even.info
     .container
       .row
-        .col-md-8.col-xs-8
+        .col-md-12.col-xs-12
           span.author-avatar = page.author_img_link
           h2
             = page.asciicast_title
@@ -23,9 +23,6 @@
               = render 'featured_label'
           small by #{page.author_link} #{time_ago_tag page.asciicast_created_at}
 
-        .col-md-4.col-xs-4.text-right
-          = render 'shared/add_this', title: page.asciicast_title, url: asciicast_url(page.asciicast)
-
   section.odd.meta
     .container
       .row
@@ -79,9 +76,9 @@
 
           ul.meta-list.actions-list
             li
-              span.glyphicon.glyphicon-link
+              span.glyphicon.glyphicon-share-alt
               ' 
-              a href="#" id="embed-link" data-toggle="modal" data-target="#embed-modal" Embed
+              a href="#" id="share-link" data-toggle="modal" data-target="#share-modal" Share
 
   - if page.show_description?
     section.odd.description

spec/features/asciicast_spec.rb

@@ -11,7 +11,7 @@ feature "Asciicast page", :js => true do
 
     expect(page).to have_content('the title')
     expect(page).to have_link('aaron')
-    expect(page).to have_link('Embed')
+    expect(page).to have_link('Share')
     expect(page).to have_selector('.cinema .play-button')
   end
 
@@ -22,7 +22,7 @@ feature "Asciicast page", :js => true do
 
     expect(page).to have_content('the title')
     expect(page).to have_link('aaron')
-    expect(page).to have_link('Embed')
+    expect(page).to have_link('Share')
     expect(page).to have_selector('.cinema .play-button')
   end