search

OpenDirective / brian

Easy communication and media access for people with cognitive access requirements
http://opendirective.github.io/brian
MIT License
8 stars 3 forks source link

Make grid layout work on other browsers #51

Open SteveALee opened 8 years ago

SteveALee commented 8 years ago

Currently this only works on in Chrome. I would expect it to work in FFx but it layout is messed up.

We only use CSS Flexbox and object-fit so nothing very complex. It might be due to not having any explicit sizes expect vw vh in top box.

Here's the expected layout in chrome: chrome

sancarder commented 8 years ago

When I go to the page on my iPad (in chrome), it looks like this. Is it supposed to have other shapes on the tablet than on the computer? image

sancarder commented 8 years ago

It looks the same in Safari by the way :)

SteveALee commented 8 years ago

Is that Chrome on a iPad? Interesting. Buttons are used to get the accessibility and default behaviour for free. Currently no styling is used at all on the buttons so obviously the default varies according to browser. Even stranger is it uses a style sheet that is supposed to reset styles to a common starting point; that obviously doesn't include button styling. ;)

I was thinking of adding a corner radius like Maavis but that's a bit excessive. We need to added explicit styling for the buttons.

Otherwise the layout is good. On Desktop Firefox

ffxlayout

I'll try on OS X.

SteveALee commented 8 years ago

PS does it layout OK in portrait as well? does on my phone. The basic responsive design apparently works OK. Makes all the pain worth it.

SteveALee commented 8 years ago

I added the expected layout as show in Chrome above in bug description.

sancarder commented 8 years ago

Yep, Chrome on iPad :) Looks the same on a mini and on an Air (and in Safari on both). I don't mind the oval shapes (but perhaps we'd like to settle for a common appearance between platforms as long as it's possible), but the labels are obscured by the edges, which is not so good.

sancarder commented 8 years ago

image This is in portrait mode. Images adjust but the texts disappear even more.

SteveALee commented 8 years ago

I fixed the native style buttons in #52 and also made a few minor. But leaving this bug open as more needs doing.

sancarder commented 8 years ago

I found this, some tips on how to remove the rounded corners with webkit/css: http://stackoverflow.com/questions/2918707/turn-off-iphone-safari-input-element-rounding

sancarder commented 8 years ago

Haven't had a chance to try it out yet...

SteveALee commented 8 years ago

@sancarder Thanks for that info. I actually fixed it in #52 (it's mentioned above in this issues timeline). I'm using a file called normalize.css that is supposed to give a common starting point for all browsers. For some reason it turns on the webkitstyle. So I explicitly turned it off.