Link styling is unclear in Teams page #92

New Issue

Sybren A. Stüvel · 2024-04-29T12:56:03+02:00

Sybren A. Stüvel commented

2024-04-29 12:56:03 +02:00

The "View" link is not styled as link at https://extensions.blender.org/settings/teams/

Having said that, personally I would just remove the "view" link, and instead just make the team name (or the entire table row) clickable. Of course this also would have to be styled to make this clear (without relying on mouse-over, as that's not even available on many devices).

The "View" link is not styled as link at https://extensions.blender.org/settings/teams/ ![image](/attachments/db657f70-da4b-4582-b66a-a8dd9fa2c5b9) Having said that, personally I would just remove the "view" link, and instead just make the team name (or the entire table row) clickable. Of course this also would have to be styled to make this clear (without relying on mouse-over, as that's not even available on many devices).

image.png

28 KiB

Márton Lente was assigned by Dalai Felinto

2024-05-03 11:23:16 +02:00

Dalai Felinto commented

2024-05-03 11:23:19 +02:00

Thanks for the report. The plan is indeed to make the team name clickable and ditch the View.

It is on @martonlente desk, but not sure where the front-end tasks are listed, so will just assign him for now.

Thanks for the report. The plan is indeed to make the team name clickable and ditch the View. It is on @martonlente desk, but not sure where the front-end tasks are listed, so will just assign him for now.

👍 1

Sybren A. Stüvel commented

2024-05-03 15:28:01 +02:00

I think (from a very brief glance at the styling in my browser's inspector, so do take this with the appropriate lightness) the root cause is that there seems to be a top-level styling for <a> that removes any link-like markup. This I would recommend against, as it requires constant vigilance for these kind of accessibility issues.

I think (from a _very_ brief glance at the styling in my browser's inspector, so do take this with the appropriate lightness) the root cause is that there seems to be a top-level styling for `<a>` that removes any link-like markup. This I would recommend against, as it requires constant vigilance for these kind of accessibility issues.

Dalai Felinto commented

2024-05-03 18:25:10 +02:00

@martonlente: I think we have the same problem on the Approval Queue as well. See my first reply here: https://extensions.blender.org/approval-queue/bagapie/

Basically Install from Disk is a link, but you cannot tell until you mouse over it.

@martonlente: I think we have the same problem on the Approval Queue as well. See my first reply here: https://extensions.blender.org/approval-queue/bagapie/ Basically `Install from Disk` is a link, but you cannot tell until you mouse over it.

Márton Lente referenced this issue from a commit

2024-05-07 16:45:40 +02:00

UI: Changes links styling in tables

Márton Lente referenced this issue from a commit

2024-05-07 17:10:03 +02:00

UI: Make template team_list layout and style more consistent

Márton Lente commented

2024-05-07 18:27:17 +02:00

I addressed the above issues with the following visual changes:

Applied a generic styling to the links within tables, so that they look and work the same way as in other boxes and panels on the UI.
Changed the 'Teams list' table in a way that it matches other tables' layout and look on the UI.
Moved the 'View' link onto the Team name, and transformed the row to a clickable area.
Added the role badges.

Example screenshots:

We plan other improvements to the Approval Queue's UI (e.g. improve activity count display), but those are not related and would close the issue for now.

I addressed the above issues with the following visual changes: - Applied a generic styling to the links within tables, so that they look and work the same way as in other boxes and panels on the UI. - Changed the 'Teams list' table in a way that it matches other tables' layout and look on the UI. - Moved the 'View' link onto the Team name, and transformed the row to a clickable area. - Added the role badges. Example screenshots: ![link-styling-is-unclear-in-teams-page-1-min.jpeg](/attachments/e1f5962c-a0f3-41f2-bb93-719c313d0465) ![link-styling-is-unclear-in-teams-page-min.jpeg](/attachments/6d64ba83-50c8-48a3-9bb6-91a58bb317b2) We plan other improvements to the Approval Queue's UI (e.g. improve activity count display), but those are not related and would close the issue for now.

link-styling-is-unclear-in-teams-page-min.jpeg

16 KiB

link-styling-is-unclear-in-teams-page-1-min.jpeg

32 KiB

Márton Lente closed this issue

2024-05-07 18:27:17 +02:00

Sybren A. Stüvel commented

2024-05-10 11:04:04 +02:00

Thanks!

👍 1

Sign in to join this conversation.