Kanban-like side-by-side lists

soremo · July 16, 2019, 3:45pm

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

ross · July 18, 2019, 5:59pm

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.

maxkir · July 20, 2019, 8:00pm

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.

soremo · July 22, 2019, 7:55am

@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 … )
Anyway, many thanks for a simple, working, flexible and efficient, in a word: great, piece of software!

maxkir · July 22, 2019, 8:47am

Thanks for the kind words

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

Best,

soremo · July 22, 2019, 9:54am

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!

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?

Kind regards,

maxkir · July 23, 2019, 5:11am

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?

soremo · July 25, 2019, 10:25am

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,

ross · July 30, 2019, 2:38am

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

soremo · July 31, 2019, 7:20am

Great! Thank you very much, @ross!

Thomas_Girard · June 15, 2020, 12:02pm

Thanks for those usefull tipps !

I have managed to create a local HTML file with 2 Iframe to display side by side my inbox and my todo list.

The same could be done fort 3 or 4 lists side by side (I only use 2). Also I have linked a chrome Bookmark to the local HTML file. So with only 1 click, I can open severall list an display theme in paralell.

To gather with the Permalink feature to acces a pre-sorted list, it becomes very powerfull !!

xBergade · June 16, 2020, 5:05am

Thomas, if you don’t mind sharing I’d be interested in this for myself

Thomas_Girard · June 16, 2020, 8:27pm

Yep, very easy :

put this in a text editor (Wordpad I think), and rename the file file the extention .html at the end.

then put this in the file :

 <iframe src="https://checkvist.com/checklists/number-of-your-list" frameborder="0" scrolling="yes"                           
                                style="height: 100%; 
                                            width: 30%; float: left; " height="100%" width="30%"
                               align="left">
                              </iframe>  

 <iframe src="https://checkvist.com/p/XXXXX" frameborder="0" scrolling="yes"  
                                    style="overflow: hidden; height: 100%;

                                    width: 70%; " height="100%" width="70%"                                 
                                     align="right">
                                    </iframe>

Don’t forget to change the List URL / Permalink URL.

and here for 3 columns :

 <iframe src="https://checkvist.com/checklists/you-list-number" frameborder="0" scrolling="no"                           
                                style="height: 100%; 
                                            width: 33%; float: left; " height="100%" width="33%"
                               align="left">
                              </iframe>  

 <iframe src="https://checkvist.com/checklists/you-list-number" frameborder="0" scrolling="yes"  
                                    style="overflow: hidden; height: 100%;

                                    width: 33%; " height="100%" width="33%"                                 
                                     align="right">
                                    </iframe>
                                    
                                       <iframe src="https://checkvist.com/checklists/you-list-number" frameborder="0" scrolling="yes"  
                                    style="overflow: hidden; height: 100%;

                                    width: 33%; " height="100%" width="33%"                                 
                                     align="right">
                                    </iframe>

saurabhg9 · June 16, 2020, 8:34pm

Tab tiling in Vivaldi browser, is what I use.

I find it quite powerful as it allows me to resize tile sizes when I want by just dragging the borders.
Also allows me to easily change the orientation of the tiles (e.g. horizontal tiling, vertical tiling etc.)

An example -

Thomas_Girard · June 16, 2020, 9:35pm

The vivaldi brower looks great, but should you set every time which list should be opened in the top-right , to-left, down-right , down-left corner ?

Or can you “customize” you view so it opens with the 4 windows with the correct lists displayed ?

saurabhg9 · June 16, 2020, 10:10pm

Vivaldi is highly customisable. It also remembers the opened pages and survives reboots. So once set and customised, it just chugs on perfectly.
Give it a try, you will likely not be disappointed.

soremo · September 13, 2020, 9:44pm

Hi @maxkir,

I’ve elaborated on this suggestion. This is what I came up with:

body {
  padding-bottom: 0;
}

.main_div.list_tag_kanbanize > .layoutDiv > .toolbarDiv > div.toolBar {
  max-width: unset;
}

.main_div.list_tag_kanbanize > .layoutDiv > div.content {
  max-width: unset;
  padding: 0;
}

.main_div.list_tag_kanbanize div.verticalGuide, 
.main_div.list_tag_kanbanize div.verticalGuide__selected {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel {
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 32px;
}

.main_div.list_tag_kanbanize ul.topLevel::-webkit-scrollbar {
  height: 6px;
  background: #eee;
}

.main_div.list_tag_kanbanize ul.topLevel::-webkit-scrollbar-thumb {
  background: #ccc;
}

.main_div.list_tag_kanbanize ul.topLevel li.hiddenByFilter, 
.main_div.list_tag_kanbanize ul.topLevel li.hidden {
  border: 0 !important;
  margin: 0 !important;
}

.main_div.list_tag_kanbanize ul.topLevel.focusActiveTop > li.hiddenByFilter {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task {
  flex: 0 1 500px;
  margin: 0;
  padding: 0 22px 0 0;
  counter-reset: cardCount;
}

.main_div.list_tag_kanbanize ul.topLevel li.task > div.coreDiv {
  margin-right: 22px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv {
  margin-left: 24px;
  margin-right: 64px !important;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv > i.act {
  right: 8px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv.tag_count {
  margin-right: 94px !important;
}

.main_div.list_tag_kanbanize .tag.tag_count {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed {
  max-width: 34px;
  min-width: 34px;
  margin-left: 0;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv {
  padding: 1px 3px;
  margin: 0 !important;
  border: 1px solid black;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv > div.nodeImage.node_collapsed {
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: rotate(0deg);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv > span.editable {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 4px 2px;
  display: inline-block;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv > i.act {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > ul {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed .progressCounter {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv > div.nodeImage:after {
  content: "\f33e";
  font-size: 14px;
  position: absolute;
  top: 4px;
  left: 2px;
  }

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul {
  padding: 0 2px 0 24px;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  height: calc(100vh - 168px) !important;
  min-width: 300px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul::-webkit-scrollbar {
  width: 6px;
  background: #eee;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul::-webkit-scrollbar-thumb {
  width: 6px;
  background: #ccc;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_count ~ ul::after {
  position: absolute;
  right: 24px;
  top: 6px;
  height: 17px;
  min-width: 17px;
  border: 1px solid black;
  border-radius: 50%;
  padding: 2px;
  font-size: 0.7em;
  line-height: 17px;
  text-align: center;
  content: counter(cardCount);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task {
  margin: 0 0 2px 0;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .1), -1px 2px 2px rgba(0, 0, 0, .1);
  counter-increment: cardCount;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.selectedTask {
  background-color: rgb(246, 251, 255);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > div.coreDiv {
  margin: 0;
  padding-right: 22px;
  position: sticky;
  top: 0px;
  border: 1px solid black;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .1);
  z-index: 19;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > div.coreDiv > i.act {
  right: 8px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li:not(.selectedTask) > div.coreDiv:not(.selectedTask) {
  background-color: rgb(244,244,244);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > ul:empty {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > ul:not(:empty) {
  border: 1px solid black;
  border-top-color: white;
}

.main_div.list_tag_kanbanize .textareaWrapper {
  flex: 1 1 200px;
}

.main_div.list_tag_kanbanize .textareaWrapper > textarea{
  width: 100% !important;
}

.main_div.list_tag_kanbanize #tasks_block {
  margin-bottom: 0;
}

.main_div.list_tag_kanbanize .progressCounter {
  right: -64px;
  flex-direction: row-reverse;
}

.main_div.list_tag_kanbanize .progressCounter > .progressCounter__estimate {
  position: initial;
  margin-right: 4px; 
}

After saving this custom CSS in the settings (PRO feature), one can activate the Kanban layout for any list by adding the #kanbanize tag to the list.

I have one list with this layout that I use very much and it works rather well for me.

However, I don’t know, if the CSS works well in all browsers (I mostly use Firefox). And there are (of course) some shortcomings.

For example, drag-and-drop does not really work. So one has to use keyboard shortcuts instead. To move a card up/down, one can use the usual shortcuts (ctrl-up/down). To move a card to another column, one can use mm, then select the current list, and then select the target column. Alternatively, one can create and then select this bookmarklet to move a card to the previous column:

javascript:maxkir.cmd.move_top();maxkir.cmd.move_up_jump();maxkir.cmd.move_top();

and this bookmarklet to move a card to the next column:

javascript:maxkir.cmd.move_bottom();maxkir.cmd.move_down_jump();

Unfortunately, I did not find out how to move the selection to the previous/next column, so I have to use the mouse/trackpad for this. Also scrolling (up/down and left/right) does not really work by keyboard. That’s bad, I know.

As an extra feature, one can add a card counter to a column by tagging the column with #count. The tag itself will be hidden, but a circle containing the number of cards in the column will appear to the right of the column title.

You may check out how my Kanban layout looks like at this public list:

Kanban Example list (after opening the link, one should type ec and expand the list to level 3 or greater to open all cards)

Maybe this is usefull not only for me.

Best,
soremo

saurabhg9 · September 14, 2020, 1:58pm

This is very impressive!

soremo · September 16, 2020, 4:15pm

I just found a way to define limits for the columns. With the latest version of the CSS (see below), it is now possible to tag a column with #limit1, #limit2, #limit3, …, or #limit10 instead of #count in order to show a counter that turns red if the number of cards in the column exceeds the limit. In the screenshot of the public example list (see my previous post), the “Work in Progress” column is tagged with #limit3, but contains four cards and hence the counter has turned red.

And here comes the updated CSS (it’s not well tested, so hopefully it doesn’t break anything; anyway, all data should be safe, since CSS only affects the layout):

body {
  padding-bottom: 0;
}

.main_div.list_tag_kanbanize > .layoutDiv > .toolbarDiv > div.toolBar {
  max-width: unset;
}

.main_div.list_tag_kanbanize > .layoutDiv > div.content {
  max-width: unset;
  padding: 0;
}

.main_div.list_tag_kanbanize div.verticalGuide, 
.main_div.list_tag_kanbanize div.verticalGuide__selected {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel {
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 32px;
}

.main_div.list_tag_kanbanize ul.topLevel::-webkit-scrollbar {
  height: 6px;
  background: #eee;
}

.main_div.list_tag_kanbanize ul.topLevel::-webkit-scrollbar-thumb {
  background: #ccc;
}

.main_div.list_tag_kanbanize ul.topLevel li.hiddenByFilter, 
.main_div.list_tag_kanbanize ul.topLevel li.hidden {
  border: 0 !important;
  margin: 0 !important;
}

.main_div.list_tag_kanbanize ul.topLevel.focusActiveTop > li.hiddenByFilter {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task {
  flex: 0 1 500px;
  margin: 0;
  padding: 0 22px 0 0;
  counter-reset: cardCount;
}

.main_div.list_tag_kanbanize ul.topLevel li.task > div.coreDiv {
  margin-right: 22px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv {
  margin-left: 24px;
  margin-right: 64px !important;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv > i.act {
  right: 8px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv.tag_count, 
.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv[class^='tag_limit'],
.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv[class*=' tag_limit'] {
  margin-right: 94px !important;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed {
  max-width: 34px;
  min-width: 34px;
  margin-left: 0;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv {
  padding: 1px 3px;
  margin: 0 !important;
  border: 1px solid black;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv > div.nodeImage.node_collapsed {
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: rotate(0deg);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv > span.editable {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 4px 2px;
  display: inline-block;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > div.coreDiv > i.act {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed > ul {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task.node_collapsed .progressCounter {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv > div.nodeImage:after {
  content: "\f33e";
  font-size: 14px;
  position: absolute;
  top: 4px;
  left: 2px;
  }

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul {
  padding: 0 2px 0 24px;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  height: calc(100vh - 168px) !important;
  min-width: 300px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul::-webkit-scrollbar {
  width: 6px;
  background: #eee;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul::-webkit-scrollbar-thumb {
  width: 6px;
  background: #ccc;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task {
  position: unset;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv .tag.tag_count, 
.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv .tag[class^='tag_limit'],
.main_div.list_tag_kanbanize ul.topLevel > li.task > div.coreDiv .tag[class*=' tag_limit'] {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_count ~ ul > li.task:last-of-type::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv[class^='tag_limit'] ~ ul > li.task:last-of-type::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv[class*=' tag_limit'] ~ ul > li.task:last-of-type::after {
  position: absolute;
  right: 24px;
  top: 6px;
  height: 17px;
  min-width: 17px;
  border: 1px solid black;
  border-radius: 50%;
  padding: 2px;
  font-size: 0.7em;
  line-height: 17px;
  text-align: center;
  content: counter(cardCount);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit1 ~ ul > li.task:last-of-type:nth-of-type(n+2)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit2 ~ ul > li.task:last-of-type:nth-of-type(n+3)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit3 ~ ul > li.task:last-of-type:nth-of-type(n+4)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit4 ~ ul > li.task:last-of-type:nth-of-type(n+5)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit5 ~ ul > li.task:last-of-type:nth-of-type(n+6)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit6 ~ ul > li.task:last-of-type:nth-of-type(n+7)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit7 ~ ul > li.task:last-of-type:nth-of-type(n+8)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit8 ~ ul > li.task:last-of-type:nth-of-type(n+9)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit9 ~ ul > li.task:last-of-type:nth-of-type(n+10)::after, 
.main_div.list_tag_kanbanize ul.topLevel > li.task:not(.node_collapsed) > div.coreDiv.tag_limit10 ~ ul > li.task:last-of-type:nth-of-type(n+11)::after {
  background-color: red;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task {
  margin: 0 0 2px 0;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .1), -1px 2px 2px rgba(0, 0, 0, .1);
  counter-increment: cardCount;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.selectedTask {
  background-color: rgb(246, 251, 255);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > div.coreDiv {
  margin: 0;
  padding-right: 22px;
  position: sticky;
  top: 0px;
  border: 1px solid black;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, .1);
  z-index: 19;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > div.coreDiv > i.act {
  right: 8px;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li:not(.selectedTask) > div.coreDiv:not(.selectedTask) {
  background-color: rgb(244,244,244);
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > ul:empty {
  display: none;
}

.main_div.list_tag_kanbanize ul.topLevel > li.task > ul > li.task > ul:not(:empty) {
  border: 1px solid black;
  border-top-color: white;
}

.main_div.list_tag_kanbanize .textareaWrapper {
  flex: 1 1 200px;
}

.main_div.list_tag_kanbanize .textareaWrapper > textarea{
  width: 100% !important;
}

.main_div.list_tag_kanbanize .coreNote {
  /* flex: 1 1 160px; */
}

.main_div.list_tag_kanbanize .coreNote > .commentText {
  /* width: 100% !important; */
}

.main_div.list_tag_kanbanize #tasks_block {
  margin-bottom: 0;
}

.main_div.list_tag_kanbanize .progressCounter {
  right: -64px;
  flex-direction: row-reverse;
}

.main_div.list_tag_kanbanize .progressCounter > .progressCounter__estimate {
  position: initial;
  margin-right: 4px; 
}

Best,
soremo

maxkir · September 16, 2020, 5:03pm

Thanks a lot, @soremo, that’s really cool! We’re pondering in what form we could merge your approach in Checkvist to make it a full-fledged feature. In the meantime, you can use shortcuts mn and mp to move item to the next/previous column (on beta.checkvist.com). This should simplify using your kanban view

Thanks a lot again!