Responsive layout

[JosefJezek]

Please Responsive layout.

[emcho]

I don't understand this. Please send your recommendations or questions to out dev mailing list (https://jitsi.org/lists). and try to be more descriptive.

Thanks

[JosefJezek]

Responsive layout for web client https://meet.jit.si/ Support for mobile screens.

[marclaporte]

Done:

Jitsi Meet: Proposal to migrate to the Bootstrap front-end framework in a future version (responsive design, easy theming, future-proof) http://lists.jitsi.org/pipermail/dev/2015-August/025018.html

Thanks!

[gpolitis]

I don't know how well this aligns with our roadmap but I would love to see this in meet. Maybe we should reopen this issue.

[marclaporte]

Bootstrap 4 alpha: http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

[marclaporte]

For the record, Bootstrap code is already included and used for: "tooltip": "./node_modules/bootstrap/js/tooltip.js", "popover": "./node_modules/bootstrap/js/popover.js",

https://github.com/jitsi/jitsi-meet/commit/f4da6784652fd546bd6261300635683985cb8da5

[akuckartz]

:+1:

[akuckartz]

Can this issue please be reopened? I tried to use meet.jit.si in Firefox on a Smartphone and it was not usable due to missing responsiveness. I can offer to proved feedback !

[marclaporte]

@akuckartz You are registered as a tester :-)

[marclaporte]

Here is an update on the mailing list: http://lists.jitsi.org/pipermail/dev/2015-November/025588.html

Thanks!

[HelioGuilherme66]

Count with me as tester.

[Bugsbane]

I'd like to test too, thanks.

[luciash]

WIP: https://github.com/luciash/jitsi-meet-bootstrap

[marclaporte]

There was a Jitsi Meet community conference call on 2015-11-09. There is general interest and agreement that Bootstrap is the way to go. There is a concern on timing as some design improvements are planned. It could have been nice to do both at once, but it will be just as easy or likely easier to improve the design with Bootstrap, so there is no need to wait.

Next steps:

• Improve the state of the WIP implementation at https://github.com/luciash/jitsi-meet-bootstrap (luciash)
• Open up the demo server for community feedback (It's already running with auto-updates thanks to George)
• Improve implementation with feedback
• In parallel with above, figure out a solution for pulling in Bootstrap (ex.: Bower)
• When all is good, formalize the PR

Once the first version of Jisti Meet with Bootstrap is released, we'll be attentive to any regressions or issues it may cause, and deal with these.

Once all is nice and stable with vanilla Bootstrap, we'll look into adding Bootstrap Tour: http://bootstraptour.com/

[Bugsbane]

So will the url for the demo server be posted on this issue? I'm keen to give feedback when it's available.

[marclaporte]

Yes, it will be posted here.

If anyone can help with coding and not just testing (which will need a bit later), just email me directly and I'll provide you with not-yet-public dev server.

Thanks!

[marclaporte]

Not forgotten ;-) We got caught up on a project. Will post again here as soon as we have something testable. Thanks!

[emcho]

Thanks fornthe update Marc!

[luciash]

Yes, not forgotten! Thanks Marc for the update!

On 12/05/2015 01:16 AM, Marc Laporte wrote:

Not forgotten ;-) We got caught up on a project. Will post again here as soon as we have something testable. Thanks!

— Reply to this email directly or view it on GitHub https://github.com/jitsi/jitsi-meet/issues/335#issuecomment-162115886.

[marclaporte]

Hi all!

Sorry for the delay. Our big project was launched yesterday so we now get back to this.

Thanks!

[marclaporte]

Hi all!

Here is test site: https://meet.evoludata.com:8443/testroom

The commits are here: https://github.com/luciash/jitsi-meet-bootstrap/commits/master?author=luciash

Please test and report feedback here.

Please keep in mind that this is a not a major visual revamp. The goal at this step is to make usable on mobile devices (responsive, etc.) and move to Bootstrap. Later, we can proceed to to complete UI overhaul to allow the app to be "skinned" by Bootstrap themes. Also, configurable icon sets would be nice.

Thanks!

[marclaporte]

When screen is very narrow, horizontal top menu items go on a second line (which is fine) but background is missing.

[akuckartz]

@marclaporte Thanks for working on this! I confirm that issue in the screenshot.

[bgrozev]

@marclaporte This is great! Just a heads up in case you haven't seen: last week we switched to using lib-jitsi-meet as a dependency, so if you have substantial new changes coming, you may want to rebase your existing work to avoid tough merges later.

[luciash]

@marclaporte fixed in https://github.com/luciash/jitsi-meet-bootstrap/commit/908c3ec6b7b9b5f65eca69b0170958677a5f25a1 @bgrozev - Thanks for the comment! I am doing merges from upstream "now and then" so all should be fine I hope...

[marclaporte]

@gpolitis Thank you for the assistance with the demo server. @luciash I confirm your fix works for me

[marclaporte]

Dialog box could be nicer:

[marclaporte]

Some text is chopped off:

[marclaporte]

A change of behavior with chat vs film strip:

[marclaporte]

@JosefJezek @akuckartz @HelioGuilherme66 @Bugsbane @bgrozev @gpolitis @emcho

Please test https://meet.evoludata.com:8443/testroom and report feedback here (for things not yet reported).

The commits are here: https://github.com/luciash/jitsi-meet-bootstrap/commits/master?author=luciash

It's not yet an ideal interface for mobile (especially when keyboard opens up for chat), but it has now become usable on mobile. I propose to give it 1 or 2 more weeks for feedback and tweaks, and then to merge in. In the mean time, if someone could resolve the Bootstrap dependency aspect (that we discussed on the initial conference call), that would be great!

Further enhancements should be done as part of a revamp of the design. Some ideas: 1- Have a hamburger (or equivalent) icon to access all actions 2- Make UI more uniform (why do some buttons open stuff in the middle and others on the right?) 3- Do not have two buttons to open / close chat interface 4- Make actions icons/buttons bigger on mobile

Thanks!

[luciash]

@marclaporte https://github.com/luciash/jitsi-meet-bootstrap/commit/6f3bc4fcc4d28ea6bd996b683c884322ab6db0e6 should fix the https://github.com/jitsi/jitsi-meet/issues/335#issuecomment-181140567

[marclaporte]

@luciash Will you be OK to deal with many users and avoid issues seen in this screenshot?

[luciash]

@marclaporte yes, something like that. maybe the dropped packets (connection quality info) icons could go there too? other idea would be to zoom-in (enlarge) the user thumbnail on mouse over/touch...

[luciash]

Hi, in my fork in one of the recent commits (https://github.com/luciash/jitsi-meet-bootstrap/commit/64a5a0fc5c1dbbddce718b65f41144040f0cee8d) I have tried to refactor lot of the HTML in the index page to contain and conform with the Bootstrap layout classes to have more uniform and themeable UI. I temporarily introduced css/all-jitsi.css file (as I hate to inspect, debug, compile and try to find in which file the resulting minified CSS is stored, sorry :-p) and a indexb.html file where I made the changes (rather than messing up with the index.html so I can easily compare) and I wanted to test it on one of the free themes from the Bootswatch collection. I have chosen Cyborg theme (http://bootswatch.com/cyborg/) as it looks simmilar to current Jitsi Meet theme. Here is the result: You can test it live here: https://meet.evoludata.com:8443/indexb.html?testroom Let me know what you think. The proper next steps would be probably add the Bootswatch themes via node_modules, add a variable to the config, so at the compiling time, one can choose/set path to their preferred Bootstrap theme and merge the changes to the main index.html file (and remove the temporary files).

Thanks, luci

Update: it seems the "indexb.html" method somehow stopped to work recently - sorry about that. Will implement it to index.html after PR incrementally.

[marclaporte]

Some overlap here:

[marclaporte]

@luciash Thank you for going beyond the basic Bootstrapification and proceeding like this.

@everyone: https://bootswatch.com/ is a popular source of FLOSS themes (MIT license). We could bundle a few or all 16 of them (This is what we do in Tiki Wiki CMS Groupware). At the very least, we should have at least one dark one and one light one. This is a great example of taking advantage of the Bootstrap ecosystem. There could be a theme picker as a user preference (and the same place where user set their name, and pick their microphone and camera)

Thanks!

[marclaporte]

Here is the pull request: https://github.com/jitsi/jitsi-meet/pull/585

[luciash]

knock knock! ;)

[singpolyma]

This is the one thing that keeps jitsi meet from replacing skype for me

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[marclaporte]

@emcho: do you still want this?

[saghul]

I don't think it's a goal at this moment. @emcho please reopen if you think otherwise. We have spent considerable amount of time putting together mobile apps for Jitsi Meet, making the web UI mobile fiendly (past the welcome page, which already is) is not a goal anymore.