search

digitalfabrik / integreat-cms

Simplified content management back end for the Integreat App - a multilingual information platform for newcomers
https://digitalfabrik.github.io/integreat-cms/
Apache License 2.0
56 stars 35 forks source link

Visually indicate when a checkbox is disabled #2051

Closed charludo closed 1 year ago

charludo commented 1 year ago

Motivation

As a user, I want a clear indication of when a checkbox is disabled. Currently, there is no visual distinction, which can be rather confusing.

Proposed Solution

Add the tailwind classes bg-gray-100 border-gray-300 to disabled checkboxes.

Alternatives

I'm not sure how much effort it is to do this in django itself. Maybe it's simpler to write a small JS script that toggles these classes?

Additional Context

image Current situation - one of these checkboxes is disabled, can you tell which one? 😉

!image With the added classes. Much clearer IMO.

Design Requirements

The classes are just a suggestion (copied from the tailwind docs), others might be more suitable for the Integreat color scheme.

membralala commented 1 year ago

I'm not sure how much effort it is to do this in django itself. Maybe it's simpler to write a small JS script that toggles these classes?

As we are using tailwindcss, it would be also possible to do it with the disabled state, if there are no objections?

timobrembeck commented 1 year ago

As we are using tailwindcss, it would be also possible to do it with the disabled state, if there are no objections?

Cool idea! Then we can also add this to our style sheet and don't need to change anything in the templates or JS code.

charludo commented 1 year ago

As we are using tailwindcss, it would be also possible to do it with the disabled state, if there are no objections?

Oh yes, that sounds like a great solution!

JoeyStk commented 1 year ago

Is this supposed to be for all input fields, for radio and checkboxes or is it exclusively for checkboxes?

timobrembeck commented 1 year ago

Is this supposed to be for all input fields, for radio and checkboxes or is it exclusively for checkboxes?

I think for radio inputs is makes sense as well, although I'm not sure whether we're even using them.