Responsive split layout

matt

I’m trying to create a split layout for a mail application. The first third of the width is a list of messages and the other two-thirds of the width is the body of the currently-selected message.

This works fine on desktop but there is simply not enough room on mobile. I would ideally like a full-width list that transitions to a full-width contents view when a message is selected, with a back button the return to the list. However, I would still like the split view on desktop.

Do you have any suggestions on what I could look at to achieve this?

Many thanks

n.taddei

I were trying to make the exactly same thing for my application, but I wasn’t able to find an elegant solution, so I left that idea.
The only way is to use 2 separated programmatic routes using Quasar platform detection.
Something kind:

if (Platform.is('mobile')) {
  router.push('my-mobile-route')
} else {
  router.push('my-desktop-subroute')
}

Where:

'my-desktop-subroute' is an inbox child route that fills your Inbox component <router-view></router-view> (the right side of the screen)
'my-mobile-route' is a seprated route that fills main <router-view></router-view> tag replacing Inbox component.

But as you see it’s quite messy, so I decided to forget it.
If you’ll figure out a better solution, could you post it, so I can implement that too?

s.molinari

Could a drawer work for the list of emails? It automatically shows on the side on large screens.

Scott

n.taddei

@s.molinari I think that a drawer it’s not what he wants.
Of course, it could work in desktop mode, but when it turns to mobile, drawer will open from left side and main screen it’s filled by opened email component.
What @matt wants was the inbox emails list in main screen and the single email open when tapping on list item, instead.
Like Gmail Android app, just for clear.

Max

really interested in your solution… im working on an mail project too

n.taddei

@rstoenescu do you have something for us?

matt

Thanks for all of your possible solutions. I was thinking of a layout similar to this:

http://polymerelements.github.io/app-layout-templates/

The drawer is on the far left and hidden on mobile. This functionality comes out of the box with Quasar. The complicated bit is with the split layout of menu list and content detail. Have a look at that demo to see how it works on different screen sizes.

–Matt

s.molinari

Now that we have a good visual example, it is much clearer what your working towards. Thanks for that.

Unfortunately, the current version of Quasar doesn’t directly support building that type of progressive layout. Version 0.14 will however. In fact, the new layout is one of the bigger highlights of 0.14. Sorry that doesn’t help you directly now. If you want, the alpha of 0.14 is currently available under the “dev” branch in the Quasar repo. You could take a look at where the new layout is heading.

Scott

n.taddei

@s.molinari Did you tried alpha version?
Because from Razvan description on new version announcement, it’s not clear if that solution will be possible or not.
It just says that we’ll have many more possibilities, but not wich ones.

Thank you!

s.molinari

Yes, Razvan’s description of the new version is quite modest.

To get into all the possibilities means we need to actually document them and we are working on that right now. Until they are documented, the possibilities might not be directly apparent. So, yeah. Sorry about that. We’re working on the docs, as we speak.

Scott

s.molinari

I’ll tell you what. Once I get spinner and the new observable sections out of the way, I’ll jump on layout to get it documented for you. Ok?

Scott

n.taddei

Thanks @s-molinari , I didn’t know you were working on docs… We’ll wait then, many thanks!!

matt

Thanks @s.molinari for that info. I’m even more excited for the 0.14 release now

No More Posting New Topics!

Responsive split layout