Merge pull request #50 from mrbot-ai/feature/hide_when_not_connected

Feature/hide when not connected

Author: Nathan Zylbersztejn

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## 0.5.3
 - Added the parameter hideWhenNotConnected to not display the widget when the server is not connected (defaults to true)
 - Fixed issue where the 'connected' property was being loaded from previous session instead of being triggered on actual connection
+- Reduced the size of the widget container on mobile and in fullscreen mode (blocking clicks)
 
 ## 0.5.2
 - Added support for custom images for open and close buttons of chatWidget interface

src/components/Widget/layout.js

@@ -13,12 +13,17 @@ const WidgetLayout = (props) => {
   }
   const showCloseButton = props.showCloseButton !== undefined ? props.showCloseButton : !props.embedded;
   const isVisible = props.isChatVisible && !(props.hideWhenNotConnected && !props.connected);
+  const chatShowing = (props.isChatOpen || props.embedded);
+
+  if (chatShowing && !props.embedded) {
+    classes.push('chat-open');
+  }
 
   return (
     isVisible ?
     <div className={classes.join(' ')}>
       {
-        (props.isChatOpen || props.embedded) &&
+        chatShowing &&
         <Conversation
           title={props.title}
           subtitle={props.subtitle}

src/components/Widget/style.scss

@@ -13,7 +13,7 @@
   align-items: flex-end;
   justify-content: flex-end;
 
-  &.full-screen {
+  &.full-screen.chat-open {
     @include widget-container-fs;
   }
 }
@@ -32,7 +32,7 @@
 }
 
 @media screen and (max-width: 800px) {
-  .widget-container {
+  .widget-container.chat-open {
     @include widget-container-fs;
   }
 }