Edgewall Software
Modify

Opened 5 years ago

Closed 5 years ago

Last modified 3 years ago

#12048 closed enhancement (fixed)

[PATCH] Add scope to CSS rules in timeline.css

Reported by: Baptiste Mispelon <bmispelon@…> Owned by: Baptiste Mispelon <bmispelon@…>
Priority: normal Milestone: 1.1.5
Component: timeline Version:
Severity: normal Keywords:
Cc: Branch:
Release Notes:

Fixed timeline CSS rules interfering with styling of custom themes.

API Changes:

Timeline CSS rules are scoped to the .timeline class.

Description

The way the CSS rules are declared in timeline.css makes it hard to integrate Trac into an existing design.

You can see an example in the footer of https://code.djangoproject.com/timeline (big gray rectangles).

I would propose to add a .timeline prefix to the rules in the stylesheet to avoid this kind of problem.

Attachments (2)

timeline-css-scoping.diff (1.7 KB ) - added by Baptiste Mispelon <bmispelon@…> 5 years ago.
Git-format patch
timeline-css-scoping-1.0.diff (1.7 KB ) - added by Baptiste Mispelon <bmispelon@…> 5 years ago.
Patch for 1.0-stable branch

Download all attachments as: .zip

Change History (15)

by Baptiste Mispelon <bmispelon@…>, 5 years ago

Attachment: timeline-css-scoping.diff added

Git-format patch

comment:1 by Ryan J Ollos, 5 years ago

Milestone: 1.0.6
Owner: set to Ryan J Ollos
Status: newassigned

Thanks for the patch. I see no problem with applying some form of the patch for the upcoming release, but let's see what the other devs have to say.

A few comments:

  • Which version of Trac are you running on the Django site? The patch applies cleanly on the trunk, but not on 1.0-stable.
  • The nested CSS would be much easier to manage if we were using something like Sass to generate our CSS, something the Trac project should keep in mind for the future.
  • An alternative to using the class selector, we could use the #content selector. The reason I mention that is that equivalent changes could then be applied to report.css, roadmap.css, etc; resulting in a very consistent pattern that could be useful for sites that use a theme to make Trac appear nested in the page.

I'm glad to see the Django project still running Trac!

by Baptiste Mispelon <bmispelon@…>, 5 years ago

Patch for 1.0-stable branch

comment:2 by Baptiste Mispelon <bmispelon@…>, 5 years ago

Regarding your comments:

  • Django currently runs 1.0.5. I've attached a patch against the 1.0 branch as well.
  • A CSS pre-processor would probably be really useful but it's a major undertaking. As a point of reference, the djangoproject website now uses SASS with libsass [1] and I find it works quite well.
  • I haven't looked into some of the other CSS files but the reason I chose the .timeline prefix was that in case someone was relying on the global styling in their custom CSS, it would be easy to restore the old behavior by wrapping the site in a <div class="timelime">.

And yes, we're still running our Trac instance and are approaching 25000 tickets. Trac has its warts (integrating it with our custom CSS was hard and running it locally is quite tricky), it's still a very solid bug tracker and an integral part of our project.

Thanks!

[1] https://pypi.python.org/pypi/libsass/0.7.0

Last edited 5 years ago by Ryan J Ollos (previous) (diff)

comment:3 by Jun Omae, 5 years ago

That changes seem to be good. However, it would lead a bit of incompatibilities to plugins which use the stylesheet, e.g. th:source:ticketmodifiedfilesplugin/0.11/ticketmodifiedfiles/ticketmodifiedfiles.py@11457:37#L28.

I think we should apply it on trunk.

Last edited 5 years ago by Jun Omae (previous) (diff)

comment:4 by Ryan J Ollos, 5 years ago

Milestone: 1.0.61.1.5

Okay, let's apply to trunk.

The patch doesn't include .timeline in the following rules: trunk/trac/htdocs/css/timeline.css@13937:55-63,66-67,70-71,76,86,89-94,102,106,110#L54. Should we also scope those rules to .timeline for consistency, even though they already match to classes rather than just element type?

in reply to:  4 comment:5 by Jun Omae, 5 years ago

Replying to rjollos:

The patch doesn't include .timeline in the following rules: trunk/trac/htdocs/css/timeline.css@13937:55-63,66-67,70-71,76,86,89-94,102,106,110#L54. Should we also scope those rules to .timeline for consistency, even though they already match to classes rather than just element type?

Yeah, I think we should scope all rules in timeline.css to .timeline. I consider that changes would be able to merge the timeline.css to trac.css and reduce requests to improve performance.

comment:6 by Ryan J Ollos, 5 years ago

API Changes: modified (diff)
Release Notes: modified (diff)

comment:7 by Ryan J Ollos, 5 years ago

I'll also do some testing to do determine if we still need this rule ([997#file0]): tags/trac-1.1.4/trac/htdocs/css/timeline.css@:3.

comment:8 by Ryan J Ollos, 5 years ago

Proposed changes in log:rjollos.git:t12048. I'll do a bit more testing in a few hours.

The rules removed in [a518966e/rjollos.git] and [7c2df7a8/rjollos.git] appear to apply to IE only for Document Mode 5. Tested with IE 11 on Windows 8 in emulation mode.

comment:9 by Ryan J Ollos, 5 years ago

Resolution: fixed
Status: assignedclosed

Changes committed in [14051].

comment:10 by Ryan J Ollos, 5 years ago

Owner: changed from Ryan J Ollos to Baptiste Mispelon <bmispelon@…>

comment:11 by Baptiste Mispelon <bmispelon@…>, 5 years ago

Thank you, much appreciated.

comment:12 by Ryan J Ollos, 3 years ago

The line dd.changeset .changes .add { background: #bfb } was accidentally removed in r14051. Noted in gmessage:trac-users:UJJOQbm7bOo/XV48I3-QAwAJ.

Fixed in r15532, merged in r15533.

comment:13 by Christian Boos, 3 years ago

Thanks!

I noticed this since a long time in my own Trac, and somehow I didn't bothered until I saw it this morning on TracHacks… then I knew it wasn't my local setup ;-)

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Baptiste Mispelon <bmispelon@…>.
The resolution will be deleted. Next status will be 'reopened'.
to as closed The owner will be changed from Baptiste Mispelon <bmispelon@…> to the specified user.

Add Comment


E-mail address and name can be saved in the Preferences .
 
Note: See TracTickets for help on using tickets.