From 0f37ce1083c5b9cade5697df9df1d89bae5483ef Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Fri, 5 Dec 2014 16:21:07 -0500
Subject: [PATCH] FIX: share popup on mobile layout went outside of viewport,
 and z-index was behind user avatars. Use a real link on touch devices instead
 of a text input.

---
 .../javascripts/discourse/templates/share.hbs |  5 +++-
 .../javascripts/discourse/views/share.js.es6  | 27 ++++++++++++-------
 .../stylesheets/common/base/share_link.scss   | 15 +++++++++--
 app/assets/stylesheets/mobile/topic-post.scss |  2 ++
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/share.hbs b/app/assets/javascripts/discourse/templates/share.hbs
index d81da9289b2..763027ef612 100644
--- a/app/assets/javascripts/discourse/templates/share.hbs
+++ b/app/assets/javascripts/discourse/templates/share.hbs
@@ -4,7 +4,10 @@
   <span class="date">{{displayDate}}</span>
 {{/if}}
 
-<div><input type='text' /></div>
+<div>
+  <input type='text' />
+  <div class="share-for-touch"><div class="overflow-ellipsis"><a></a></div></div>
+</div>
 
 {{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 1c354e46d02..c6a0b971599 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 c7535fcb2e5..9cf2a61b43b 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 cfd7cff3397..82d0c8c2f16 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 {