From d76f4d422ef096d0c305593a34887069b13cc50b Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Tue, 28 Jul 2020 20:21:59 -0500
Subject: [PATCH] update detail status page and mobile settings for porfile
 hover card

---
 app/soapbox/components/status.js              |  6 ++---
 .../profile_hover_card_container.js           |  6 +++--
 .../status/components/detailed_status.js      | 20 ++++++++---------
 app/styles/components/profile_hover_card.scss | 22 ++++++++++++++++---
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index c3af6fd2d..7a2db665c 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -253,11 +253,11 @@ class Status extends ImmutablePureComponent {
   }
 
   handleProfileHover = e => {
-    if (!isMobile()) this.setState({ profileCardVisible: true });
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
   }
 
   handleProfileLeave = e => {
-    if (!isMobile()) this.setState({ profileCardVisible: false });
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
   }
 
   _properStatus() {
@@ -467,7 +467,7 @@ class Status extends ImmutablePureComponent {
                   </div>
                 </NavLink>
                 <DisplayName account={status.get('account')} others={otherAccounts}>
-                  <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={profileCardVisible} />
+                  <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
                 </DisplayName>
               </div>
             </div>
diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
index d9ae0986f..7d1d47aaa 100644
--- a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
+++ b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
@@ -9,6 +9,8 @@ import UserPanel from '../ui/components/user_panel';
 import ActionButton from '../ui/components/action_button';
 import { isAdmin, isModerator } from 'soapbox/utils/accounts';
 import Badge from 'soapbox/components/badge';
+import classNames from 'classnames';
+import { isMobile } from 'soapbox/is_mobile';
 
 const getAccount = makeGetAccount();
 
@@ -43,8 +45,8 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
     const accountBio = { __html: account.get('note_emojified') };
     let followed_by  = account.getIn(['relationship', 'followed_by']);
 
-    return visible && (
-      <div className='profile-hover-card'>
+    return (
+      <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}>
         <div className='profile-hover-card__container'>
           <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
           <UserPanel className='profile-hover-card__user' accountId={accountId} />
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index a88395e2a..56dec3dd8 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -16,7 +16,8 @@ import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
 import { StatusInteractionBar } from './status_interaction_bar';
-import UserPanel from '../../ui/components/user_panel';
+import ProfileHoverCardContainer from 'soapbox/features/profile_hover_card/profile_hover_card_container';
+import { isMobile } from 'soapbox/is_mobile';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -39,9 +40,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   state = {
     height: null,
-    profilePanelVisible: false,
-    profilePanelX: 0,
-    profilePanelY: 0,
+    profileCardVisible: false,
   };
 
   handleOpenVideo = (media, startTime) => {
@@ -85,21 +84,19 @@ export default class DetailedStatus extends ImmutablePureComponent {
     window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
   }
 
-  isMobile = () => window.matchMedia('only screen and (max-width: 895px)').matches;
-
   handleProfileHover = e => {
-    if (!this.isMobile()) this.setState({ profilePanelVisible: true, profilePanelX: e.nativeEvent.offsetX, profilePanelY: e.nativeEvent.offsetY });
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
   }
 
   handleProfileLeave = e => {
-    if (!this.isMobile()) this.setState({ profilePanelVisible: false });
+    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
   }
 
   render() {
     const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
     const outerStyle = { boxSizing: 'border-box' };
     const { compact } = this.props;
-    const { profilePanelVisible, profilePanelX, profilePanelY } = this.state;
+    const { profileCardVisible } = this.state;
 
     if (!status) {
       return null;
@@ -176,9 +173,10 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <div className='detailed-status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
             <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='detailed-status__display-name'>
               <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
-              <DisplayName account={status.get('account')} />
-              <UserPanel accountId={status.getIn(['account', 'id'])} visible={profilePanelVisible} style={{ top: `${profilePanelY+15}px`, left: `${profilePanelX-132}px` }} />
             </NavLink>
+            <DisplayName account={status.get('account')}>
+              <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
+            </DisplayName>
           </div>
 
           {status.get('group') && (
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index ed99d923f..d8c47175d 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -1,17 +1,25 @@
 .display-name__account {
   position: relative;
+  cursor: pointer;
 }
 
 .profile-hover-card {
   @include standard-panel;
   position: absolute;
+  pointer-events: none;
   opacity: 0;
   transition-property: opacity;
-  transition-duration: 0.5s;
+  transition-duration: 0.2s;
+  transition-delay: 0.7s;
   z-index: 998;
-  opacity: 1;
-  transition-delay: 1s;
   left: -10px;
+  top: 70px;
+
+  &--visible {
+      opacity: 1;
+      pointer-events: all;
+    }
+
 
   @media(min-width: 750px) {
     left: -80px;
@@ -45,6 +53,7 @@
       margin-right: 5px;
       border-radius: 3px;
       font-size: 11px;
+      opacity: 1;
     }
   }
 
@@ -52,3 +61,10 @@
     margin: 0 20px 20px;
   }
 }
+
+.detailed-status {
+  .profile-hover-card {
+    top: -20px;
+    left: 80px;
+  }
+}