UMB-CS-682-Team-03 / tracker

0 stars 0 forks source link

Add method to target CSS to a specific classhelper instance (hold) #22

Open rouilj opened 5 months ago

rouilj commented 5 months ago

I can see the need to have different CSS for different classhelpers. For example the user classhelper has a search area with username, name and role. Would the layout of that search area be the same as a search used to find issues (e.g. superseder)? For example the title search field for an issue may be wider...

We discussed using id="classhelper" to namespace classhelper css as:

#classhelper {
  --background:...;
  --color:...
}

Is 'id' the right thing to use? It's highly specific. Also the styles built into classhelper.js may have to be overridden. Maybe a class or an attribute is better:

<body data-id="classhelper" class="classhelper">

as it is less specific?

Also to address targeting css to a specific instance, an id: id=classhelper-nosy-user or id=classhelper-superseder-issue allows targeting css to specific instances, but again seems too heavy handed.

Might a data item: data-class="issue superseder" added to the body and addressed with

   [data-class=issue] [data-property=superseder]

be a better idea?

Other thoughts?

rouilj commented 5 months ago

Consider adding a new attribute e.g. "popup_body_class" for the roundup-classhelper component. If present, the value is added to the class list on the body tag of the popup window.

If this gets implemented it should be done by somebody other than Malav who has done much of the current web component implementation. Malav should be available to use his knowledge to assist however.