View Issue Details

IDProjectCategoryView StatusLast Update
0028826mantisbtuipublic2023-10-31 16:32
Reportertwwwt Assigned Tocommunity  
PrioritynormalSeverityfeatureReproducibilityalways
Status closedResolutionfixed 
Product Version2.25.2 
Target Version2.26.0Fixed in Version2.26.0 
Summary0028826: Removing vertical lines in tabular presentation to reduce clutter
Description

Mantis' UI uses tabular presentation all over using vertical/horizontal lines to separate cells in forms and lists. This is eye-distracting, makes the UI bumpy, and it gives the UI an archaic style. IMHO, a simple change could already improve this quite nicely: remove the vertical gray lines between cells in forms, lists, and tables almost everywhere. To illustrate this, I've attached screenshots of two major parts of the UI where I have tweaked this. I don't know the underlying CSS, but I think this changed wouldn't incur too much work to be done.

What do you think?

TagsNo tags attached.
Attached Files
Übersicht_-_MantisBT.png (304,821 bytes)   
Übersicht_-_MantisBT.png (304,821 bytes)   

Activities

dregad

dregad

2021-06-20 09:51

developer   ~0065637

Your proposal looks OK to me, indeed reducing clutter on the display.

That said, I'm a bit reluctant to mess with the ACE theme's CSS. Maybe @syncguru will care to comment.

Would you be willing to submit a pull request ?

syncguru

syncguru

2021-06-20 11:22

developer   ~0065638

Thanks, @dregad!

I don't mind removing the vertical line - it appears cleaner and less cluttered.

twwwt

twwwt

2021-06-21 02:42

reporter   ~0065639

That said, I'm a bit reluctant to mess with the ACE theme's CSS. Maybe @syncguru will care to comment.

Not necessarily. Assuming ACE theme style(s) do not make heavy use of !important (which is considered bad practice anyway), you could as well introduce another style sheet loaded after ACE theme style(s) that overwrites relevant parts. That's what the C in CSS is about - it's cascading. In case there exists such a style sheet already for individual overwrites, this file can be taken instead and extended.

Would you be willing to submit a pull request ?

I can have a look at it. I would appreciate some info on where style sheets are loaded in the source files, whether there exists already a dedicated file in which you are making individual overwrites, and if not, if you agree if the pull request would introduce such a new CSS file.

dregad

dregad

2021-06-21 09:19

developer   ~0065640

assuming ACE theme style(s) do not make heavy use of !important

Unfortunately, I'm afraid it actually does...

I would appreciate some info on where style sheets are loaded in the source files

Look at html_css() function in core/html_api.php and layout_head_css() in core/layout_api.php.

whether there exists already a dedicated file in which you are making individual overwrites

We have default.css, and probably more appropriate for your purposes, ace-mantis.css.

twwwt

twwwt

2021-06-22 16:43

reporter   ~0065647

This turned out to be simple, see pull request https://github.com/mantisbt/mantisbt/pull/1760

dregad

dregad

2021-06-23 02:40

developer   ~0065648

Thanks for the PR, will test/review as time allows.

Related Changesets

MantisBT: master 20e45c85

2021-07-14 09:16

twwwt

Committer: dregad


Details Diff
Remove vertical lines for bordered tables

The tabular presentation used widely in the UI should be changed to be
more pleasing to the eye. Set left and right border with to 0 pixels
for all kind of cells in `table-bordered` class.

Fixes 0028826
Affected Issues
0028826
mod - css/ace-mantis.css Diff File