Change card outline colour when resizing #245

Closed
opened 2026-04-13 07:47:51 +00:00 by a24vinla · 7 comments
Collaborator

React-grid-layout uses red to outline the new size of cards when resizing cards, and we need to either remove it altogether or change it to a more appropriate colour. Please provide examples of both.

React-grid-layout uses red to outline the new size of cards when resizing cards, and we need to either remove it altogether or change it to a more appropriate colour. Please provide examples of both.
c24carso added reference #245-change-card-outline-color 2026-04-13 09:29:52 +00:00
Collaborator

Here's the before(red), after(none) and after(blue)

Here's the before(red), after(none) and after(blue)
Collaborator

A PR has been opened.

A PR has been opened.
Collaborator

Is this supposed to be a user setting? Or a decision on what should be?

Either way, code shows examples of both cases and how one can easily change the color to other as well.

Is this supposed to be a user setting? Or a decision on what should be? Either way, code shows examples of both cases and how one can easily change the color to other as well.
Owner

Is this while resizing?

I would prefer to show resizing using more than just color, as some people have a hard time to identify what is going on if we only show things using colors, rather than color and luminosity for instance (or outlines / shadows / other ways).

Is this while resizing? I would prefer to show resizing using more than just color, as some people have a hard time to identify what is going on if we only show things using colors, rather than color and luminosity for instance (or outlines / shadows / other ways).
Author
Collaborator

Since we change the background in css to a specific colour we should be able to change it to an svg instead, allowing us to have more accessible-friendly feedback. We should also be able to add a border to the grid placeholder.

I don't however think that the placeholder outline is necessary, since the only restriction to moving or resizing is other cards (i.e. we can't put cards on top of other cards or enlarge a card so that it would take up another cards spot). This together with the grid layout being shown while in edit mode should be enough, therefore allowing us to simply remove the card layout.

Since we change the background in css to a specific colour we should be able to change it to an svg instead, allowing us to have more accessible-friendly feedback. We should also be able to add a border to the grid placeholder. I don't however think that the placeholder outline is necessary, since the only restriction to moving or resizing is other cards (i.e. we can't put cards on top of other cards or enlarge a card so that it would take up another cards spot). This together with the grid layout being shown while in edit mode should be enough, therefore allowing us to simply remove the card layout.
Collaborator

@a24vinla what is the status of this issue?

@a24vinla what is the status of this issue?
Collaborator

This has been fixed. Andras/BoundlessFlowCampus2K@099a394e86 I close this issue

This has been fixed. https://git.webug.se/Andras/BoundlessFlowCampus2K/commit/099a394e86978ec1802c82365d9b47639d45e16e I close this issue
Sign in to join this conversation.
No milestone
No project
6 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K#245
No description provided.