mirror of
https://github.com/Mibew/mibew.git
synced 2024-11-15 08:34:11 +03:00
Merge pull request #221 from Mibew/responsive
Implement responsive design for mobile devices
This commit is contained in:
GitHub
commit
3beed6b2ec
@ -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 = '<iframe name="mibewChat' + this.id + '"></iframe>';
|
||||
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 = '<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');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user