Merge pull request #13 from Financial-Times/feature/header-license-dr…

…opdown

license dropdown position adjustment

src/components/header-top/index.js

@@ -15,7 +15,7 @@ class HeaderTop extends Component {
     const { headerTitle } = this.props;
 
     return (
-      <div className='o-header-services__top o-header-services__container'>
+      <div className='o-header-services__top o-header-services__container kmt-header__top'>
 
         {this.props.enableMobileMenu === true
           ? <div className='o--if-js o-header-services__hamburger'>

src/components/header-top/style.scss

@@ -0,0 +1,3 @@
+.kmt-header__top {
+  position: static;
+}

src/components/license-dropdown/index.js

@@ -1,8 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import Delegate from 'ftdomdelegate';
-import viewport from 'o-viewport';
 import oDom from 'o-dom';
-import { toggleDropdown, updateDropdownStyle } from "../../actions/license-dropdown";
+import { toggleDropdown } from "../../actions/license-dropdown";
 import { changeLicense } from "../../actions/license-change";
 let componentEventsBound = false;
 
@@ -11,18 +10,14 @@ class LicenseDropdown extends Component {
     super(props);
 
     this.toggleDropdown = this.toggleDropdown.bind(this);
-    this.positionDropdown = this.positionDropdown.bind(this);
     this.licenseChanged = this.licenseChanged.bind(this);
-    this.onWindowResize = this.onWindowResize.bind(this);
     this.handleBodyClick = this.handleBodyClick.bind(this);
     this.trimLicenseId = this.trimLicenseId.bind(this);
 
     // because this uses the same state (no matter how many times it's used) we need to bind the events only once
     if (componentEventsBound !== true) {
-      viewport.listenTo('resize');
       this.theDoc = new Delegate();
       this.theDoc.root(document.body);
-      this.theDoc.on('oViewport.resize', 'body', this.onWindowResize);
       this.theDoc.on('click', 'body', this.handleBodyClick);
 
       componentEventsBound = true;
@@ -34,14 +29,6 @@ class LicenseDropdown extends Component {
     return JSON.stringify(nextProps) !== JSON.stringify(this.props);
   }
 
-  componentDidUpdate (prevProps, prevState) {
-    // if it's not in the mobile container AND if it needs to be shown AND if it was hidden
-    if (this.props.mobile !== true && this.props.licenseData.show === true && prevProps.licenseData.show !== this.props.licenseData.show) {
-      // calculate its position
-      this.positionDropdown();
-    }
-  }
-
   toggleDropdown(e) {
     // toggle the dropdown
     this.props.dispatch(toggleDropdown());
@@ -54,35 +41,6 @@ class LicenseDropdown extends Component {
     }
   }
 
-  positionDropdown() {
-    // if it's not in the mobile container AND if it needs to be shown
-    if (this.props.mobile !== true && this.props.licenseData.show === true) {
-      const theWrapper = this.refs.theWrapper;
-
-      // if the wrapper is found and visible
-      if (theWrapper && theWrapper.offsetWidth > 0) {
-        const theStyle = {};
-        const containerPosition = theWrapper.getBoundingClientRect();
-        const viewportWidth = viewport.getSize(true).width;
-        // calculate the right position
-        theStyle.right = viewportWidth - (containerPosition.left + theWrapper.offsetWidth);
-
-        if (theStyle.right < 0) {
-          theStyle.right = 0;
-        }
-
-        // if the right position has changed
-        if (this.props.licenseData.style.right !== theStyle.right) {
-          this.props.dispatch(updateDropdownStyle(theStyle));
-        }
-      }
-    }
-  }
-
-  onWindowResize () {
-    this.positionDropdown();
-  }
-
   licenseChanged (e) {
     // trigger a change action
     this.props.dispatch(changeLicense(e.target.value));
@@ -121,7 +79,7 @@ class LicenseDropdown extends Component {
           <span className="kmt-header__license-used">{licenseData.selected.label}</span>
         </div>
         <div className={dropdownCls} style={this.props.mobile !== true ? licenseData.style : {}}>
-          <select className="o-forms__select" onChange={this.licenseChanged} defaultValue={licenseData.selected.licenceId}>
+          <select className="o-forms__select kmt-forms__select" onChange={this.licenseChanged} defaultValue={licenseData.selected.licenceId}>
             {
               licenseData.items.map((item, index) => {
                 return <option value={item.licenceId} key={index}>{item.label} - {this.trimLicenseId(item.licenceId)}</option>;

src/components/license-dropdown/style.scss

@@ -12,6 +12,10 @@
             padding: 0;
             position: relative;
             background-color: transparent;
+
+            .kmt-forms__select {
+              max-width: 100%;
+            }
           }
 
           &__license {
@@ -58,7 +62,7 @@
       display: none;
       margin-top: 1px;
       padding: 20px;
-      position: fixed;
+      position: absolute;
       background-color: oColorsGetPaletteColor("warm-4");
       cursor: auto;
       z-index: 1;

style/main.scss

@@ -62,3 +62,4 @@ body {
 @import '../src/components/header-nav/style';
 @import '../src/components/feedback-form/style';
 @import '../src/components/overlay/style';
+@import '../src/components/header-top/style';