General > Support

Are there any responsive layout or mobile layout...

<< < (2/4) > >>

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

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

--- Code: ---<div id="message">
--- End code ---
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: ---iframe.mibew-chat-frame {
  max-width:100%;
}
.outter_div {
  -webkit-overflow-scrolling:touch!important;
  overflow-y:scroll!important;
}
--- End code ---

Add to chat.css:

--- Code: ---body {
  min-width:auto;
}
.username {
  width:100%;
}
#ta_message {
  width:100%;
}
#logo img {
  max-width:100%;
}
#footer {
  max-width:100%;
}
--- End code ---

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:

--- Quote from: Bert on December 28, 2017, 12:35:46 PM ---If I'm not mistaken, gulp.js is used to convert templates_src/ to templates_compiled/.

--- End quote ---

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.

Navigation

[0] Message Index

[#] Next page

[*] Previous page