Merge branch 'profile-hover-cards' into 'develop'

Profile hover cards

See merge request soapbox-pub/soapbox-fe!114

app/styles/components/display-name.scss

@@ -41,6 +41,7 @@ a.account__display-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  position: relative;
 }
 
 .display-name__html {

app/styles/components/drawer.scss

@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .drawer__pager {

app/styles/components/profile_hover_card.scss

@@ -0,0 +1,96 @@
+.display-name__account {
+  position: relative;
+  cursor: pointer;
+}
+
+.display-name .profile-hover-card {
+  white-space: normal;
+}
+
+.profile-hover-card {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.2s;
+  transition-delay: 0.7s;
+  width: 300px;
+  z-index: 998;
+  left: -10px;
+  padding-top: 20px;
+  margin-bottom: 10px;
+
+  &--visible {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  @media(min-width: 750px) {
+    left: -80px;
+  }
+
+  .profile-hover-card__container {
+    @include standard-panel;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .profile-hover-card__action-button {
+    z-index: 999;
+    position: absolute;
+    right: 20px;
+    top: 120px;
+  }
+
+  .user-panel {
+    box-shadow: none;
+    width: auto;
+
+    .user-panel-stats-item a strong {
+      text-decoration: none;
+    }
+  }
+
+  .relationship-tag {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 1;
+  }
+
+  .profile-hover-card__badges {
+    margin: 0 20px 20px;
+    display: flex;
+
+    .badge {
+      padding: 2px 4px;
+      margin-right: 5px;
+      border-radius: 3px;
+      font-size: 11px;
+      opacity: 1;
+    }
+  }
+
+  .profile-hover-card__bio {
+    margin: 0 20px 20px;
+    max-height: 4em;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 20px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
+    }
+  }
+}
+
+.detailed-status {
+  .profile-hover-card {
+    top: 0;
+    left: 80px;
+  }
+}

app/styles/components/status.scss

@@ -210,7 +210,6 @@
 .status__info .status__display-name {
   display: block;
   max-width: 100%;
-  padding-right: 25px;
 }
 
 .status__info {
@@ -218,6 +217,11 @@
   z-index: 4;
 }
 
+.status__profile,
+.detailed-status__profile {
+  display: inline-block;
+}
+
 .status-check-box {
   border-bottom: 1px solid var(--background-color);
   display: flex;

app/styles/components/user-panel.scss

@@ -3,7 +3,13 @@
   display: flex;
   width: 265px;
   flex-direction: column;
-  overflow-y: hidden;
+
+  &,
+  .user-panel__account__name,
+  .user-panel__account__username {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   &__header {
     display: block;