diff --git a/frontend/views/components/LinkToCopy.vue b/frontend/views/components/LinkToCopy.vue index 890538c6e..dd651dc2a 100755 --- a/frontend/views/components/LinkToCopy.vue +++ b/frontend/views/components/LinkToCopy.vue @@ -18,6 +18,7 @@ component.c-wrapper( tooltip.c-feedback( v-if='ephemeral.isTooltipActive' :isVisible='true' + :anchorToElement='true' direction='top' :text='L("Copied to clipboard!")' ) @@ -100,7 +101,7 @@ export default ({ } .c-feedback { - position: absolute; + position: absolute !important; left: 50%; transform: translateX(-50%); } diff --git a/frontend/views/components/Tooltip.vue b/frontend/views/components/Tooltip.vue index 778444c9d..a045e878b 100644 --- a/frontend/views/components/Tooltip.vue +++ b/frontend/views/components/Tooltip.vue @@ -162,9 +162,9 @@ export default ({ switch (this.direction) { case 'right': - x = '100%' + x = `${spacing}px` y = '-50%' - absPosition = { top: '50%', right: `-${spacing}px` } + absPosition = { top: '50%', left: '100%' } break case 'left': x = '-100%' @@ -177,9 +177,9 @@ export default ({ absPosition = { bottom: `-${spacing}px` } break case 'bottom-right': - x = 0 + x = '-100%' y = '100%' - absPosition = { bottom: `-${spacing}px`, right: 0 } + absPosition = { bottom: `-${spacing}px`, left: '100%' } break case 'top': x = '-50%' @@ -324,6 +324,7 @@ export default ({ if (this.triggerElementSelector) { this.triggerDOM.style.cursor = 'pointer' + this.triggerDOM.style.position = 'relative' } }, beforeDestory () { @@ -388,6 +389,10 @@ export default ({ } } +.c-anchored-tooltip { + width: max-content; +} + .c-background { position: absolute; z-index: $zindex-tooltip - 1; diff --git a/frontend/views/containers/group-settings/InvitationsTable.vue b/frontend/views/containers/group-settings/InvitationsTable.vue index 7ff794dd9..7acc8996f 100644 --- a/frontend/views/containers/group-settings/InvitationsTable.vue +++ b/frontend/views/containers/group-settings/InvitationsTable.vue @@ -33,9 +33,10 @@ page-section.c-section(:title='L("Invite links")') | {{ item.invitee }} tooltip.c-name-tooltip( v-if='item.isAnyoneLink' - direction='top' + :direction='ephemeral.isMobile ? "right" : "top"' :isTextCenter='true' - :text='L("This invite link is only available during the onboarding period.")' + :anchorToElement='true' + :text='L("Anyone with this link can join the group.")' ) .button.is-icon-smaller.is-primary.c-tip i.icon-info @@ -151,8 +152,10 @@ export default ({ selectedOption: 'Active' }, // keep invite in "Active" list for a few seconds after being revoked - inviteRevokedNow: null - } + inviteRevokedNow: null, + isMobile: false + }, + matchMediaMobile: null } }, computed: { @@ -354,6 +357,16 @@ export default ({ this.$refs.inviteError.danger(e.message) } } + }, + mounted () { + this.matchMediaMobile = window.matchMedia('screen and (max-width: 769px)') + this.ephemeral.isMobile = this.matchMediaMobile.matches + this.matchMediaMobile.onchange = (e) => { + this.ephemeral.isMobile = e.matches + } + }, + beforeDestroy () { + this.matchMediaMobile.onchange = null } }: Object)