From d1a1f51bf0034d46a20de5b40b0a7790de89b804 Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Tue, 16 Jan 2018 17:11:11 +0300 Subject: [PATCH 1/7] Wrap chat iframe into a div This could help make the design responsive --- src/mibew/js/source/chat_popup.js | 29 +++++++++++++++-------- src/mibew/styles/chats/default/iframe.css | 15 ++++++++---- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/mibew/js/source/chat_popup.js b/src/mibew/js/source/chat_popup.js index 692931fd..fc3ede48 100644 --- a/src/mibew/js/source/chat_popup.js +++ b/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) { - // Create new iframe. + if (!this.wrapperDiv) { + // 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'); - tmpDiv.innerHTML = ''; + this.wrapperDiv = document.createElement('div'); + this.wrapperDiv.className = 'mibew-chat-wrapper'; + this.wrapperDiv.setAttribute('id', 'mibew-chat-wrapper-' + this.id); + this.wrapperDiv.style.display = 'none'; + this.wrapperDiv.innerHTML = ''; - 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'); diff --git a/src/mibew/styles/chats/default/iframe.css b/src/mibew/styles/chats/default/iframe.css index 1fe3bc35..0cf9f77b 100644 --- a/src/mibew/styles/chats/default/iframe.css +++ b/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; } From d61b142e40bf3fc092d5ab7779b1376b6adaa78e Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Tue, 16 Jan 2018 17:26:28 +0300 Subject: [PATCH 2/7] Add missed ids for all textareas --- src/mibew/styles/chats/default/chat.css | 11 +++++++++++ .../client_side/leave_message/form.handlebars | 2 +- .../templates_src/client_side/survey/form.handlebars | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css index 9e6fe822..21870011 100644 --- a/src/mibew/styles/chats/default/chat.css +++ b/src/mibew/styles/chats/default/chat.css @@ -379,6 +379,17 @@ 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; diff --git a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars index 967a87e1..6559298b 100644 --- a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars +++ b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars @@ -36,7 +36,7 @@ {{l10n "Message"}}: - + {{#if showCaptcha}} diff --git a/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars index 5bf65f53..cec9c3f1 100644 --- a/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars +++ b/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars @@ -39,7 +39,7 @@ {{#if showMessage}} {{l10n "Initial Question:"}} - + {{/if}} From 9d2c4404c05ec5a794af89a663d72b01f196d6a5 Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Tue, 16 Jan 2018 18:13:21 +0300 Subject: [PATCH 3/7] Remove redundant blank line --- src/mibew/styles/chats/default/chat.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css index 21870011..35810ad7 100644 --- a/src/mibew/styles/chats/default/chat.css +++ b/src/mibew/styles/chats/default/chat.css @@ -385,7 +385,6 @@ a:hover .image-close-window { } /* leavy message */ - #message-leave { resize: none; } From 95c55aa931524a1165f91777fec9d4373735e5b4 Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Tue, 23 Jan 2018 17:45:48 +0300 Subject: [PATCH 4/7] Implement responsive design See https://mibew.org/forums/index.php/topic,191515.msg199759.html for details --- src/mibew/styles/chats/default/chat.css | 12 ++++++++++-- src/mibew/styles/chats/default/iframe.css | 2 ++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css index 35810ad7..dd9004e6 100644 --- a/src/mibew/styles/chats/default/chat.css +++ b/src/mibew/styles/chats/default/chat.css @@ -26,7 +26,7 @@ body { font-size: 11px; font-family: Tahoma, sans-serif; line-height: 1; - min-width: 500px; + min-width: auto; background-color: #f1f2f2; } body.rtl { @@ -83,7 +83,7 @@ img { background: #ffffff url("images/bottombg.gif") scroll repeat-x 0 0; } #footer { - width: 400px; + max-width: 100%; margin: 0 auto; padding-top: 5px; padding-bottom: 5px; @@ -387,6 +387,7 @@ a:hover .image-close-window { /* leavy message */ #message-leave { resize: none; + width: 100%; } /* error page (error.tpl) */ @@ -559,3 +560,10 @@ ul li { float: none; display: inline-block; } + +.username { + width: 100%; +} +#logo img { + max-width: 100%; +} diff --git a/src/mibew/styles/chats/default/iframe.css b/src/mibew/styles/chats/default/iframe.css index 0cf9f77b..0465fc61 100644 --- a/src/mibew/styles/chats/default/iframe.css +++ b/src/mibew/styles/chats/default/iframe.css @@ -21,6 +21,8 @@ div.mibew-chat-wrapper { position: fixed !important; bottom: 5px !important; right: 5px !important; + -webkit-overflow-scrolling: touch !important; + overflow-y: scroll !important; } iframe.mibew-chat-frame { From 2581119295a37ed658296814ef07e9928fc5e57b Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Wed, 24 Jan 2018 18:18:57 +0300 Subject: [PATCH 5/7] Restrict responsive design by media query --- src/mibew/styles/chats/default/chat.css | 27 ++++++++++++++++------- src/mibew/styles/chats/default/iframe.css | 10 +++++++-- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css index dd9004e6..33761fbb 100644 --- a/src/mibew/styles/chats/default/chat.css +++ b/src/mibew/styles/chats/default/chat.css @@ -26,7 +26,7 @@ body { font-size: 11px; font-family: Tahoma, sans-serif; line-height: 1; - min-width: auto; + min-width: 500px; background-color: #f1f2f2; } body.rtl { @@ -83,7 +83,7 @@ img { background: #ffffff url("images/bottombg.gif") scroll repeat-x 0 0; } #footer { - max-width: 100%; + width: 400px; margin: 0 auto; padding-top: 5px; padding-bottom: 5px; @@ -387,7 +387,6 @@ a:hover .image-close-window { /* leavy message */ #message-leave { resize: none; - width: 100%; } /* error page (error.tpl) */ @@ -561,9 +560,21 @@ ul li { display: inline-block; } -.username { - width: 100%; -} -#logo img { - max-width: 100%; +/* 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%; + } } diff --git a/src/mibew/styles/chats/default/iframe.css b/src/mibew/styles/chats/default/iframe.css index 0465fc61..fe6e8c31 100644 --- a/src/mibew/styles/chats/default/iframe.css +++ b/src/mibew/styles/chats/default/iframe.css @@ -21,8 +21,6 @@ div.mibew-chat-wrapper { position: fixed !important; bottom: 5px !important; right: 5px !important; - -webkit-overflow-scrolling: touch !important; - overflow-y: scroll !important; } iframe.mibew-chat-frame { @@ -75,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; + } +} From 20d97e5bce6224153d36cb75f0eaead544f3561e Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Fri, 26 Jan 2018 13:08:29 +0300 Subject: [PATCH 6/7] Improve media query logic for responsive design Fix footer width for mobile devices --- src/mibew/styles/chats/default/chat.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css index 33761fbb..98ad29e2 100644 --- a/src/mibew/styles/chats/default/chat.css +++ b/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; @@ -578,3 +577,10 @@ ul li { max-width: 100%; } } + +/* additional trick for desktops */ +@media (min-width: 501px) { + #footer { + width: 400px; + } +} From c62a98b22a940ec2b88fc0f4e08ad857b1ea96a5 Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Sat, 27 Jan 2018 00:57:10 +0300 Subject: [PATCH 7/7] Make invitations to chat responsive --- src/mibew/styles/chats/default/chat.css | 9 ++++++-- .../styles/invitations/default/invite.css | 23 +++++++++++++++++-- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css index 98ad29e2..d3533ba9 100644 --- a/src/mibew/styles/chats/default/chat.css +++ b/src/mibew/styles/chats/default/chat.css @@ -506,7 +506,6 @@ ul li { #invitation-messages-region { height: 150px; min-height: 150px; - width: 388px; overflow-y: auto; padding: 0; font-weight: normal; @@ -576,11 +575,17 @@ ul li { #logo img { max-width: 100%; } + #invitation-messages-region { + max-width: 100%; + } } -/* additional trick for desktops */ +/* additional tricks for desktops */ @media (min-width: 501px) { #footer { width: 400px; } + #invitation-messages-region { + width: 388px; + } } diff --git a/src/mibew/styles/invitations/default/invite.css b/src/mibew/styles/invitations/default/invite.css index 5a9a4d36..0f30d581 100644 --- a/src/mibew/styles/invitations/default/invite.css +++ b/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; + } +}