Kanban-like side-by-side lists

Hello Checkvist,

I’d like to share a special way of using checkvist as a kind of Kanban board.

I have a couple of lists that correspond to the columns of the board and I display these lists side-by-side. To do so I use the Vivaldi browser that has tab tiling (see example screenshot below), though other browsers may have similar features, either by themselves or by means of a browser extension.

The lists are titled “Backlog”, “Work in Progress”, “In Review” and “Done”, for example, and may contain several projects each including one or more tasks. Each project is in the list that corresponds to its current status. If the status changes, the project is moved to the list corresponding to the new status. This can easily be done by the [mm] shortcut, though mouse dragging a project across the tiled browser tabs is of course not possible. Also, going to another list within a tab (via the [ll] shortcut or the menu) should be avoided in order to maintain the list layout. But the browser may provide shortcuts (such as ctrl-tab or ctrl-1/2/3/4) for changing the active tab so that the setup still allows for keyboard-only navigation.

While the setup is kind of a hack, it works rather well for me. Though of course some typical features of a Kanban board are missing, such as defining a WIP limit or filtering collectively across all lists, for example.

Maybe the requirement for a special browser (extension) that provides tab tiling could be avoided if checkvist were able to show multiple lists in a single view with shortcuts for navigation between the lists. What do you think?

Best regards and many thanks for a great product!
soremo

2 Likes

I’ve explored this sort of setup myself. I had created a webpage where you could choose up to four lists, to be included side-by-side, by setting variables in the url (list numbers). Here are two examples (with random internet links as content), one with three variables set and the other with four.

Lately though I’ve usually been using two lists at a time, rather than three of four. Sometimes in a side-by-side manner and other times the main list in my primary browser window and then a pop-up window which serves as my intake list.

Just in case, there is a CSS hack which creates a Kanban-like board UI in a specified list, for top-level items:

#list_629054 ul.topLevel {
  display: flex;
}

#list_629054 ul.topLevel > li {
  flex: 1 1 auto;
}

This will result in a layout like this:

It was published some time ago, here is the older discussion about this trick.

1 Like

@ross, this looks very useful. Would you mind sharing the code of your webpage?

@maxkir, thanks for reminding me of the CSS hack. I had seen it before and, besides demonstrating how easily and flexibly customizable Checkvist is, it came close to what I was looking for. However, with this approach there is no simple way of moving items between the columns (i.e. top-level items) by keyboard, what I consider a rather important feature. This is why I prefer using separate lists for the columns so I can type [mm] and get a pop-up where I can select the column that the item shall be moved to. (If, however, there was a keyboard shortcut that opened a pop-up for selecting a top-level item so as to move the current item thereto, then of course the CSS approach would be much better … :wink: )
Anyway, many thanks for a simple, working, flexible and efficient, in a word: great, piece of software!

1 Like

Thanks for the kind words :slight_smile:

Regarding moving between columns - you can use mm shortcut for that, see this screencast: https://screencast.com/t/qoewy2a0G

Best,

1 Like

Thanks again, @maxkir!

Of course, I meant [mm] for moving between lists, not [ll]. I’ve corrected my previous post accordingly.

What I didn’t know, though, is that the pop-up to select the movement destination can be navigated, so I can select any item (or sub-item) of any list as the new parent for the item to be moved. This is quite what I was hoping for to be implemented, and now I learn that it’s already there. What a nice surprise! :clap:

If I may nevertheless suggest a further improvement: In order to quickly access favorite destinations (such as in my case the Kanban column headings, be it lists or top-level items or even sub-items) you might consider providing means of pinning (or marking as favorite) one or more items so that they stay at the top of the selection pop-up that opens when using the [ll] or [mm] shortcuts. It’s not a very important feature, but it could be a handy addition. - Or is this, too, implemented already? :thinking:

Kind regards,

Hmm, no, we don’t have this feature, it is a kind of “Favorite” target locations, right? May be we should do it automatically, without explicit selection of such locations.

The lists in the ll and mm are sorted according to the recent update timestamp. I believe this should be OK for ll, right?

But when mm is used we could keep ~3 recently used target mm locations as bookmarks at the top. What do you think?

Yes, I was thinking of some kind of favorite target locations. This could be helpful especially for quickly/directly accessing often used targets that are not lists, but items or sub-items.

Actually, I have always wondered according to what criterion the sort orders of the ll and mm target locations lists were dynamically changing. Without much thought, I would have expected alphabetical sorting or recently used sorting. But I understand that recently updated sorting makes sense as well, especially for ll.

As regards mm, showing favorite target locations at the top of the target locations list was just the first thing that came to my mind in order to easily move items below other items. I understand that you prefer automatically handling such “favorite” target locations so as to keep things simple (I totally agree with this principle). For the Kanban use case, dynamically showing the recently used target locations at the top of the mm target locations list, as you suggested, would certainly be a welcome improvement. (But in case you actually implement such feature, please consider providing at least 4 – that’s what I would need – or even 5 recently used target locations, since Kanban boards often have more than 3 columns.)

From a more general point of view, the problem with the mm target locations list is that mm can be used to move an item across different lists as well as to move an item within a list. While both is possible with the current implementation, for some use cases it would be helpful if moving within the current list was more readily accessible. Currently, to do so one has to find the current list within the target locations list (since the current list may be anywhere in that list) and then navigate to its items. This is why, as alternatives to the current implementation and to the above approaches of manually or dynamically provide favorite target locations, I suggest the following approaches:

  • Either the current list is always shown at the top of the target locations list, with the remaining lists following according to their recently updated or (probably better:) recently used timestamps. This would not be very different from how the mm target locations list is currently handled, but would allow rather quick access to the current list and its items.

  • Or, if moving items within a list is generally considered more important than moving items across different lists, the target locations list could not include all lists, but instead include all top-level items of the current list (in their manual order) together with an entry titled “Lists” at the top through which all other lists are accessible. So all lists and their items would still be there (though accessing them would require one more keystroke/click for opening the “Lists” entry), while the items of the current list would be favored by being shown directly.

(Maybe these two approaches could both be implemented, together with the possibility to select the prefered one in the settings.)

  • Or a new shortcut is defined specifically for moving an item within the current list. While mm remains as it is, the target locations list that opens when the new shortcut (e.g. uppercase MM?) is executed would not include all lists, but all top-level items of the current list.

What do you think?

To get back to the actual topic, I have to admit that I’m not (yet?) convinced of the CSS approach for implementing a Kanban board. This is mainly because if the board columns do not correspond to separate lists, but to top-level items of a single list, navigating from one column to the other by keyboard is rather cumbersome, as you have to move upwards or downwards beyond the upper or lower end of one (possibly very long) column to get to the immediately preceding or immediately following column. This could be improved if there was an easy way of jumping directly to a certain column. Of course, there is ll, but (just as with mm) I think there is room for improvement as regards navigation within a list (the current list).

In particular, each of the three approaches suggested above could be applied to ll, too. This would allow for easier navigation between the items of the current list.

Again, what do you think?

I am sorry if my suggestions appear to be a bit off-topic as they are not exclusively related to Kanban anymore. If you prefer so, you may move them to a new thread.

This post has become longer than I had intended. I hope not to bug you with my ideas.

Best,

2 Likes

@soremo
It’s ugly hacked together code, but I dropped it in a temporary pastebin for you: https://pastebin.com/LmFnkgwi

1 Like

Great! Thank you very much, @ross!

1 Like