View Issue Details

IDProjectCategoryView StatusLast Update
0024345mantisbtuipublic2021-09-10 03:03
Reporterjeromedl Assigned To 
PrioritynormalSeverityfeatureReproducibilityalways
Status newResolutionopen 
Product Version2.13.1 
Summary0024345: Add bug-contextual classes in the generated HTML pages for easier CSS customization
Description

In order to allow an easier UI customization with CSS styling, it would be very convenient that the generated HTML code contains more classes depending on what they are specifically displaying.

In the same way WordPress generates classes for every content depending on the category, the date, the author and whatsoever, Mantis could easily generates classes for each issue depending on the project, the priority, the status and so on.

Suggestion is to have these classes generated on the top element in the DOM where it's relevant, e.g. in "body" for a page displaying a single issue, in "tr" for a table of issues, and so on.

Example:
For an issue in status "assigned", resolution "open", priority "urgent"
the generated code would be:
class="proj-xxx stat-50 res-10 prio-50 (...)"

Additional Information

Inspired by https://mantisbt.org/wiki/doku.php/mantisbt:ui_grievances

I've been trying to find a proper way to manage this through a plugin. It's more or less possible though not very straightforward especially for tables.

TagsNo tags attached.
Attached Files

Relationships

related to 0029052 new First connection screen inverts username and real-name fields 

Activities

jeromedl

jeromedl

2018-06-11 11:05

reporter   ~0060060

Complement:
Adding class or id to the following elements would be also helpful to allow further customization on:
– Menu items
– Action buttons (NB: I also recommend to convert <input>s to <button>s to allow a full customization such as in the attached screenshot – quick & dirty sample)

jeromedl

jeromedl

2021-09-10 03:03

reporter   ~0065834

As suggested in 0029052, it might be helpful too that:

  • Each page include a classe for its name like body class="page-identifier"
  • When a page is related to an object, to include the object id as well (e.g. body class="manage_proj_edit_page id-77" when editing project 77)