Merge branch 'develop' into develop

Author: marcodearaujo

app/components/IClient/styles.css

@@ -3,3 +3,17 @@
     background-color: #00d1b2;
     color: #333;
 }
+
+.withPadding {
+    padding-top: 30px;
+}
+
+.withoutPadding {
+    padding-top: 0px;
+}
+
+@media screen and (max-width: 768px) {
+    .body-primary {
+        padding-top: 30px;
+    }
+}

app/components/NavMenu/NavMenu.js

@@ -7,6 +7,8 @@ class NavMenu extends React.Component
     constructor(props, context) {
         super(props, context);
         this.toggleNavStatus = this.toggleNavStatus.bind(this);
+        this.isMobile = this.isMobile.bind(this);
+        this.isNotMobile = this.isNotMobile.bind(this);
         this.hide = this.hide.bind(this);
         this.state = {
             toggleNavStatus: ''
@@ -28,17 +30,38 @@ class NavMenu extends React.Component
         this.setState({toggleNavStatus: isActive});
     }
 
+    isMobile() {
+        if (window.screen.width < 768) {
+            return this.showOfflineInfo();
+        }
+        return '';
+    }
+
+    isNotMobile() {
+        if (window.screen.width > 768) {
+            return this.showOfflineInfo();
+        }
+        return '';
+    }
+
+    showOfflineInfo() {
+        return (
+            <span className="nav-center nav-item">
+                <Offline />
+            </span>
+        );
+    }
+
     render() {
         return (
             <nav className="nav has-shadow" id="top">
                 <div className="container">
                     <div className="nav-left">
                         <a className="nav-item" href="../index.html">IClient</a>
+                        {this.isMobile()}
                     </div>
                     <span className="nav-center nav-menu is-active">
-                        <span className="nav-item">
-                            <Offline />
-                        </span>
+                        {this.isNotMobile()}
                     </span>
                     <span className={ `nav-toggle ${this.state.toggleNavStatus}` } onClick={this.toggleNavStatus}>
                         <span></span>

tests/NavMenu.test.js

@@ -57,5 +57,40 @@ describe('Test NavMenu', () => {
 
         done();
     });
+
+    it('should show message of offline with mobile screen', (done) => {
+
+        window.screen.__defineGetter__('width', function(){
+            return 600;
+        });
+
+        let component = shallow(
+            <NavMenu />
+        );
+
+        component.instance().setState({ toggleNavStatus: 'whatever'} );
+        expect(component.state().toggleNavStatus).toEqual('whatever');
+        component.instance().hide(null);
+        expect(component.state().toggleNavStatus).toEqual('');
+
+        done();
+    });
+
+    it('should show message of offline with desktop screen', (done) => {
+
+        window.screen.__defineGetter__('width', function(){
+            return 900;
+        });
+
+        let component = shallow(
+            <NavMenu />
+        );
+        component.instance().setState({ toggleNavStatus: 'whatever'} );
+        expect(component.state().toggleNavStatus).toEqual('whatever');
+        component.instance().hide(null);
+        expect(component.state().toggleNavStatus).toEqual('');
+
+        done();
+    });
 });