Responsive view for tablets

I’ve made some changes to better accommodate the mobile client to a tablet: what do you think of this idea?
https://www.youtube.com/watch?v=Udh3R4MwVIQ

The changes, if you want to test them:
https://github.com/dimaursu/diaspora/tree/tablet


Note: This discussion was imported from Loomio. Click here to view the original discussion.

nice :slight_smile:
I think when the menu is shown on the left side, it could be smaller and not resize itself with the window width - so it will eat up less space in contrast to the content.

Actually, that’s what my last commit is about: fixed width drawer. I found that 240px is just fine. I did the same for mobile, 80% width was rather inconsistent, and in some cases annoying.

As said, to see the menu switching from right to left feels weird to me. But I agree the view can be improved for tablets. I’ll try to make a mockup when I’ll have time.

Also, the reason the drawer moves to the left, is to allow you to scroll easier.

@flaburgan you don’t have to make full-blown mockups. You can say it in words, or even a rough sketch is good enough. Also, any ideas are appreciated - to increase consistency and usability.

I like it. Very nice.

@dumitruursu I once saw early versions of the Twitter app for iPad, and the layout pretty much looked like that! Drawer on the left, content on the right.

That would be great! However, as previously discussed, the drawer should stop growing after a certain width.

Big LIKE :slight_smile:

I like it, especially since the mobile view always looked unnecessarily stretched, for example on a smartphone in landscape mode and on tablets.

I just want to raise the point that we should decide on a threshold in e.g. pixels we want to up-optimize the mobile view and down-optimize the desktop version. for example the mobile view goes up to 1024px width and the desktop view down to 720 px width (and below/above that the user gets the information to switch to the respective other view).

The fixed-width version:

@florianstaudacher Those are called breakpoints. In my branch, they are defined as 400px for phones, 800px for tablets. See _variables.scss

The one for the phone actually is not used yet: I only use “bigger than 800px” and “less than 800px”. See the media queries below:

I really like the idea! An idea: Would it be possible to make an icon set for the buttons, to reduce the size of the sidebar? There could be a toggle button to switch between the modes.

Oh, and I definitely prefer the fixed width version. Very good work!

Definitely, but that’s not my target here :slight_smile: I would also see the benefit of using a special font, like Font Awesome. I’m not sure if the current one, Entypo, provides those icons. Right now the icons are images.