ubuntu-phone team mailing list archive

[Joey Chan <qqworini@xxxxxxxxx>]

I may try Flickable + Flow,  I think, all Items are not list  in a straight
line and items' size is "random".

but there will be a problem if Flow is being used, which is the gaps
between items cannot be control in a Flow, because Flow is auto-layout.

also, I was thinking about "manual-layout" to implement Lisette's design,
this is an algorithm problem because every item's width, height,x,y should
be part of the calculation


2013/6/1 Roman Shchekin <mrqtros@xxxxxxxxx>

> Joey, do u mean flickable?
>
>
> 2013/5/31 Joey Chan <qqworini@xxxxxxxxx>
>
>> Thanks for sharing  :)
>>
>> Next step I will try not to use listview to display those content,
>> because listview is not "random" enough  :P
>>
>>
>> 2013/5/31 Lisette Slegers <lisette.slegers@xxxxxxxxxxxxx>
>>
>>>  Thanks! :) Ping me if you want a re-cap of anything.
>>>
>>> Joey shared a great looking prototype on his screen with us, that is
>>> what I was talking about.
>>>
>>> Thanks,
>>>  Lisette
>>>
>>>
>>> On Fri, May 31, 2013 at 4:49 PM, Roman Shchekin <mrqtros@xxxxxxxxx>wrote:
>>>
>>>> Looks great!
>>>> Someone now must develop a prototype?
>>>>
>>>> P.S. sorry, I again missed our meeting due to work :(
>>>>
>>>>
>>>> 2013/5/31 Lisette Slegers <lisette.slegers@xxxxxxxxxxxxx>
>>>>
>>>>>  Hi! As we discussed in the RSS Reader hangout today, here is an
>>>>> example of an organic grid. Consider this a wireframe and a tool to
>>>>> prototype and try different approaches, not a final visual design:
>>>>>
>>>>>
>>>>> https://docs.google.com/drawings/d/1S4uK3ajc5WoYwZXIpUsxD0rw5r40aVK-NcbUHJwzVwY/edit?usp=sharing
>>>>>
>>>>> I have switched off comments for this doc, so that we can keep track
>>>>> of all comments in this mailing list instead.
>>>>>
>>>>> The example image is at the top, and the same image with a visible
>>>>> grid and the item size in grid units right underneath. There are items in 3
>>>>> different sizes, and each size has several variations.
>>>>>
>>>>> For the first one, 21x14, you see the four possible variations of any
>>>>> item consisting of text and image. The other ones only show one of the four
>>>>> variations. There are also items that contain only text (we probably need
>>>>> text-only items for all sizes to accommodate articles without images). All
>>>>> items have one grid unit space between the text and image.
>>>>>
>>>>> As for distributing items on the grid, we could explore 2 options.
>>>>>
>>>>> Option 1 is to distribute items on the page roughly as they are
>>>>> distributed in the example, and assign the appropriate item size and
>>>>> variation dynamically and depending on the text / images that appear in the
>>>>> article. As you can see, the 'end' of the grid example fits with the
>>>>> 'beginning', so we can build a never ending grid that is as long as we need
>>>>> it to be. It can also start at any point to make it look less repetitive.
>>>>>
>>>>> Option 2 is to randomly distribute the items on the page. This is more
>>>>> organic in principal (and might use the screen space in the most efficient
>>>>> way), but we need to try if it results in readable and beautiful layouts.
>>>>>
>>>>> As we discussed just now, option 1 is quicker to implement and will
>>>>> allow us to test the grid with real content sooner.
>>>>>
>>>>> Another thing to consider: what happens if the topic is refreshed and
>>>>> new items are added to the page? If a user has been reading a topic, and
>>>>> new items are added, it would be disruptive to find that the existing items
>>>>> have moved, so once an item has been placed on the page, it should stay
>>>>> there.
>>>>>
>>>>> Let's see if this works with real content; can't wait to see more of
>>>>> those awesome prototypes! :)
>>>>>
>>>>> Lisette
>>>>>
>>>>> --
>>>>> Mailing list: https://launchpad.net/~ubuntu-touch-coreapps
>>>>> Post to     : ubuntu-touch-coreapps@xxxxxxxxxxxxxxxxxxx
>>>>> Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps
>>>>> More help   : https://help.launchpad.net/ListHelp
>>>>>
>>>>>
>>>>
>>>
>>> --
>>> 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
>>>
>>>
>>
>