Slideshow navigation update and update React version

package.json

@@ -118,9 +118,9 @@
     "qs": "^5.2.0",
     "raf": "^3.2.0",
     "rc-slider": "^3.7.2",
-    "react": "^15.1.0",
+    "react": "^15.2.0",
     "react-addons-css-transition-group": "^15.2.0",
-    "react-addons-test-utils": "^0.14.0",
+    "react-addons-test-utils": "^15.2.0",
     "react-burger-menu": "^1.4.4",
     "react-dom": "^15.1.0",
     "react-flex-carousel": "^0.1.7",
@@ -162,7 +162,7 @@
     "chai": "^3.3.0",
     "chai-as-promised": "^5.1.0",
     "compression": "^1.6.0",
-    "eslint": "1.8.0",
+    "eslint": "1.10.3",
     "eslint-config-rackt": "^1.1.1",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-babel": "^3.0.0",

src/components/article/Audio.js

@@ -191,12 +191,12 @@ class Audio extends React.Component {
   }
 
   render() {
-    const { content } = this.props
+    const { content, device } = this.props
     const {  duration, isFocused, isOncePlayed, isPlaying, seek } = this.state
     const { url, coverPhoto, title, description } = _.get(content, 0, {})
 
     return (
-      <div className={classNames(styles['audio-container'], 'row')}>
+      <div className={classNames(styles['audio-container'], { [styles['mobile']]: device === 'mobile' ? true : false })}>
         <div className={styles['audio-coverphoto']} onClick={this.handleMouseClick} onMouseEnter={this.handleOnMouseOver} onMouseLeave={this.handleOnMouseOut}>
           <div className={styles['audio-img-filter']} style={ isOncePlayed ? {
             opacity: 1
@@ -235,12 +235,14 @@ class Audio extends React.Component {
 
 Audio.propTypes = {
   content: React.PropTypes.array.isRequired,
-  customStyles: React.PropTypes.array
+  customStyles: React.PropTypes.array,
+  device: React.PropTypes.string
 }
 
 Audio.defaultProps = {
   content: [],
-  customStyles: []
+  customStyles: [],
+  device: ''
 }
 
 export { Audio }

src/components/article/Audio.scss

@@ -8,6 +8,10 @@
 
   background-color: $white;
 
+  &.mobile {
+    width: 100%;
+  }
+
   .audio-coverphoto {
     position: relative;
     width: 100%;
@@ -84,6 +88,8 @@
       font-size: rem(15px);
       line-height: 1.5;
       color: $gray-50;
+      // reset margin 
+      margin: 0;
     }
   }
 }

src/components/article/BlockAlignmentWrapper.js

@@ -1,4 +1,5 @@
 'use strict'
+import classNames from 'classnames'
 import styles from './BlockAlignmentWrapper.scss'
 import React, { Component } from 'react'
 
@@ -14,10 +15,10 @@ export default function WrapComponent(WrappedComponent) {
     }
 
     render() {
-      const { alignment } = this.props
+      const { alignment, device } = this.props
 
       return (
-        <div className={styles[`align-${alignment}`]}>
+        <div className={classNames(styles[`align-${alignment}`], { [styles['mobile']]: device === 'mobile' ? true : false })}>
           <WrappedComponent
             content={this.props.content}
             customeStyles={this.props.customeStyles}

src/components/article/BlockAlignmentWrapper.scss

@@ -6,10 +6,15 @@
   margin-bottom: $twreporter-line-height;
 }
 
+.mobile {
+  width: 100%;
+  float: none;
+}
+
 .align-extend {
   @extend .align-wrapper;
   /* TBD needs to wait for mockup */
-  max-width: 1vw;
+  max-width: 100vw;
 }
 
 .align-left {

src/components/article/Image.js

@@ -1,10 +1,12 @@
+/*eslint no-unused-vars: [2, { "args": "none" }]*/
 'use strict'
 import _ from 'lodash'
 import classNames from 'classnames'
 import FitwidthMixin from './mixins/FitwidthMixin'
 import { getScreenType } from '../../lib/screen-type'
 import BlockAlignmentWrapper from './BlockAlignmentWrapper'
 import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 import LazyLoad from 'react-lazy-load'
 import styles from './Image.scss'
 import UI_SETTING from '../../constants/ui-settings'
@@ -36,6 +38,12 @@ class Image extends FitwidthMixin(Component) {
     if (super.componentDidMount) super.componentDidMount()
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (ReactDOM.findDOMNode(this)) {
+      this.fitToParentWidth()
+    }
+  }
+
   _renderPlaceHoderImage(imageUrl, imgStyle) {
     if (imageUrl) {
       return (

src/components/article/ImageDiff.js

@@ -37,6 +37,12 @@ class ImageDiff extends FitwidthMixin(Component) {
     if (super.componentDidMount) super.componentDidMount()
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (ReactDOM.findDOMNode(this)) {
+      this.fitToParentWidth()
+    }
+  }
+
   _renderFigure(imageObj, imgStyle) {
     if (_.get(imageObj, 'url')) {
       return (

src/components/article/InfoBox.js

@@ -6,14 +6,17 @@ import styles from './InfoBox.scss'
 import BlockAlignmentWrapper from './BlockAlignmentWrapper'
 import React from 'react' // eslint-disable-next-line
 
-export const InfoBox = ({ content }) => {
+export const InfoBox = ({ content, device }) => {
   let infoBox = _.get(content, [ 0 ], {})
 
   return (
     <div className="row">
-      <div className={classNames('inner-max', 'center-block', styles.infoBoxContainer)}>
+      <div className={classNames('inner-max', 'center-block',
+        styles['infobox-container'],
+        { [styles['mobile']]: device === 'mobile' ? true : false }
+      )}>
         <img src={boxSvg} />
-        <div className={styles.infoBoxText}>
+        <div className={styles['infobox-text']}>
           <h4>
             {infoBox.title}
           </h4>

src/components/article/InfoBox.scss

@@ -3,7 +3,20 @@
 @import '../../themes/font-mixins.scss';
 @import '../../themes/media-queries.scss';
 
-.infoBoxContainer {
+@include mq($max-width: $screen-xs-max) {
+  .infobox-text {
+    h4 {
+      font-size: rem(20);
+      line-height: 1.2;
+    }
+    >div {
+      font-size: rem(15);
+      line-height: 1.8;
+    }
+  }
+}
+
+.infobox-container {
   $logo-width: rem(23);
   $logo-height: rem(24);
   background-color: $white;
@@ -19,7 +32,7 @@
       margin-top: -($logo-height / 2);
   }
 
-  .infoBoxText {
+  .infobox-text {
     padding: rem(36) rem(24) 0 rem(24);
     h4 {
       color: $gray-15;
@@ -38,18 +51,11 @@
       width: 100%;
     }
   }
-}
 
-@include mq($max-width: $screen-xs-max) {
-  .infoBoxText {
-    h4 {
-      font-size: rem(20);
-      line-height: 1.2;
-    }
-
-    >div {
-      font-size: rem(15);
-      line-height: 1.8;
+  &.mobile {
+    .infobox-text {
+      @extend .infobox-text;
     }
   }
 }
+

src/components/article/slideshow/navigation.js

@@ -1,27 +1,30 @@
 'use strict'
+import classNames from 'classnames'
+import disabledLeftNav from '../../../../static/asset/disabled-left-arrow.svg'
+import disabledRightNav from '../../../../static/asset/disabled-right-arrow.svg'
 import leftNav from '../../../../static/asset/left-arrow.svg'
 import rightNav from '../../../../static/asset/right-arrow.svg'
 import styles from './navigation.scss'
 import React from 'react'
 
 const navigation = (props) => {
 
-  const { onSlideLeft, onSlideRight } = props
+  const { onSlideLeft, onSlideRight, isLeftNavDisabled, isRightNavDisabled } = props
 
   return (
     <span key="navigation">
       <img
-        className={styles['ss-left-nav']}
+        className={classNames(styles['ss-left-nav'], { [styles['disabled']]: isLeftNavDisabled })}
         onTouchStart={onSlideLeft}
         onClick={onSlideLeft}
-        src={leftNav}
+        src={ isLeftNavDisabled ? disabledLeftNav : leftNav }
       />
 
       <img
-        className={styles['ss-right-nav']}
+        className={classNames(styles['ss-right-nav'], { [styles['disabled']]: isRightNavDisabled })}
         onTouchStart={onSlideRight}
         onClick={onSlideRight}
-        src={rightNav}
+        src={ isRightNavDisabled ? disabledRightNav : rightNav }
       />
     </span>
   )

src/components/article/slideshow/navigation.scss

@@ -15,11 +15,19 @@
   left: 0;
   top: 0;
   bottom: 0;
+
+  &.disabled {
+    cursor: auto;
+  }
 }
 
 .ss-right-nav {
   @extend .ss-nav;
   right: 0;
   top: 0;
   bottom: 0;
+
+  &.disabled {
+    cursor: auto;
+  }
 }

src/components/article/slideshow/slideshow.js

@@ -11,7 +11,7 @@ import Thumbnails from './thumbnails'
 import React, { Component } from 'react' // eslint-disable-line
 import UI_SETTING from '../../../constants/ui-settings'
 
-export class Slideshow extends Component {
+class Slideshow extends Component {
   constructor(props, context) {
     super(props, context)
     this.state = {
@@ -109,9 +109,8 @@ export class Slideshow extends Component {
 
 
   render() {
-    const { content } = this.props
+    const { content, device } = this.props
     const { currentIndex } = this.state
-    // let items = this._prepareItemsForImageGallery(content)
     let { slides, thumbnails } = this._parseContent(content)
 
     let description = _.get(content, [ currentIndex, 'description' ], '')
@@ -122,7 +121,7 @@ export class Slideshow extends Component {
 
     return (
       <div
-        className={classNames(styles['ss-container'], 'row')}
+        className={classNames(styles['ss-container'], { [styles['mobile']]: device === 'mobile' ? true : false })}
         ref={i => this._slideshow = i}
       >
         <LazyLoad offsetTop={UI_SETTING.image.loadingOffset.placeholder}>
@@ -144,6 +143,8 @@ export class Slideshow extends Component {
               <Navigation
                 onSlideLeft={this.slideLeft}
                 onSlideRight={this.slideRight}
+                isLeftNavDisabled={currentIndex === 0 ? true : false}
+                isRightNavDisabled={currentIndex === _.get(content, 'length', 0) - 1 ? true : false}
               />
               <div className={styles['ss-thumbnails']} style={{
                 width: thumbnailsWidth
@@ -167,3 +168,16 @@ export class Slideshow extends Component {
   }
 }
 
+Slideshow.propTypes = {
+  content: React.PropTypes.array.isRequired,
+  customStyles: React.PropTypes.array,
+  device: React.PropTypes.string
+}
+
+Slideshow.defaultProps = {
+  content: [],
+  customStyles: [],
+  device: ''
+}
+
+export { Slideshow }

src/components/article/slideshow/slideshow.scss

@@ -6,6 +6,10 @@
 .ss-container {
   overflow: hidden;
 
+  &.mobile {
+    width: 100%;
+  }
+
   .ss-slides {
     width: 100%;
   }

src/containers/Article.js

@@ -176,11 +176,9 @@ export default class Article extends Component {
           </div>
 
           <div className="row outer-max center-block">
-            <div className="col-md-12">
-              <ArticleComponents.Body
-                data={bodyData}
-              />
-            </div>
+            <ArticleComponents.Body
+              data={bodyData}
+            />
           </div>
 
           <div ref="progressEnding" className="inner-max center-block">