Merge pull request #535 from coralproject/report-popup-fix

position the reporting popup in a more reliable way

client/coral-embed-stream/style/default.css

@@ -352,17 +352,6 @@ button.comment__action-button[disabled],
 
 /* Flag Styles */
 
-.coral-plugin-flags-container {
-  position: relative;
-}
-
-.coral-plugin-flags-popup span {
-  min-width: 280px;
-  bottom: 36px;
-  position: absolute;
-  right: 10px;
-}
-
 .coral-plugin-flags-popup-form {
   margin-bottom: 10px;
 }
@@ -399,6 +388,7 @@ button.comment__action-button[disabled],
   margin-top: 5px;
   width: 75%;
   font-size: 16px;
+  border: 1px solid #ccc;
 }
 
 /* Close comments */

client/coral-plugin-flags/FlagButton.js

@@ -19,6 +19,12 @@ class FlagButton extends Component {
     localDelete: false
   }
 
+  componentDidUpdate () {
+    if (this.popup) { // this will be defined when the reporting popup is opened
+      this.popup.firstChild.style.top = `${this.flagButton.offsetTop - this.popup.firstChild.clientHeight - 15}px`;
+    }
+  }
+
   // When the "report" button is clicked expand the menu
   onReportClick = () => {
     const {currentUser, deleteAction, flaggedByCurrentUser, flag} = this.props;
@@ -135,7 +141,10 @@ class FlagButton extends Component {
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
     return <div className={`${name}-container`}>
-      <button onClick={!this.props.banned ? this.onReportClick : null} className={`${name}-button`}>
+      <button
+        ref={ref => this.flagButton = ref}
+        onClick={!this.props.banned ? this.onReportClick : null}
+        className={`${name}-button`}>
         {
           flagged
           ? <span className={`${name}-button-text`}>{lang.t('reported')}</span>
@@ -147,7 +156,7 @@ class FlagButton extends Component {
       </button>
       {
         this.state.showMenu &&
-        <div className={`${name}-popup`}>
+        <div className={`${name}-popup`} ref={ref => this.popup = ref}>
           <PopupMenu>
             <div className={`${name}-popup-header`}>{popupMenu.header}</div>
             {

client/coral-ui/components/PopupMenu.css

@@ -1,13 +1,17 @@
 .popupMenu {
-  display: inline-block;
-  width: inherit;
+  white-space: normal;
+  display: block;
+  position: absolute;
+  max-width: 98%;
+  min-width: 50%;
   border: solid 1px #999;
   box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   background: white;
   border-radius: 3px;
   padding: 20px 10px;
-  z-index: 3;
+  z-index: 300;
+  right: 1%;
 }
 
 .popupMenu:before{

client/coral-ui/components/PopupMenu.js

@@ -2,5 +2,5 @@ import React from 'react';
 import styles from './PopupMenu.css';
 
 export default ({children}) => (
-  <span className={styles.popupMenu}>{children}</span>
+  <div className={styles.popupMenu}>{children}</div>
 );