IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Neil Lalonde 2014-12-05 16:21:07 -05:00
parent cd170ca548
commit 0f37ce1083
4 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/templates/share.hbs
View File

@ -4,7 +4,10 @@
<span class="date">{{displayDate}}</span> <span class="date">{{displayDate}}</span>
{{/if}} {{/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'}} {{each shareLinks itemView='share-link'}}

27
app/assets/javascripts/discourse/views/share.js.es6
View File

@ -28,13 +28,19 @@ export default Discourse.View.extend({
linkChanged: function() { linkChanged: function() {
if (this.present('controller.link')) { if (this.present('controller.link')) {
var $linkInput = $('#share-link input'); if (!this.capabilities.touch) {
$linkInput.val(this.get('controller.link')); var $linkInput = $('#share-link input');
$linkInput.val(this.get('controller.link'));
// Wait for the fade-in transition to finish before selecting the link: // Wait for the fade-in transition to finish before selecting the link:
window.setTimeout(function() { window.setTimeout(function() {
$linkInput.select().focus(); $linkInput.select().focus();
}, 160); }, 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'), }.observes('controller.link'),
@ -84,10 +90,11 @@ export default Discourse.View.extend({
y = $currentTargetOffset.top + 10; y = $currentTargetOffset.top + 10;
} }
$shareLink.css({ $shareLink.css({top: "" + y + "px"});
left: "" + x + "px",
top: "" + y + "px" if (!Discourse.Mobile.mobileView) {
}); $shareLink.css({left: "" + x + "px"});
}
shareView.set('controller.link', url); shareView.set('controller.link', url);
shareView.set('controller.postNumber', postNumber); shareView.set('controller.postNumber', postNumber);

15
app/assets/stylesheets/common/base/share_link.scss
View File

@ -3,7 +3,7 @@
#share-link { #share-link {
position: absolute; position: absolute;
left: 20px; left: 20px;
z-index: 990; z-index: 1200;
box-shadow: 0 1px 5px rgba(0,0,0, .4); box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-color: $secondary; background-color: $secondary;
padding: 6px 10px 10px 10px; padding: 6px 10px 10px 10px;
@ -12,9 +12,12 @@
&.visible { &.visible {
display: block; display: block;
} }
input[type=text] { input[type=text], .share-for-touch .overflow-ellipsis {
width: 96%; width: 96%;
} }
.share-for-touch {
margin: 14px 0;
}
h3 { h3 {
font-size: 13px; font-size: 13px;
} }
@ -49,3 +52,11 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.discourse-no-touch #share-link .share-for-touch {
display: none;
}
.discourse-touch #share-link input[type=text] {
display: none;
}

2
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -384,6 +384,8 @@ iframe {
#share-link { #share-link {
width: 290px; width: 290px;
left: auto;
right: 4px;
} }
#selected-posts { #selected-posts {