Fix cover-up tooltip

frontend/package.json

@@ -57,6 +57,7 @@
     "react-addons-css-transition-group": "^15.4.1",
     "react-addons-perf": "^15.4.1",
     "react-addons-transition-group": "^15.4.1",
+    "react-append-to-body": "^2.0.1",
     "react-bootstrap": "^0.30.7",
     "react-dom": "^15.4.1",
     "react-flexbox-grid": "^0.10.2",

frontend/src/components/AllocationFiles/AllocationFiles.js

@@ -284,8 +284,10 @@ class AllocationFiles extends Component {
     }
 
     const oversizedWarning = !this.props.file.Oversized ? '' : (
-      <span>
-        <i className='pe-7s-attention' data-tip data-for={ `tooltip-${this.props.file.File}` }></i>
+      <span style={{ position: 'relative', top: 7, right: 6}}>
+        <FontIcon className='material-icons' data-tip data-for={ `tooltip-${this.props.file.File}` }>
+          report_problem
+        </FontIcon>
         <span>
           <ReactTooltip id={ `tooltip-${this.props.file.File}` }>
             <span className='file-size-warning'>
@@ -315,6 +317,13 @@ class AllocationFiles extends Component {
 
     const title = <span>Current path: <strong>{this.props.location.query.path || '/'}</strong></span>
     const padding = { padding: 10 }
+    const headline = {
+      ...padding,
+      display: 'flex',
+      'justify-content': 'space-between',
+      'align-items': 'center  '
+    }
+
 
     return (
       <Grid fluid style={{ padding: 0 }}>
@@ -327,7 +336,7 @@ class AllocationFiles extends Component {
           </Col>
           <Col key='content-pane' xs={ 12 } sm={ 12 } md={ 6 } lg={ 8 }>
             <Paper>
-              <div key='headline' style={ padding }>File: { fileName } { downloadBtn }</div>
+              <div key='headline' style={ headline }>File: { fileName } { downloadBtn }</div>
               <div key='contents' style={ padding } className='content-file' ref={ (c) => { this.content = c } }>
                 { this.state.contents }
               </div>

frontend/src/components/AllocationStatusIcon/AllocationStatusIcon.js

@@ -1,5 +1,5 @@
 import React, { PureComponent, PropTypes } from 'react'
-import ReactTooltip from 'react-tooltip'
+import AppendedReactTooltip from '../AppendedReactTooltip/AppendedReactTooltip'
 import FontIcon from 'material-ui/FontIcon'
 import { amber500, green500, red500 } from 'material-ui/styles/colors'
 
@@ -44,9 +44,9 @@ class AllocationStatusIcon extends PureComponent {
 
     return (
       <div>
-        <ReactTooltip id={ `client-status-${allocation.ID}` }>
+        <AppendedReactTooltip id={ `client-status-${allocation.ID}` }>
           { allocation.ClientStatus } -&gt; { allocation.DesiredStatus }
-        </ReactTooltip>
+        </AppendedReactTooltip>
         <span data-tip data-for={ `client-status-${allocation.ID}` }>{ icon }</span>
       </div>
     )

frontend/src/components/AppendedReactTooltip/AppendedReactTooltip.js

@@ -0,0 +1,4 @@
+import ReactTooltip from 'react-tooltip'
+import {componentWillAppendToBody} from 'react-append-to-body'
+
+export default componentWillAppendToBody(ReactTooltip)

frontend/src/components/FormatTime/FormatTime.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import ReactTooltip from 'react-tooltip'
+import AppendedReactTooltip from '../AppendedReactTooltip/AppendedReactTooltip'
 // eslint-disable-next-line no-unused-vars
 import momentDurationFormat from 'moment-duration-format'
 import moment from 'moment'
@@ -22,7 +22,7 @@ const FormatTime = ({ time, now, identifier, display, timeFormat, durationInterv
   if (display === 'relative') {
     return (
       <span>
-        <ReactTooltip id={ `time-${identifier}` }>{ _time.format(timeFormat) }</ReactTooltip>
+        <AppendedReactTooltip id={ `time-${identifier}` }>{ _time.format(timeFormat) }</AppendedReactTooltip>
         <span data-tip data-for={ `time-${identifier}` }>
           { timeDiff }
         </span>
@@ -32,7 +32,7 @@ const FormatTime = ({ time, now, identifier, display, timeFormat, durationInterv
 
   return (
     <span>
-      <ReactTooltip id={ `time-${identifier}` }>{ timeDiff }</ReactTooltip>
+      <AppendedReactTooltip id={ `time-${identifier}` }>{ timeDiff }</AppendedReactTooltip>
       <span data-tip data-for={ `time-${identifier}` }>{ _time.format(timeFormat) }</span>
     </span>
   )

frontend/yarn.lock

@@ -185,18 +185,7 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-autoprefixer@^6.3.1:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.3.tgz#2d853af66d04449fcf50db3066279ab54c3e4b01"
-  dependencies:
-    browserslist "~1.4.0"
-    caniuse-db "^1.0.30000578"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^5.2.5"
-    postcss-value-parser "^3.2.3"
-
-autoprefixer@^6.6.0:
+autoprefixer@^6.3.1, autoprefixer@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.0.tgz#d5b347ebbaf79e79d30b81c0ee3e482b288527bf"
   dependencies:
@@ -782,21 +771,7 @@ babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-te
     babylon "^6.11.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.20.0.tgz#5378d1a743e3d856e6a52289994100bbdfd9872a"
-  dependencies:
-    babel-code-frame "^6.20.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.20.0"
-    babel-types "^6.20.0"
-    babylon "^6.11.0"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.21.0:
+babel-traverse@^6.15.0, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0:
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
   dependencies:
@@ -810,16 +785,7 @@ babel-traverse@^6.21.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.20.0, babel-types@^6.8.0, babel-types@^6.9.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.20.0.tgz#3869ecb98459533b37df809886b3f7f3b08d2baa"
-  dependencies:
-    babel-runtime "^6.20.0"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babel-types@^6.21.0:
+babel-types@^6.15.0, babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.21.0, babel-types@^6.8.0, babel-types@^6.9.0:
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
   dependencies:
@@ -915,12 +881,6 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
-  dependencies:
-    caniuse-db "^1.0.30000539"
-
 browserslist@~1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.1.tgz#67c3f2a1a6ad174cd01d25d2362e6e6083b26986"
@@ -987,10 +947,6 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578:
-  version "1.0.30000592"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000592.tgz#7b916023941df4063d9d946a1f9ad0d5edaf2bcd"
-
 caniuse-db@^1.0.30000601, caniuse-db@^1.0.30000602:
   version "1.0.30000602"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000602.tgz#06b2cbfb6c3aeef7ddb18cd588043549ad1a2d4e"
@@ -3698,7 +3654,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.5, postcss@^5.2.6:
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.6:
   version "5.2.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.6.tgz#a252cd67cd52585035f17e9ad12b35137a7bdd9e"
   dependencies:
@@ -3808,6 +3764,10 @@ raf@^3.2.0:
   dependencies:
     performance-now "~0.2.0"
 
+ramda@^0.22.1:
+  version "0.22.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.22.1.tgz#031da0c3df417c5b33c96234757eb37033f36a0e"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -3859,6 +3819,15 @@ react-addons-test-utils@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/react-addons-transition-group/-/react-addons-transition-group-15.4.1.tgz#27d92717089c5e2db202e654a85b76a41b703acc"
 
+react-append-to-body@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-append-to-body/-/react-append-to-body-2.0.1.tgz#c80f18a26d0ed75cc9fdf983521d3f3d00f70717"
+  dependencies:
+    node-uuid "^1.4.7"
+    ramda "^0.22.1"
+    react "^15.4.1"
+    react-dom "^15.4.1"
+
 react-bootstrap@^0.30.7:
   version "0.30.7"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.30.7.tgz#39da80088693ecb71e8e63b5bdc313571fd993d1"