BuddyPress.org design issues on touch/mobile screens

[modemlooper]

Fixed position This is breaking the menu bar and makes it intolerable to use site. I suggest to remove the fixed position of header unless a complete mobile first approach to navigation is used. For that to work well IMHO the theme should be built as mobile up not using fixes to make it "work". Easier to remove the fixed position on touch screens. See below

:hover the hover on bbp-admin-links doesn't work on touch as hover is intercepted on touch but tap. When you touch and hold on touch screens the behavior is to select the contents. This is breaking the admin links to show. We need to have a event listener for a touch event to show the links or just show them all if a touch screen is viewing content

var supportsTouch = 'ontouchstart' in window || 'onmsgesturechange' in window;

if ( supportsTouch ) {
  //code to remove display none and fixed positions or add a .touch to body and do appropriate css
}

[johnjamesjacoby]

I'd rather we come up with some mobile specific stylings rather than compromise the way it works when not on mobile, because of mobile. Since you're the mobile guy, a patch would be killer.

[modemlooper]

It would still require either/or code. We could do a fluid width layout that would still require some way of detecting screen size/ touch. Either by media query which works for layout but the hover is a touch issue and that means show those hidden items or use js to detect.
Fixed header can work if the width is fluid.

What do we want, something that can simply work on multiple devices/screens or a complete responsive/mobile design?

[johnjamesjacoby]

Start small, and see what you're able to come up with. We don't need a dedicated mobile layout right away, just something that works well and fits on screen.

Regarding fixed position and hover conflicts, those are easily overridden in media queries targeting the same typical mobile screen sizes we'd be creating the layout for. Almost a non-issue?

If this works really well, I'd like to work towards what you come up with being the default mobile responsive CSS for bp-legacy's theme compat. That way when the parent theme is already responsive, BuddyPress will be too.

[espellcaste]

Closing as per #9193