diff --git a/app/assets/javascripts/discourse/templates/share.hbs b/app/assets/javascripts/discourse/templates/share.hbs index d81da9289..763027ef6 100644 --- a/app/assets/javascripts/discourse/templates/share.hbs +++ b/app/assets/javascripts/discourse/templates/share.hbs @@ -4,7 +4,10 @@ {{displayDate}} {{/if}} -
+
+ +
+
{{each shareLinks itemView='share-link'}} diff --git a/app/assets/javascripts/discourse/views/share.js.es6 b/app/assets/javascripts/discourse/views/share.js.es6 index 1c354e46d..c6a0b9715 100644 --- a/app/assets/javascripts/discourse/views/share.js.es6 +++ b/app/assets/javascripts/discourse/views/share.js.es6 @@ -28,13 +28,19 @@ export default Discourse.View.extend({ linkChanged: function() { if (this.present('controller.link')) { - var $linkInput = $('#share-link input'); - $linkInput.val(this.get('controller.link')); + if (!this.capabilities.touch) { + var $linkInput = $('#share-link input'); + $linkInput.val(this.get('controller.link')); - // Wait for the fade-in transition to finish before selecting the link: - window.setTimeout(function() { - $linkInput.select().focus(); - }, 160); + // Wait for the fade-in transition to finish before selecting the link: + window.setTimeout(function() { + $linkInput.select().focus(); + }, 160); + } else { + var $linkForTouch = $('#share-link .share-for-touch a'); + $linkForTouch.attr('href', this.get('controller.link')); + $linkForTouch.html(this.get('controller.link')); + } } }.observes('controller.link'), @@ -84,10 +90,11 @@ export default Discourse.View.extend({ y = $currentTargetOffset.top + 10; } - $shareLink.css({ - left: "" + x + "px", - top: "" + y + "px" - }); + $shareLink.css({top: "" + y + "px"}); + + if (!Discourse.Mobile.mobileView) { + $shareLink.css({left: "" + x + "px"}); + } shareView.set('controller.link', url); shareView.set('controller.postNumber', postNumber); diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss index c7535fcb2..9cf2a61b4 100644 --- a/app/assets/stylesheets/common/base/share_link.scss +++ b/app/assets/stylesheets/common/base/share_link.scss @@ -3,7 +3,7 @@ #share-link { position: absolute; left: 20px; - z-index: 990; + z-index: 1200; box-shadow: 0 1px 5px rgba(0,0,0, .4); background-color: $secondary; padding: 6px 10px 10px 10px; @@ -12,9 +12,12 @@ &.visible { display: block; } - input[type=text] { + input[type=text], .share-for-touch .overflow-ellipsis { width: 96%; } + .share-for-touch { + margin: 14px 0; + } h3 { font-size: 13px; } @@ -49,3 +52,11 @@ margin-bottom: 10px; } } + +.discourse-no-touch #share-link .share-for-touch { + display: none; +} + +.discourse-touch #share-link input[type=text] { + display: none; +} diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index cfd7cff33..82d0c8c2f 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -384,6 +384,8 @@ iframe { #share-link { width: 290px; + left: auto; + right: 4px; } #selected-posts {