Topic: Are there any responsive layout or mobile layout...

[Rasanjaya]

Hi..
Thanks in advance... 

I'm new to Mibew. Our company going to used Mibew Web messenger.
In our product,We have both web application and mobile(responsive).
Therefore, I need responsive layout or mobile layout for Mibew web messenger.

Could anyone please tell me are there any solution for that.?

[faf]

No, there are no turnkey solution for responsive or mobile layout for Mibew Messenger. However, you can try to make it yourself. Just modify templates and style sheets. 

[Rasanjaya]

Hi faf,
Thanks a lot for the reply   
ok then challenge accepted...    I'll try my best... 
Thanks again.. 

[jimfesq]

Were you able to develop a mobie layout?

[Bert]

Were you able to develop a mobie layout?

I have the same question.
Nowadays, responsive functionality is a must-have for businesses.

[faf]

As one could easily observe there are not so much activity in Mibew community these days... 

We lack designers. (As a matter of fact we lack contributors at all.) There were a number of people who promised to contribute a theme, but they never did. I don't blame them: since Mibew Messenger is an open source project, the decision of contribution is a matter of free will. Probably they shouldn't have made a public statements, but what's done is done...

However, if anyone will send us a responsive theme, we'll do our best to include it in the code base of the project.

[Bert]

If I'm not mistaken, gulp.js is used to convert templates_src/ to templates_compiled/.
Either way, someone will have to add two things to the base package before I can attempt to make Mibew responsive:
1. The textarea that appears if the chat is offline needs a unique id or class. This one:

Code: [Select]

<textarea name="message" tabindex="0" cols="40" rows="5">Note that id/class "message" isn't ideal, because elsewhere the code already has:

Code: [Select]

<textarea id="message-input" class="message" tabindex="0" rows="4" cols="10">and

Code: [Select]

<div id="message">2. Around the iframes should be a div with a unique id or class.
The reason is that the iframes create a scrollable area on top of a scrollable page, and mobile phones, at least iPhones, have trouble with double scrollbars.
The non-standardized attribute "-webkit-overflow-scrolling" could be used in combination with other CSS to fix this, but it needs to be added in a div that contains the iframe.

Without these two things I cannot test the responsive functionality.

In theory, if a new div around the iframes has class="outter_div", and the textarea of the offline chat has id="ta_message", then this should make Mibew responsive:

Add to iframe.css:

Code: [Select]

iframe.mibew-chat-frame {
  max-width:100%;
}
.outter_div {
  -webkit-overflow-scrolling:touch!important;
  overflow-y:scroll!important;
}
Add to chat.css:

Code: [Select]

body {
  min-width:auto;
}
.username {
  width:100%;
}
#ta_message {
  width:100%;
}
#logo img {
  max-width:100%;
}
#footer {
  max-width:100%;
}
Also note that testing this should eventually happen on an iPhone and not (just) a resized window on a desktop.
One reason for that is that desktop browsers will ignore the non-standardized attribute "-webkit-overflow-scrolling".

[faf]

If I'm not mistaken, gulp.js is used to convert templates_src/ to templates_compiled/.

Yes, you're right. See docs for more details.

You can fork the project at Github and alter the code. As it was written before we're open for pull requests.

[Bert]

faf, one of the Mibew developers needs to do a little more than wait for a pull request.
I'm not familiar enough with the Mibew code base and gulp.js to make the two changes I've requested:
1. add a <div class="outter_div">...</div> around the iframe, and
2. add id="ta_message" to the offline <textarea name="message" tabindex="0" cols="40" rows="5">.
(Of course, you can use other class/id names, if you prefer.)

After that, I can continue working on making Mibew responsive.
I've already shown the in-progress CSS code in my previous post.
I'm not asking much from the the Mibew developers, and I'm showing initiative.
You can give me the tools - div and id - I need to help the project.

[faf]

How do you see the whole development process without using git, building tools (i.e. gulp.js), and even without the knowledge of Mibew? Just asking...

Maybe it could have sence if we were sitting in one office. But the situation when you're asking about some changes in templates (and the request of adding an outer div to iframe leads to changes in the core javascript code of the project) via the post on the forum, and I make changes, rebuild templates (or the whole project), and somehow transfer you the rebuilt version, so you can continue with your work seems riduculous and bizarre.

Don't get me wrong, I appreciate your intention to help the project. But considering your position I have serious doubts that you'll be able to...

Maybe I'll make some tests with the provided code in the next couple of weeks, but I won't make any promises.

[Bert]

The idea is that I'll create a styles/chats/responsive/ with custom chat.css and iframe.css files.
This means I'll be able to just give you a .zip or .tar.gz package with a custom, responsive theme.
To make Mibew responsive, all I'm doing is using the Firefox developer tools (inspector) to look for what needs to be changed.
I'm not a noob shouting some random CSS. This is my job and I'm making Mibrew responsive for my employer.

You can see I know what I'm doing by applying the CSS changes I mentioned in my previous post to a website where Mibew is running.
Then also add...
<textarea name="message" id="ta_message" tabindex="0" cols="40" rows="5">
...in templates_compiled/client_side/templates.js
Finally, on a desktop machine, visit the website with Mibew, open it while the chat is offline, and scale down the browser window.
You'll see it's already responsive.
Even with the chat online it should be responsive.

You wrote:

However, if anyone will send us a responsive theme, we'll do our best to include it in the code base of the project.

That's what I'm planning to do; send you a responsive theme.
To do this, I'd like one extra id, and one extra div (with a class or id).

[faf]

So, the wrapping div and missed ids for textareas are in the repo. In the branch called 'responsive'.

If you don't want to build it yourself, I can PM you the link to the experimental build.

[Bert]

So, the wrapping div and missed ids for textareas are in the repo. In the branch called 'responsive'.

Excellent, thanks.

If you don't want to build it yourself, I can PM you the link to the experimental build.

That would be greatly appreciated, please PM me (a link to) the experimental build.

[faf]

The link was sent.

[Bert]

The link was sent.

Thanks.

This seems to almost work.
I used the same CSS as before, except for these changes:
- outter_div -> mibew-chat-wrapper
- ta_message -> message-leave

It's still not 100% right when the chat is open, so I'll post again in the near future with some final CSS.

[Edit:]
The last thing that was still necessary was the removal of width:400px; from #footer in chat.css.
I will give you the final CSS next Monday.