diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index d8f5eaf..1503e62 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -18,10 +18,5 @@ $(function() { $('input[data-behavior=focus]:first').focus().select(); - $('#embed-link').click(function(e) { - e.preventDefault(); - $('.embed-box').slideDown('fast'); - }); - $('[data-toggle="popover"]').popover({ html: true }); }); diff --git a/app/assets/stylesheets/asciicasts.sass b/app/assets/stylesheets/asciicasts.sass index 09bb75c..62eeeef 100644 --- a/app/assets/stylesheets/asciicasts.sass +++ b/app/assets/stylesheets/asciicasts.sass @@ -79,24 +79,6 @@ float: right margin-right: 10px - .embed-box - display: none - padding: 15px - background-color: #f7f7f7 - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - border-left: 1px solid #ddd - border-right: 1px solid #ddd - border-bottom: 1px solid #ddd - - input - width: 100% - border: 1px solid #ddd - font-family: monospace - font-size: 12px - margin-bottom: 5px - padding: 4px - section.description padding: 0 border-bottom: 1px solid #eee @@ -110,3 +92,18 @@ h2 font-size: 20px + + .embed-modal + max-width: 900px + width: initial + + h2:first-child + margin-top: 0 + + input[type="text"] + width: 100% + border: 1px solid #ddd + font-family: Menlo, Monaco, Consolas, "Bitstream Vera Sans Mono", monospace + font-size: 12px + margin-bottom: 5px + padding: 6px diff --git a/app/assets/stylesheets/base.sass b/app/assets/stylesheets/base.sass index c2c1d77..ff32c95 100644 --- a/app/assets/stylesheets/base.sass +++ b/app/assets/stylesheets/base.sass @@ -7,6 +7,12 @@ body background-color: $background-color padding-top: 42px + &.modal-open + margin-right: 0 + + .navbar-fixed-top + margin-right: 0 + .btn font-size: 15px diff --git a/app/presenters/asciicast_page_presenter.rb b/app/presenters/asciicast_page_presenter.rb index 61c7926..c32fa4b 100644 --- a/app/presenters/asciicast_page_presenter.rb +++ b/app/presenters/asciicast_page_presenter.rb @@ -55,6 +55,18 @@ class AsciicastPagePresenter %() end + def embed_html_link(routes) + img_src = routes.asciicast_url(asciicast, format: :png) + url = routes.asciicast_url(asciicast) + %() + end + + def embed_markdown_link(routes) + img_src = routes.asciicast_url(asciicast, format: :png) + url = routes.asciicast_url(asciicast) + "[![alt](#{img_src})](#{url})" + end + def show_admin_dropdown? [show_edit_link?, show_delete_link?, diff --git a/app/views/asciicasts/show.html.slim b/app/views/asciicasts/show.html.slim index 43b4987..d152d93 100644 --- a/app/views/asciicasts/show.html.slim +++ b/app/views/asciicasts/show.html.slim @@ -61,15 +61,7 @@ li span.glyphicon.glyphicon-link ' - a href="#" id="embed-link" Embed - - .container - .row - .col-md-6.col-md-offset-6 - .embed-box.text-right - input[type="text" class="embed-script" value=page.embed_script(self) data-behavior="auto-select" readonly] - br - | See the #{link_to 'embedding docs', docs_path(:embedding)} for more options. + a href="#" id="embed-link" data-toggle="modal" data-target="#embed-modal" Embed - if page.show_description? section.odd.description @@ -82,3 +74,28 @@ .other-asciicasts h2 More by #{page.author_link} = render 'previews', asciicasts: page.other_asciicasts_by_author, per_row: 3 + + .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 Player + p Paste this script tag where you want the player to be displayed on your page: + p + input[type="text" value=page.embed_script(self) data-behavior="auto-select" readonly] + p See the #{link_to 'embedding docs', docs_path(:embedding)} for additional options. + + 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=page.embed_html_link(self) data-behavior="auto-select" readonly] + p + span Markdown: + br + input[type="text" value=page.embed_markdown_link(self) data-behavior="auto-select" readonly]