[gatein-dev] Mobile Updates

[Matt Wringe]

A couple of updates:

1) the viewport meta tag can now be configured as a portal property. 
This has recently been pulled in gatein master.

2) the shared layout can be configured as a portal property to either be 
displayed for all users (default) or displayed only for admin users 
(used for the mobile site). A PR has been created for this but it has 
not been pushed yet (https://github.com/gatein/gatein-portal/pull/359). 
I was going to also have a 'disabled' option too, but I figure only 
displaying for the admin is probably a better option.

3) I have a container which will change from a row layout to a column 
layout based on the 'width' property of the container. This is really 
useful for the mobile site as it means we can have a row layout when the 
screen is wide, and a column layout on narrower screens. I am 
overloading the concept of 'width' for this container though, as its the 
width for the toggle between a row and column, which probably isn't the 
best and confuses things. It also only makes sense for a skin which 
doesn't have a fixed width (like the mobile skin). Any thoughts on this 
or how to make it work better? I don't know if we really want to go 
through adding properties and mixins and such to the container object....


On 28/02/13 05:35 PM, Matt Wringe wrote:
> I have been a bit quiet on this, I guess I need to communicate more on 
> the lists. There has been a bunch of work done on the mobile front and 
> we are getting close to be in a state to do a push to get this into 
> gatein master. There are still a bunch of issues we are currently 
> fixing and it will have a lot of limitations. I will create another 
> email thread to discuss the separate mobile site (which has been 
> mostly separated out into its own extension).
>
> There are some things we would like to get changed in the current 
> gatein code base to make it work better with the new mobile site and 
> to work with mobile devices better in general. Things which currently 
> don't work well and we would like to modify:
>
> 1) the login.jsp page (shared between all the sites) needs to be 
> written to be mobile friendly. Villiam has already done this and 
> should probably be able to do a PR for this.
>
> 2) popups and modals. These currently don't work on mobile devices 
> since we have js to reposition the popup on a scroll event, and mobile 
> devices automatically scroll when entering forms to reposition the 
> keyboard. These both fight against each other and the forms are 
> constantly being hidden behind the keyboard. Having the js reposition 
> also has latency issues. I would like to remove the js positioning and 
> position this purely in css.
>
> 3) using hover with menu elements doesn't work nicely on mobile 
> devices. We would like to change the portlets in the shared menu so 
> that this works better on mobile devices. For example, clicking 'site' 
> would toggle a menu with the site names and a 'edit site' element. 
> Clicking 'site' would no longer take you to the portal navigation page.
>
> 4) change some of the layout of the shared layout portlets and combine 
> the features of the banner portlet (ie login/register/language). 
> Basically just clean this up a bit and make it more consistent to 
> where things are done. The other option for this would be to remove 
> the shared layout for a particular site, but I don't know how much 
> effort this would entail (for the separate mobile site we have, we 
> just set the css for the shared layout to hidden and do everything in 
> a header portlet).
>
> 5) mobile sites need to configure the viewport of a page, which is set 
> by a meta tag in the header. Any objections to add a viewport properly 
> to a sites settings or properties? This would just be a string 
> property that an admin could set. Or does anyone have an idea on how 
> to add this in a better manner or a more general option for adding 
> things to the head?
>
> 6) adding javascript to a particular portal/site. For mobile sites you 
> usually can add a small sniplet of javacode to scroll the page to the 
> top when loaded (to scroll past the browser url bar and buttons). For 
> this I guess the best way is to use the resource manager and use the 
> portal scope
>
> There has also been some suggestions to make some mobile friendly 
> enhancements to the classic site. These would be fairly simple 
> changes, and not something we would want to spend a lot of time on.
> - a flexible (non-fixed-width) classic skin. Essentially the current 
> skin but where the width for UIWorkingWorkspace is set to its 
> max-width instead.
> - a flexible container. This container would switch from a column 
> layout to a row layout depending on the current width of the container 
> (note: obviously only works if the site is not fixed width). This 
> would just be something simple to use with the non-fixed-width classic 
> skin and would be really useful for the mobile site.
>
> Sorry for the long email. Any thoughts or objections to the proposed 
> changes?
>
> Thanks,
>
> Matt Wringe