Merge pull request #221 from Mibew/responsive

Implement responsive design for mobile devices

src/mibew/js/source/chat_popup.js

@@ -292,6 +292,12 @@ var Mibew = Mibew || {};
         // Call parent constructor.
         BasePopup.call(this, options);
 
+        /**
+         * Wrapper for popup iframe DOM Element.
+         * @type {Node}
+         */
+        this.wrapperDiv = null;
+
         /**
          * Popup iframe DOM Element.
          * @type {Node}
@@ -384,20 +390,23 @@ var Mibew = Mibew || {};
             return;
         }
 
-        if (!this.iframe) {
+        if (!this.wrapperDiv) {
-            // Create new iframe.
+            // Create new iframe and its wrapper.
             // There is a bug in IE <= 7 that make "name" attribute unchangeble
             // for elements that already exist. Thus a temporary div is used
             // here as a workaround.
-            var tmpDiv = document.createElement('div');
+            this.wrapperDiv = document.createElement('div');
-            tmpDiv.innerHTML = '<iframe name="mibewChat' + this.id + '"></iframe>';
+            this.wrapperDiv.className = 'mibew-chat-wrapper';
+            this.wrapperDiv.setAttribute('id', 'mibew-chat-wrapper-' + this.id);
+            this.wrapperDiv.style.display = 'none';
+            this.wrapperDiv.innerHTML = '<iframe name="mibewChat' + this.id + '"></iframe>';
 
-            this.iframe = tmpDiv.getElementsByTagName('iframe')[0];
+            this.iframe = this.wrapperDiv.getElementsByTagName('iframe')[0];
             this.iframe.setAttribute('id', 'mibew-chat-frame-' + this.id);
             this.iframe.className = 'mibew-chat-frame';
             this.iframe.setAttribute('frameBorder', 0);
-            this.iframe.style.display = 'none';
+
-            document.getElementsByTagName('body')[0].appendChild(this.iframe);
+            document.getElementsByTagName('body')[0].appendChild(this.wrapperDiv);
 
             // Setup toggle element. As it's not a part of the iframe, it should be
             // treated separately.
@@ -415,7 +424,7 @@ var Mibew = Mibew || {};
             document.getElementsByTagName('body')[0].appendChild(this.toggleDiv);
         }
 
-        this.iframe.style.display = 'block';
+        this.wrapperDiv.style.display = 'block';
         this.toggleDiv.style.display = 'block';
         this.iframe.src = url || this.buildChatUrl();
         this.isOpened = true;
@@ -430,7 +439,7 @@ var Mibew = Mibew || {};
             return;
         }
 
-        this.iframe.style.display = 'none';
+        this.wrapperDiv.style.display = 'none';
         this.iframe.src = '';
         this.isOpened = false;
         this.toggleDiv.style.display = 'none';
@@ -442,7 +451,7 @@ var Mibew = Mibew || {};
      * Toggles the popup.
      */
     Mibew.ChatPopup.IFrame.prototype.toggle = function() {
-        this.iframe.style.display = this.isMinified ? "block" : "none";
+        this.wrapperDiv.style.display = this.isMinified ? "block" : "none";
         this.isMinified = !this.isMinified;
         this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-'
             + (this.isMinified ? 'off' : 'on');

src/mibew/styles/chats/default/chat.css

@@ -83,7 +83,6 @@ img {
     background: #ffffff url("images/bottombg.gif") scroll repeat-x 0 0;
 }
 #footer {
-    width: 400px;
     margin: 0 auto;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -379,6 +378,16 @@ a:hover .image-close-window {
     width: 200px;
 }
 
+/* survey */
+#message-survey {
+    resize: none;
+}
+
+/* leavy message */
+#message-leave {
+    resize: none;
+}
+
 /* error page (error.tpl) */
 #logo-wrapper {
     position: relative;
@@ -497,7 +506,6 @@ ul li {
 #invitation-messages-region {
     height: 150px;
     min-height: 150px;
-    width: 388px;
     overflow-y: auto;
     padding: 0;
     font-weight: normal;
@@ -549,3 +557,35 @@ ul li {
     float: none;
     display: inline-block;
 }
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    body {
+        min-width: auto;
+    }
+    #footer {
+        max-width: 100%;
+    }
+    #message-leave {
+        width: 100%;
+    }
+    .username {
+        width: 100%;
+    }
+    #logo img {
+        max-width: 100%;
+    }
+    #invitation-messages-region {
+        max-width: 100%;
+    }
+}
+
+/* additional tricks for desktops */
+@media (min-width: 501px) {
+    #footer {
+        width: 400px;
+    }
+    #invitation-messages-region {
+        width: 388px;
+    }
+}

src/mibew/styles/chats/default/iframe.css

@@ -14,6 +14,15 @@
  * limitations under the License.
  */
 
+div.mibew-chat-wrapper {
+    border: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    position: fixed !important;
+    bottom: 5px !important;
+    right: 5px !important;
+}
+
 iframe.mibew-chat-frame {
     background: url("images/ajax-loader.gif") center center no-repeat #f1f2f2 !important;
     margin: 0 !important;
@@ -21,10 +30,8 @@ iframe.mibew-chat-frame {
     border: 0 !important;
     outline: 0 !important;
     border: 1px solid #aaa !important;
-    position: fixed !important;
-    bottom: 5px !important;
-    right: 5px !important;
     width: 510px !important;
+    max-width: 100% !important;
     height: 480px !important;
     overflow: hidden !important;
     z-index: 100 !important;
@@ -55,7 +62,7 @@ div.mibew-chat-frame-toggle-on {
     width: 27px !important;
     height: 480px !important;
     right: 517px !important;
-    bottom: 5px !important;
+    bottom: 9px !important;
     background: #ffffff url("images/right.png") scroll no-repeat 0 0;
 }
 
@@ -66,3 +73,11 @@ div.mibew-chat-frame-toggle-off {
     bottom: 5px !important;
     background: #ffffff url("images/default-logo-short.png") scroll no-repeat 4px 5px;
 }
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    div.mibew-chat-wrapper {
+        -webkit-overflow-scrolling: touch !important;
+        overflow-y: scroll !important;
+    }
+}

src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars

@@ -36,7 +36,7 @@
         <tr>
             <td><strong>{{l10n "Message"}}:</strong></td>
             <td valign="top">
-                <textarea name="message" tabindex="0" cols="40" rows="5">{{message}}</textarea>
+                <textarea id="message-leave" name="message" tabindex="0" cols="40" rows="5">{{message}}</textarea>
             </td>
         </tr>
     {{#if showCaptcha}}

src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars

@@ -39,7 +39,7 @@
     {{#if showMessage}}
         <tr>
             <td><strong>{{l10n "Initial Question:"}}</strong></td>
-            <td valign="top"><textarea name="message" tabindex="0" cols="45" rows="2">{{message}}</textarea></td>
+            <td valign="top"><textarea id="message-survey" name="message" tabindex="0" cols="45" rows="2">{{message}}</textarea></td>
         </tr>
     {{/if}}
     </table>

src/mibew/styles/invitations/default/invite.css

@@ -36,7 +36,6 @@
     position: fixed !important;
     bottom: 5px !important;
     right: 5px !important;
-    width: 400px !important;
     z-index: 100 !important;
     border-radius: 10px !important;
     -webkit-border-radius: 10px !important;
@@ -97,7 +96,6 @@
     max-width: 100px !important;
 }
 #mibew-invitation-frame {
-    width: 388px !important;
     height: 150px !important;
     overflow: hidden !important;
     border: 1px solid #bbc4c4 !important;
@@ -140,3 +138,24 @@
     background: -ms-linear-gradient(#e9f6fc, #c6e5f6) !important;
     background: linear-gradient(#e9f6fc, #c6e5f6) !important;
 }
+
+/* responsive design for mobile devices */
+@media only screen and (max-width: 500px) {
+    #mibew-invitation-popup {
+        max-width: 100% !important;
+    }
+    #mibew-invitation-frame {
+        max-width: 100% !important;
+    }
+}
+
+/* additional trick for desktops */
+@media (min-width: 501px) {
+    #mibew-invitation-popup {
+        width: 400px !important;
+    }
+
+    #mibew-invitation-frame {
+        width: 388px !important;
+    }
+}