Bryntum TaskBoard: Responsive configs

[jintech]

Hi team !

Could you help me understand a couple of things ?
Reference link: https://bryntum.com/products/taskboard/examples/responsive/

#1 In above link example we have responsive-> small and then

// Hide tags from cards
footerItems       : {
     'tags > resourceAvatars' : { hidden : true }
},

Now if i click on mobile from bar, it says small, but I am still able to see tags and resources avatar
So what does this code do ? 'tags > resourceAvatars' : { hidden : true }

s1.png (712.07 KiB) Viewed 6237 times

#2 According to this doc : https://bryntum.com/products/taskboard-next/docs/api/TaskBoard/view/mixin/ResponsiveCards

Depending upon card size the number of resourceAvatars will appear in cards right ?

So i updated above example like this
Added this(cardSize config small) in all cases, yet it won't limit the number to 1 and max numbers are always coming not adjusting ? or does below config do something else ?

cardSizes: [
	{ name : 'small' }
]

responsive : {
        small : {
            when : 375,  // when width <= 375

        // Configs applied for this state
        features : {
            columnToolbars : {
                disabled : true
            }
        },

        // Hide count from headers to save a bit of space
        showCountInHeader : false,
        // Hide tags from cards
        footerItems       : {
            'tags > resourceAvatars' : { hidden : true }
        },

        // This state uses a callback to hide a column on the TaskBoard
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = true;
        },
        cardSizes: [
				{ name : 'small' }
			]
    },

    // Custom responsive state
    narrow : {
        when : 600,  // when width <= 600

        // Configs applied for this state
        showCountInHeader : false,
        footerItems       : {
            'tags > resourceAvatars' : { hidden : true }
        },

        // This state uses a callback to hide a column on the TaskBoard
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = false;
        },
        cardSizes: [
				{ name : 'small' }
			]
    },

    medium : {
        when : 850,  // when width <= 850

        // This state also hides the column
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = false;
        },
        cardSizes: [
				{ name : 'small' }
			]
    },

    large : {
        // when width > 850

        // This state also has to have a callback to bring the column back again
        callback({ source }) {
            source.columns.done.hidden = false;
            source.columns.considering.hidden = false;
        },
        cardSizes: [
				{ name : 'small' }
			]
    },

    '*' : {
        // These configs are merged key-for-key with the configs of the other states and act as defaults
        // for them. These values are used by medium/large states and are partially overridden by the
        // narrow state. Having defaults here ensures that these configs are restored when switching from
        // the small state to another state.
        features : {
            columnToolbars : {
                disabled : false
            }
        },

        showCountInHeader : true,
        footerItems       : {
            'tags > resourceAvatars' : { hidden : false }
        }
    }
},

[tasnim]

It seems like a bug. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/12586

[ahmadzaheer]

Hello Jintech,

We are investigating the first point that you mentioned. For the second point, please note that you need to add the cardSizes config. Let's take the same example https://bryntum.com/products/taskboard/examples/responsive/.
If you add the following config after the listeners config inside that examples:

cardSizes : [
        { maxWidth : 160, name : 'small', maxAvatars : 1 },
        { name : "medium", maxAvatars : 2, maxWidth : 240 },
        { name : "large", maxAvatars : 4, maxWidth : 300 },
    ]

So, when the size of the card is below 160, it will show only one avatar (You can verify this in the Mobile and Narrow view because in both the size of the card is below 160). For card size between 160 and 240, two avatar will be shown (Can be seen in Medium and Wide screen sizes). And for card size greater than 240, four avatars will be displayed.

Hope this helps. You can track the above mentioned ticket for the first issue.

[jintech]

Hi Team,
For 2nd point the solution you mentioend is working, but help me understand it.

Do we need to provide all sizes configs ?

Lets take en example from same page: https://bryntum.com/products/taskboard/examples/responsive/

Now if i add below config inside responsive->small, after the listeners config

cardSizes : [
        { name : "small", maxAvatars : 2, maxWidth : 160 },
    ]

and apply changes then by default on big screen, large class is applied and 7 avatars comes, and then when i resize the width and it hits small screen my above configs are applied and max 2 cards comes for small, and after that if i resize again and it hits the large screen size, max cards remains 2 in this case.

so once a cardSize config hits, then it will retains itself always ?

so inside responsize for each width size i need to add multiple-card sizes configs ?

Should not this be like, if i have added cardSizes configs for small it should only work when small is hit and later if it hits medium or large it should skip any config given on small width ?

responsive : {
        small : {
            when : 375,  // when width <= 375

        // Configs applied for this state
        features : {
            columnToolbars : {
                disabled : true
            }
        },

        // Hide count from headers to save a bit of space
        showCountInHeader : false,
        // Hide tags from cards
        footerItems       : {
            'tags > resourceAvatars' : { hidden : true }
        },

        // This state uses a callback to hide a column on the TaskBoard
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = true;
        },
        cardSizes : [
    { name : "small", maxAvatars : 2, maxWidth : 160 },
]

[ahmadzaheer]

Hello Jintech,

Yes you need to provide all the sizes config. You can paste the following code in the same example. Please note that I have passed the cardSizes config outside the responsive config.

const taskBoard = new TaskBoard({
    appendTo : 'container',

// Apply shared demo styling to put it in a nice box
cls : 'demo-app',

responsive : {
    small : {
        when : 375,  // when width <= 375

        // Configs applied for this state
        features : {
            columnToolbars : {
                disabled : true
            }
        },

        // Hide count from headers to save a bit of space
        showCountInHeader : false,
        // Hide tags from cards
        footerItems       : {
            'tags > resourceAvatars' : { hidden : true }
        },

        // This state uses a callback to hide a column on the TaskBoard
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = true;
        }
    },

    // Custom responsive state
    narrow : {
        when : 600,  // when width <= 600

        // Configs applied for this state
        showCountInHeader : false,
        footerItems       : {
            'tags > resourceAvatars' : { hidden : true }
        },

        // This state uses a callback to hide a column on the TaskBoard
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = false;
        }
    },

    medium : {
        when : 850,  // when width <= 850

        // This state also hides the column
        callback({ source }) {
            source.columns.done.hidden = true;
            source.columns.considering.hidden = false;
        }
    },

    large : {
        // when width > 850

        // This state also has to have a callback to bring the column back again
        callback({ source }) {
            source.columns.done.hidden = false;
            source.columns.considering.hidden = false;
        }
    },

    '*' : {
        // These configs are merged key-for-key with the configs of the other states and act as defaults
        // for them. These values are used by medium/large states and are partially overridden by the
        // narrow state. Having defaults here ensures that these configs are restored when switching from
        // the small state to another state.
        features : {
            columnToolbars : {
                disabled : false
            }
        },

        showCountInHeader : true,
        footerItems       : {
            'tags > resourceAvatars' : { hidden : false }
        }
    }
},

features : {
    columnDrag : true
},

resourceImagePath : '../_shared/images/transparent-users/',

columns : [
    { id : 'todo', text : 'Todo', color : 'indigo' },
    { id : 'considering', text : 'Considering', color : 'teal' },
    'doing', // Will use the primary color
    { id : 'done', text : 'Done', color : 'lime' }
],

columnField : 'status',

// Cards displays tags and avatars, with tags first
footerItems : {
    resourceAvatars          : { overlap : true },
    'tags > resourceAvatars' : { type : 'tags', style : 'flex: 1' }
},

project : {
    loadUrl  : 'data/data.json',
    autoLoad : true
},

tbar : [
    {
        type : 'label',
        cls  : 'force-width',
        text : 'Force width'
    },
    {
        type        : 'buttongroup',
        rendition   : 'padded',
        toggleGroup : true,
        items       : [
            {
                text    : 'Mobile',
                tooltip : 'Force 375px width',
                onClick() {
                    taskBoard.maxWidth = 375;
                }
            },
            {
                text    : 'Narrow',
                tooltip : 'Force 600px width',
                onClick() {
                    taskBoard.maxWidth = 600;
                }
            },
            {
                text    : 'Medium',
                tooltip : 'Force 800px width',
                onClick() {
                    taskBoard.maxWidth = 800;
                }
            },
            {
                text    : 'Wide',
                tooltip : 'Force 1000px width',
                onClick() {
                    taskBoard.maxWidth = 1000;
                }
            },
            {
                text    : 'None',
                pressed : true,
                tooltip : 'Width is decided by browser window width',
                onClick() {
                    taskBoard.maxWidth = null;
                }
            }
        ]
    },
    '->',
    {
        type : 'label',
        ref  : 'responsiveWidth',
        cls  : 'responsive-width',
        text : 'Responsive width'
    }
],

listeners : {
    // Catch event triggered when the responsive state changes. Display the name of the state on the toolbar
    responsiveStateChange({ source : taskBoard, state }) {
        taskBoard.widgetMap.responsiveWidth.html =
            `<span>Responsive width: </span><b style="margin-inline-start : .5em">${state}</b>`;
    }
},

cardSizes : [
    { maxWidth : 160, name : 'small', maxAvatars : 1 },
    { name : "medium", maxAvatars : 2, maxWidth : 240 },
    { name : "large", maxAvatars : 4, maxWidth : 300 },
]
});

Now let's consider that you only pass this

cardSizes : [
        { name : "small", maxAvatars : 2, maxWidth : 160 },
    ]

Then only two avatars will be displayed at each screen size. This is because the cardSizes screen is overridden by this but it doesn't have the config for medium and large screen sizes. Only reference it has is of maxAvatars: 2. Similarly if you add another config of medium here:

cardSizes : [
        { name : "small", maxAvatars : 2, maxWidth : 160 },
        { name : "medium", maxAvatars : 3, maxWidth : 240 },
    ]

Then for sizes greater than 240, it will display 3 avatars

You don't need to pass the cardSizes config for each responsive config. You can simply pass it outside the responsive config just like in the code provided above.