ubuntu-phone team mailing list archive

[Andrea Bernabei <andrea.bernabei@xxxxxxxxxxxxx>]

Hi Cos,

have a look at this :)
https://developer.ubuntu.com/api/apps/qml/sdk-15.04/Ubuntu.Layouts.ConditionalLayout/

On Mon, Jul 27, 2015 at 6:51 PM, Cos64 <cos64@xxxxxxxxxxxxx> wrote:

> On 18.06.2015 10:52, Sebastien Bacher wrote:
> > Hey there,
> >
> > (I hope some of the designers are on this list ;-)
> >
> > I've been reading the design blog entries about the grid system [1] [2]
> > and I'm trying to make sense of what is described.
> >
> > The guidelines say that a panel should be 40/50/90 gus. What happens if
> > I'm using an application in "window mode" on a desktop and that its
> > width is 70gu, does it mean I should have 2 panels having respective
> > widths of 50gu and then 20gu?
> >
> > That feels weird, if you take an example of an application listing
> > messages on the left and content on the right you get less space for the
> > content than for the titles.
> >
> > You can imagine a similar example on a tablet in landscape mode. Taking
> > the blog example of a landscape of 90gu, the layout should be 40/50, but
> > what if my left panel is a list of short labels and I would only need
> > 20gu to display them, does it mean I should use 40 anyway and waste the
> > space on the right of the layout for the actual content?
> >
> >
> > Did I understand the guideline correct or am I overlooking something
> there?
> >
> > Cheers,
> > Sebastien Bacher
> >
> >
> > [1]
> >
> http://design.canonical.com/2015/05/to-converge-onto-mobile-tablet-and-desktop-think-grid-units/
> > [2] http://design.canonical.com/2015/06/the-grid-system-in-detail/
> >
> >
> >
> >
>
> Hi,
>
> Could someone help me understand some things about this grid system?
>
> I read the Resolution Independence article [1] and understood that a
> grid unit is a fixed number of pixels, depending on the device.
> Then I found this thread mentioning the two blog articles [2] [3]. One
> of them says that for Aquaris E4.5 it's recommended to use a width of 40
> units, while for Meizu MX4 50 units are preferred.
> The tutorial [4] uses 100 (but I understand it's for desktop and only an
> example).
> The Ubuntu UI Toolkit [5] uses a width of 120.
>
> My question is: how can I make sure my UI looks good on any device? If I
> use 50 units, it won't fit on Aquaris E4.5. If I use 40, there will be
> wasted space on tablets. Is it possible to make 3 layouts for the same
> view (one for 40, one for 50 and one for 90)? Maybe something similar to
> Android [6]?
>
> I tried to
>
>     import QtQuick.Window 2.2
>
> and to declare
>
>     width: Math.min(Screen.width, units.gu(50))
>
> but I doubt that's the way to go (I also ran into some trouble with the
> screen size not being immediately available).
>
> Ciao,
> Cos
>
> [1]:
>
> https://developer.ubuntu.com/api/qml/current/UbuntuUserInterfaceToolkit.resolution-independence/
> [2]:
>
> http://design.canonical.com/2015/05/to-converge-onto-mobile-tablet-and-desktop-think-grid-units/
> [3]: http://design.canonical.com/2015/06/the-grid-system-in-detail/
> [4]:
>
> https://developer.ubuntu.com/en/apps/qml/tutorials/building-your-first-qml-app/
> [5]:
>
> http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/trunk/view/head:/examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml
> [6]: https://developer.android.com/guide/practices/screens_support.html
>
>
> --
> Mailing list: https://launchpad.net/~ubuntu-phone
> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
> Unsubscribe : https://launchpad.net/~ubuntu-phone
> More help   : https://help.launchpad.net/ListHelp
>