[Proposal] Desktop theme

[Sopamo]

It would be nice to have a desktop theme which has an improved layout on larger screens so the app can be used on normal desktop computers as well.
Currently the mat and ios themes are optimized for small screens only and aren't really usable on large screens. I think it might be sufficient to set some width limits for the main content and resize the header & Footer a bit.

If you want I can submit a pull request for such a theme as I have to build one anyway for an app I'm building with Quasar.

[wilcorrea]

Do you have an example of change what would be good to desktop environment?

[smolinari]

I also thought the same way looking at the examples as they are presented in the Quasar play app (where you can check out the components), but once you get working with the system, you realize it is actually well thought out. Just think about an app like a Google+ kind of web app.

😄

Scott

[wilcorrea]

I think what mobile first (http://www.uxmatters.com/mt/archives/2012/03/mobile-first-what-does-it-mean.php) is a good way and I think what the Mat theme looks like a good option for this

[Sopamo]

This is how my app currently looks on desktop:

Some small adjustments make it look way better already:

I think reordering the header and introducting a max width for the main content already goes a long way. Thats essentialy what google+ does.
Maybe even showing the left navbar permanently when there is enough space.

[Sopamo]

Btw I'm not arguing against mobile first or anything like that. I just think having a desktop theme which sets some useful defaults for desktop web apps would be nice.

[wilcorrea]

Very nice @Sopamo, I believe you know what can do this with some css class, or even a global screen size detector to manipulate components with v-if. Obviously what resources to simplify sounds like good ; )

[smolinari]

Interesting. I believe the navbar tabs should pull right, once the screen size hits a certain width. I could swear that was happening in my app. (I'll be honest I've been testing only for smaller screen sizes first.) I'll check again, when I get home.

The main content width looks like a good enhancement.

Also sidebar menus in a drawer component will be shown automatically for wide screens. You actually have to add "swipe-only" to hide it.

Scott

[rstoenescu]

Hy guys, just letting you know I will join the discussion in a few days once I'm done working on current new features (form related).

[smolinari]

I can confirm with a <q-layout> the <q-tabs> do pull right on bigger screens.

Scott

[rstoenescu]

@smolinari Why do you say they pull right?
http://quasar-framework.org/quasar-play/android/index.html#/showcase/layout/tabs

[laurentpayot]

@Sopamo Correct me if I'm wrong but wouldn't compiling builds specially designed for desktops go against responsive design principles?
Most mobile users do not want to install an app if they can access it quickly on the web (that's why Progressive Web Apps are the next big thing).
I'm using Quasar because with the same source code desktop users and mobile users (with their mobile browser) can have a great experience. It requires a little bit of tweaking but I don't want to lose the ability to do web apps for mobiles instead of native apps.

@rstoenescu it's true that the experience for desktop (larger screens) could be improved. For instance no drawer shadow, like in Scott's Google+ screenshot.

[smolinari]

Why do you say they pull right?

@rstoenescu - Good question......hmmm......

I need to go and check that maybe I changed that myself. LOL! Sorry about that. I am forgetful like that sometimes.

Edit: Or maybe I am using a toolbar?

Scott

[Sopamo]

@laurentpayot You might be correct, I didn't really think about that but was worried about stuffing all the desktop related stuff in a build for a mobile device which will never use it. Maybe a desktop build would be good which extends the normal mat/ios themes with the large screen related styling - but doesn't remove the styles for small screens? This way you could still access the website on your mobile device while also having a lighter build for the apps.

[rstoenescu]

@laurentpayot About the drawer shadow. This was changed recently and I think it's a good improvement. This can be turned off with $drawer-box-shadow Stylus var set to none. There isn't any one-design-fits-all when dealing with layout. Some want content aligned to the left. Some want aligned to the right. Some want it centered. Some want drawer with no shadow, some want it with shadow. And to illustrate my point, take your suggestion and then #364

Take @Sopamo's example (nice app btw): Can't possibly know what the page content will be. For a list, as an example, you'd have to set a max-length or something. What if instead of a list we have a picture gallery. So there's no one solution to fit all needs.

@ all
The point here is to have flexibility to change layout according to your needs. It's the developer's responsibility to make the necessary updates as I can't capture ALL use-cases. Even if I could, the CSS and JS files footprint would increase a lot.

If on the other hand, there's something that can be improved to the "standard/default/generic" CSS that would benefit most use-cases then we have a go.

[Sopamo]

@rstoenescu I get your point. I'm going to optimize my app for desktop usage and will report any possible general improvements I see while doing so. I think it would be great to have some desktop usable theme in quasar which can be used. This way quasar could position itself more as an all-arounder and less as a mobile only framework. I was recently looking for some alternatives to quasar but almost all frameworks are mobile only which is a pity when you want to build a larger app which should also be available on desktop.

Edit: Imo this could be closed - I'd open separate issues for each improvement I'd like to suggest.

[rstoenescu]

@Sopamo Great. Looking forward to your suggestions. Can we discuss them on the forum first, before opening new issues?

[Sopamo]

@rstoenescu Sure, I wasn't aware that quasar has a forum. See you there :)