Card layout and card content layout for Kirigami and Discover
OpenPublic

Mock History

Current Revision

Mock Description

An idea for cards (and cards' content) layout as Kirigami component, here applied to Discover

alex-l created Card layout and card content layout for Kirigami and Discover.May 20 2018, 8:37 PM

I really like these. The one thing I'm not sure about is allowing the cards to have different heights. IMHO it doesn't work well especially in multi-column layouts, and makes the overall layout harder to scan.

Overall a big improvement though, especially if as a part of this, we move to a multi-column grid when the window is wide!

alex-l updated an image's (Image 2) description. (Show Details)May 20 2018, 8:42 PM
alex-l removed a subscriber: ngraham.

Yes, the app developer could elide text instead of increasing cards height: but I think it would be nice to have automatic different height managed by Kirigami and the app developer that want cards with fixed height takes care of card content in another way, i.e. eliding text.

Note: I don't know how the progress bar would look in wide layout, but the progress bar could be the last thing to be discussed, I prefer to standardize cards and cards' content layouts.

alex-l removed a subscriber: ngraham.

?

I did nothing, maybe you subscribed when I was editing the description and things messed up

apol added a subscriber: apol.May 22 2018, 4:50 PM

Hey,
Interesting work. Some thoughts:

  • having a vertical alignment between the icon and the stars breaks the fact that we only had 1 thing at the left on the vertical views. This adds clutter.
  • we won't be able to vertically align the stars and the icon on the left, it may look crowded
  • it would be interesting to see whether this matches the Cards concept Marco had in mind.
  • for now I'd have all items in the same view have the same size and layout, otherwise it will scroll weirdly.
  • the progress bar on the last screenshot doesn't look like Breeze scroll bars. Please don't make high definition mockups with the wrong components because everyone gets sad afterwards.
  • breeze stars are blue.

Overall it's fine, I would like to know what's the reason you decided to work on this so we can all make sure we're on the same page.

@apol

having a vertical alignment between the icon and the stars breaks the fact that we only had 1 thing at the left on the vertical views. This adds clutter.

The reason is that the current layout makes cards narrow and long, so I tried a modular layout that can make cards longer or shorter according to page width. It would be better to have this in Kirigami so Discover just have to fill the cards.

we won't be able to vertically align the stars and the icon on the left, it may look crowded

Why?

for now I'd have all items in the same view have the same size and layout, otherwise it will scroll weirdly.

I think that by default Kirigami's cards view should manage cards with different height and the apps developers who want their cards in a grid just need to define the content accordingly, for example eliding text. In my opinion, since apps' names and descriptions are not very long Discover could avoid eliding text and use cards with different height, because most of the cards will just have the minimum one (we could try and eventually switch to eliding text to align cards in a grid)

the progress bar on the last screenshot doesn't look like Breeze scroll bars. Please don't make high definition mockups with the wrong components because everyone gets sad afterwards.

I imagine you mean Breeze progress bar: I just made it more flat to fit Kirigami's look, it's something I want to propose (same for the button, it has not the shadow) and I added a cancel button because the current one doesn't seem clear enough to me: attaching it to the progress bar makes clear it's intended to cancel the installation.

breeze stars are blue.

The stars I used are from Breeze Icons, I know they are blue on Dolphin but I assumed they are so because they indicates you set them, while they should be gray to indicate that are just informative and someone else set them, like on Discover. Otherwise how can you differentiate an informative widget about votes by others from a widget to vote?

I would like to know what's the reason you decided to work on this so we can all make sure we're on the same page.

Kirigami was intended to be a responsive framework, but we focused just on the chrome and not on the content. Marco recently started the work on cards and so I'm pushing the responsive principle there too.

Of course this should be discussed with @mart and I would like to hear @colomar 's opinion too.