[planning] Card Lists

It’ll be a long time before I can work on lists, but on the plus side that means more time to think through the interactions and their interaction consistency with boxes. Here’s where I’m at right now

  • C3 → C2: dragging cards near each other initiates the same kind of snap animation that boxes get (Box Snapping)
  • L (orange): When cards are attached together in a list, the handle appears. You can drag the whole list around with the handle (which also works similar to a box label). The name and color of the handle can be customized, defaulting to List 1, etc.
  • C2: Dragging a card outwards removes it from the list
  • I’m not sure what paint selecting a card in a list should do? Although I’m leaning towards it just selecting that individual card
1 Like

I’m so happy about this. I was just thinking how much value you would create if you implemented this because it’s a lightweight trello and that is all most people ever need.

1 Like

I have a prototype of list behavior with my user script, btw:)

I’m curious about spacing of cards. When I tried sticking them together with no padding, it felt very uncomfortable. And I think most people’s list use the “natural” spacing you get when you align and tidy.

If they are really close together it makes paint selecting very tedious too.

discord message: Discord

1 Like

Being able to easily reorder within a list is something that would be important, imo. i.e. take card from middle and move to end without breaking the list or taking a new card and moving it to the middle of the already existing list.

2 Likes

i think what the prototype is missing that the real version will is that it’ll use animation to telegraph what’ll happen when you let go of the card, and animation to show the actions of adding and reshuffling cards

2 Likes

Great—looking forward to what you come up with :wink:

1 Like

omw to replace my block coding platform kinopio jk there might still be some issues with that
Grouping is definitely nice as it can work as “glue” (someone called it this) for moving without explicit selection when you don’t nesscarily need a box.

1 Like

One thing to keep in mind (and might not be worth solving for in v1): what happens when a card at the top or in the middle of the list has it contents expand to the point of the cards height growing? Do the subsequent cards all move down a bit to keep the list in tact or does the card immediately below get overlapped and break the list?

1 Like

Yup this is what would happen

2 Likes

Things to consider:

  • I think it’s important to enable quick add to the top or bottom of list. Something faster than creating a card and dragging it close to the top or bottom.
  • what happens if you have cards of different widths? maybe it’s fine to maintain width.
  • allow the user to decline add-to-list-snap behavior so you can still put cards in a messy, overlapping clump.
  • I’d expect to be able to select cards from a list and rip them out. maybe they become their own list if it’s more than one?

do you overlap cards on purpose?

1 Like

not really, and maybe it would be fine to make it harder to do so until people complain :slight_smile: it was something I ran into when playing with snapping and boxes. I had wanted a way to not snap in that case, but again, it wasn’t a huge deal.

1 Like

image
Adding another mockup for ideation

2 Likes

Sorry to be annoying, but any progress or ideas happening in this space?

I’ve found myself pretty reliant on Ben’s script (to auto-layout cards in a box), but between the iOS (and Mac) apps being available (and not able to load scripts) and the apps (Userscripts and TamperMonkey) I use to load scripts in safari being buggy, I’ve found I don’t pick up Kinopio as a daily practice anymore and it’s more of a weekly thing that I know it’s going to take some time to reload/quit safari whenever I want to work on those spaces…

2 Likes

No progress so far. This is a huge project and there are other priorities that’ll impact more ppl (like the iOS app) that I need to complete before taking this on

2 Likes

note to self: i like how in this demo when you drag cards in a vertical ‘list’ , they scrunch upwards while dragging. In the kinopio case, I’d also add some kind of shadow or preview showing the area that the un-scrunched list will take up with the dragging ends

1 Like

Yeah, the scrunch is really nice and will probably make it easy to move around visually. The shadow for landing area is a great idea too.

2 Likes

I think checklists and threads could be achieved by a structure like a list. The broader idea is the ability to tightly couple and organize/group a set of cards.

1 Like