0028826: Removing vertical lines in tabular presentation to reduce clutter - MantisBT

ID	Project	Category	View Status	Date Submitted	Last Update

0028826	mantisbt	ui	public	2021-06-18 11:35	2021-07-18 23:10

Reporter	twwwt	Assigned To	community
Priority	normal	Severity	feature	Reproducibility	always
Status	resolved	Resolution	fixed
Product Version	2.25.2
Target Version	2.26.0	Fixed in Version	2.26.0

Summary	0028826: 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?
Tags	No tags attached.
Attached Files	0017145__Need_to_show_obsolete_versions_in_Change_Log__-_MantisBT.png (378,177 bytes) Übersicht_-_MantisBT.png (304,821 bytes) Übersicht_-_MantisBT.png (304,821 bytes)

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 2021-06-20 11:22 developer ~0065638	Thanks, @dregad! I don't mind removing the vertical line - it appears cleaner and less cluttered.

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 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 2021-06-22 16:43 reporter ~0065647	This turned out to be simple, see pull request https://github.com/mantisbt/mantisbt/pull/1760

dregad 2021-06-23 02:40 developer ~0065648	Thanks for the PR, will test/review as time allows.

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