You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@bloodhound.apache.org by Eric Ladner <er...@gmail.com> on 2013/12/16 16:14:40 UTC

Structural question...

I know the goal is to not change the upstream trac source, but simple
things like minor CSS changes, where should those be implemented to not
affect trac?

Example:  in 0.7, when viewing a source file via changeset, the Timestamp,
Author and Message labels are absolute positioned to the left side of the
window (very noticeable with a wide monitor).  Setting it to "float: left"
gracefully fixes the problem, but the only way I can seem to get it to take
effect is by changing diff.css under the trac tree.

Another lower level example..  When viewing change sets, sometimes the
source path name is extremely long and goes off the screen to the right
(the header "Changeset # in {product} for {SVN path}".  So I figured I'd
hack in the jQuery TextFill plugin to reduce only the source name to a
maximum of 1170 pixels (width of current template content area).  This
requires modifying trac/trac/versioncontrol/templates/changeset.html,
though, which is bad.  Plus it hard codes some constants into the source
like the font height in pixels, the width of the page, etc.

Is there a better way for modifying templates, html, css, etc than going
back to the trac source?
-- 
Eric Ladner

Re: Structural question...

Posted by Ryan Ollos <ry...@wandisco.com>.
On Mon, Dec 16, 2013 at 2:21 PM, Ryan Ollos <ry...@wandisco.com> wrote:

> On Mon, Dec 16, 2013 at 9:38 AM, Ryan Ollos <ry...@wandisco.com>wrote:
>
>>
>> On Dec 16, 2013 12:35 PM, "Eric Ladner" <er...@gmail.com> wrote:
>> >
>> > On Mon, Dec 16, 2013 at 9:20 AM, Joachim Dreimann <
>> > joachim.dreimann@wandisco.com> wrote:
>> >
>> > > On 16 December 2013 15:14, Eric Ladner <er...@gmail.com> wrote:
>> > >
>> >
>> >
>> > > CSS should generally go into the bloodhound.css file. We're not using
>> any
>> > > Trac styles at this point, everything comes from that one file.
>> > > jQuery plugins could also be added here and via the theme templates:
>> > >
>> > >
>> https://issues.apache.org/bloodhound/browser/trunk/bloodhound_theme/bhtheme/templates
>> > >
>> > >
>> > The changeset page includes "diff.css" and "code.css" in addition to
>> > "bloodhound.css".  And rightfully so, probably.  That's a lot of extra
>> CSS
>> > to carry around just for styling this very specific content.
>> >
>> > The incorrect CSS is in the diff.css file.  Keep the changes there or
>> move
>> > them to bloodhound.css?
>>
>> Either way is fine,  just so we can get an idea of the changes you have
>> in mind. We can iterate from there.
>>
> After [1551371] and [1551372] there is a bloodhound theme template for the
> changeset page. It could use a lot of work on the styling, so that would be
> a good task to pick up if you are so inclined.
>
> I think we could propose the following changes to diff.css, to be
> committed to Trac:
>
> diff --git a/trac/trac/htdocs/css/diff.css b/trac/trac/htdocs/css/diff.css
> index bc081cc..5e2ec32 100644
> --- a/trac/trac/htdocs/css/diff.css
> +++ b/trac/trac/htdocs/css/diff.css
> @@ -2,12 +2,16 @@
>  #prefs fieldset { margin: 1em .5em .5em; padding: .5em 1em 0 }
>
>  /* Diff/change overview */
> -#overview { line-height: 130%; margin-top: 1em; padding: .5em }
> +#overview {
> + line-height: 130%;
> + margin-top: 1em;
> + margin-left: 0;
> + padding: .5em 0.5em 0.5em 0
> +}
>  #overview dt.property {
>   font-weight: bold;
>   padding-right: .25em;
>   position: absolute; /* relies on #content { position: relative } */
> - left: 0;
>   text-align: right;
>   width: 7.75em;
>  }
>
> Using absolute positioning for the element doesn't seem like very good
> practice, so I think the changes would be positive for Trac.
>
> http://svn.apache.org/viewvc?view=revision&revision=r1551371
> http://svn.apache.org/viewvc?view=revision&revision=r1551372
>
>
>

Another possible way to fix this would be to add the `position: relative`
rule to the `#content` div.

The `float: left` change looks useful as well, since we could drop the
`position: absolute` rule.

I opened a ticket in Trac to discuss the proposed upstream changes:
http://trac.edgewall.org/ticket/11403.

Re: Structural question...

Posted by Eric Ladner <er...@gmail.com>.
On Mon, Dec 16, 2013 at 4:21 PM, Ryan Ollos <ry...@wandisco.com> wrote:

> On Mon, Dec 16, 2013 at 9:38 AM, Ryan Ollos <ry...@wandisco.com>
> wrote:
> > On Dec 16, 2013 12:35 PM, "Eric Ladner" <er...@gmail.com> wrote:
> ...
> After [1551371] and [1551372] there is a bloodhound theme template for the
> changeset page. It could use a lot of work on the styling, so that would be
> a good task to pick up if you are so inclined.
>
>
Thanks for all the info.  I have a dev branch set up in a VM now to look at
the changset page.  Vacation time is looming near the holidays, though.
 I'll probably have time to poke at it from home, though.

Cheers and happy holidays!

Eric

Re: Structural question...

Posted by Ryan Ollos <ry...@wandisco.com>.
On Mon, Dec 16, 2013 at 9:38 AM, Ryan Ollos <ry...@wandisco.com> wrote:

>
> On Dec 16, 2013 12:35 PM, "Eric Ladner" <er...@gmail.com> wrote:
> >
> > On Mon, Dec 16, 2013 at 9:20 AM, Joachim Dreimann <
> > joachim.dreimann@wandisco.com> wrote:
> >
> > > On 16 December 2013 15:14, Eric Ladner <er...@gmail.com> wrote:
> > >
> >
> >
> > > CSS should generally go into the bloodhound.css file. We're not using
> any
> > > Trac styles at this point, everything comes from that one file.
> > > jQuery plugins could also be added here and via the theme templates:
> > >
> > >
> https://issues.apache.org/bloodhound/browser/trunk/bloodhound_theme/bhtheme/templates
> > >
> > >
> > The changeset page includes "diff.css" and "code.css" in addition to
> > "bloodhound.css".  And rightfully so, probably.  That's a lot of extra
> CSS
> > to carry around just for styling this very specific content.
> >
> > The incorrect CSS is in the diff.css file.  Keep the changes there or
> move
> > them to bloodhound.css?
>
> Either way is fine,  just so we can get an idea of the changes you have in
> mind. We can iterate from there.
>
After [1551371] and [1551372] there is a bloodhound theme template for the
changeset page. It could use a lot of work on the styling, so that would be
a good task to pick up if you are so inclined.

I think we could propose the following changes to diff.css, to be committed
to Trac:

diff --git a/trac/trac/htdocs/css/diff.css b/trac/trac/htdocs/css/diff.css
index bc081cc..5e2ec32 100644
--- a/trac/trac/htdocs/css/diff.css
+++ b/trac/trac/htdocs/css/diff.css
@@ -2,12 +2,16 @@
 #prefs fieldset { margin: 1em .5em .5em; padding: .5em 1em 0 }

 /* Diff/change overview */
-#overview { line-height: 130%; margin-top: 1em; padding: .5em }
+#overview {
+ line-height: 130%;
+ margin-top: 1em;
+ margin-left: 0;
+ padding: .5em 0.5em 0.5em 0
+}
 #overview dt.property {
  font-weight: bold;
  padding-right: .25em;
  position: absolute; /* relies on #content { position: relative } */
- left: 0;
  text-align: right;
  width: 7.75em;
 }

Using absolute positioning for the element doesn't seem like very good
practice, so I think the changes would be positive for Trac.

http://svn.apache.org/viewvc?view=revision&revision=r1551371
http://svn.apache.org/viewvc?view=revision&revision=r1551372

Re: Structural question...

Posted by Ryan Ollos <ry...@wandisco.com>.
On Dec 16, 2013 12:35 PM, "Eric Ladner" <er...@gmail.com> wrote:
>
> On Mon, Dec 16, 2013 at 9:20 AM, Joachim Dreimann <
> joachim.dreimann@wandisco.com> wrote:
>
> > On 16 December 2013 15:14, Eric Ladner <er...@gmail.com> wrote:
> >
>
>
> > CSS should generally go into the bloodhound.css file. We're not using
any
> > Trac styles at this point, everything comes from that one file.
> > jQuery plugins could also be added here and via the theme templates:
> >
> >
https://issues.apache.org/bloodhound/browser/trunk/bloodhound_theme/bhtheme/templates
> >
> >
> The changeset page includes "diff.css" and "code.css" in addition to
> "bloodhound.css".  And rightfully so, probably.  That's a lot of extra CSS
> to carry around just for styling this very specific content.
>
> The incorrect CSS is in the diff.css file.  Keep the changes there or move
> them to bloodhound.css?

Either way is fine,  just so we can get an idea of the changes you have in
mind. We can iterate from there.

Re: Structural question...

Posted by Eric Ladner <er...@gmail.com>.
On Mon, Dec 16, 2013 at 9:20 AM, Joachim Dreimann <
joachim.dreimann@wandisco.com> wrote:

> On 16 December 2013 15:14, Eric Ladner <er...@gmail.com> wrote:
>


> CSS should generally go into the bloodhound.css file. We're not using any
> Trac styles at this point, everything comes from that one file.
> jQuery plugins could also be added here and via the theme templates:
>
> https://issues.apache.org/bloodhound/browser/trunk/bloodhound_theme/bhtheme/templates
>
>
The changeset page includes "diff.css" and "code.css" in addition to
"bloodhound.css".  And rightfully so, probably.  That's a lot of extra CSS
to carry around just for styling this very specific content.

The incorrect CSS is in the diff.css file.  Keep the changes there or move
them to bloodhound.css?


> Looking forward to those contributions,
> Joe
>



-- 
Eric Ladner

Re: Structural question...

Posted by Joachim Dreimann <jo...@wandisco.com>.
On 16 December 2013 15:14, Eric Ladner <er...@gmail.com> wrote:

> I know the goal is to not change the upstream trac source, but simple
> things like minor CSS changes, where should those be implemented to not
> affect trac?
>
> Example:  in 0.7, when viewing a source file via changeset, the Timestamp,
> Author and Message labels are absolute positioned to the left side of the
> window (very noticeable with a wide monitor).  Setting it to "float: left"
> gracefully fixes the problem, but the only way I can seem to get it to take
> effect is by changing diff.css under the trac tree.
>
> Another lower level example..  When viewing change sets, sometimes the
> source path name is extremely long and goes off the screen to the right
> (the header "Changeset # in {product} for {SVN path}".  So I figured I'd
> hack in the jQuery TextFill plugin to reduce only the source name to a
> maximum of 1170 pixels (width of current template content area).  This
> requires modifying trac/trac/versioncontrol/templates/changeset.html,
> though, which is bad.  Plus it hard codes some constants into the source
> like the font height in pixels, the width of the page, etc.
>
> Is there a better way for modifying templates, html, css, etc than going
> back to the trac source?
> --
> Eric Ladner
>

We've got the Bloodhound Theme for changes like that:
https://issues.apache.org/bloodhound/browser/trunk/bloodhound_theme/bhtheme/htdocs

CSS should generally go into the bloodhound.css file. We're not using any
Trac styles at this point, everything comes from that one file.
jQuery plugins could also be added here and via the theme templates:
https://issues.apache.org/bloodhound/browser/trunk/bloodhound_theme/bhtheme/templates

Looking forward to those contributions,
Joe

Re: Structural question...

Posted by Olemis Lang <ol...@gmail.com>.
On Mon, Dec 16, 2013 at 12:35 PM, Ryan Ollos <ry...@wandisco.com>wrote:

> On Dec 16, 2013 12:27 PM, "Eric Ladner" <er...@gmail.com> wrote:
>
>
>
[...]

>
> > Or is there a mechanism to register a new template?
>
> The template map is in theme.py. I'll commit a changeset in a moment to
> demonstrate.
>

JFTR , there is a set of templates which are hard to override ,
particularly

  1. Generic templates meant to be included by other templates e.g.
diff.html attachment.html et.al
  2. Templates meant to be embedded into other generic templates e.g. admin
, prefs panels

[...]


> --
Regards

Olemis - @olemislc

Re: Structural question...

Posted by Ryan Ollos <ry...@wandisco.com>.
On Dec 16, 2013 12:27 PM, "Eric Ladner" <er...@gmail.com> wrote:
>
> Ok.. so there's NOT a changeset template at the moment..    I assume the
> template for a BH template is the original trac template (and it uses the
> BH one if it exists, or defaults to the trac on if not)?

Yeah,  the starting point for a bhtheme template is the Trac template. You
can then add the bootstrap markup to get nice styling. The bhtheme template
will only be used in place of the Trac template if we explicitly add it to
the template map.

> Or is there a mechanism to register a new template?

The template map is in theme.py. I'll commit a changeset in a moment to
demonstrate.

> Sorry for the noob questions..  I'm trying to get used to how things work.
>
> I'll push the CSS changes up to bloodhound.css

I'll take a look at your patch when it's ready, but i think we'll find that
CSS changes aren't necessary once we have a bootstrap-based bloodhound
template.

>
> On Mon, Dec 16, 2013 at 9:29 AM, Ryan Ollos <ry...@wandisco.com>
wrote:
>
> > On Dec 16, 2013 10:15 AM, "Eric Ladner" <er...@gmail.com> wrote:
> > >
> > > I know the goal is to not change the upstream trac source, but simple
> > > things like minor CSS changes, where should those be implemented to
not
> > > affect trac?
> > >
> > > Example:  in 0.7, when viewing a source file via changeset, the
> > Timestamp,
> > > Author and Message labels are absolute positioned to the left side of
the
> > > window (very noticeable with a wide monitor).  Setting it to "float:
> > left"
> > > gracefully fixes the problem, but the only way I can seem to get it to
> > take
> > > effect is by changing diff.css under the trac tree.
> > >
> > > Another lower level example..  When viewing change sets, sometimes the
> > > source path name is extremely long and goes off the screen to the
right
> > > (the header "Changeset # in {product} for {SVN path}".  So I figured
I'd
> > > hack in the jQuery TextFill plugin to reduce only the source name to a
> > > maximum of 1170 pixels (width of current template content area).  This
> > > requires modifying trac/trac/versioncontrol/templates/changeset.html,
> > > though, which is bad.  Plus it hard codes some constants into the
source
> > > like the font height in pixels, the width of the page, etc.
> > >
> > > Is there a better way for modifying templates, html, css, etc than
going
> > > back to the trac source?
> > > --
> > > Eric Ladner
> >
> > Yeah, fixes for the issues you mention should be applied to the
bloodhound
> > theme templates, which replace the Trac templates.  In the case of the
> > changeset view, a bloodhound template needs to be created, which is why
> > it's unsightly at the moment.
> >
> > The bloodhound theme templates can be found in
> > bloodhound_theme/bhtheme/templates.
> >
>
>
>
> --
> Eric Ladner

Re: Structural question...

Posted by Eric Ladner <er...@gmail.com>.
Ok.. so there's NOT a changeset template at the moment..    I assume the
template for a BH template is the original trac template (and it uses the
BH one if it exists, or defaults to the trac on if not)?

Or is there a mechanism to register a new template?

Sorry for the noob questions..  I'm trying to get used to how things work.

I'll push the CSS changes up to bloodhound.css


On Mon, Dec 16, 2013 at 9:29 AM, Ryan Ollos <ry...@wandisco.com> wrote:

> On Dec 16, 2013 10:15 AM, "Eric Ladner" <er...@gmail.com> wrote:
> >
> > I know the goal is to not change the upstream trac source, but simple
> > things like minor CSS changes, where should those be implemented to not
> > affect trac?
> >
> > Example:  in 0.7, when viewing a source file via changeset, the
> Timestamp,
> > Author and Message labels are absolute positioned to the left side of the
> > window (very noticeable with a wide monitor).  Setting it to "float:
> left"
> > gracefully fixes the problem, but the only way I can seem to get it to
> take
> > effect is by changing diff.css under the trac tree.
> >
> > Another lower level example..  When viewing change sets, sometimes the
> > source path name is extremely long and goes off the screen to the right
> > (the header "Changeset # in {product} for {SVN path}".  So I figured I'd
> > hack in the jQuery TextFill plugin to reduce only the source name to a
> > maximum of 1170 pixels (width of current template content area).  This
> > requires modifying trac/trac/versioncontrol/templates/changeset.html,
> > though, which is bad.  Plus it hard codes some constants into the source
> > like the font height in pixels, the width of the page, etc.
> >
> > Is there a better way for modifying templates, html, css, etc than going
> > back to the trac source?
> > --
> > Eric Ladner
>
> Yeah, fixes for the issues you mention should be applied to the bloodhound
> theme templates, which replace the Trac templates.  In the case of the
> changeset view, a bloodhound template needs to be created, which is why
> it's unsightly at the moment.
>
> The bloodhound theme templates can be found in
> bloodhound_theme/bhtheme/templates.
>



-- 
Eric Ladner

Re: Structural question...

Posted by Ryan Ollos <ry...@wandisco.com>.
On Dec 16, 2013 10:15 AM, "Eric Ladner" <er...@gmail.com> wrote:
>
> I know the goal is to not change the upstream trac source, but simple
> things like minor CSS changes, where should those be implemented to not
> affect trac?
>
> Example:  in 0.7, when viewing a source file via changeset, the Timestamp,
> Author and Message labels are absolute positioned to the left side of the
> window (very noticeable with a wide monitor).  Setting it to "float: left"
> gracefully fixes the problem, but the only way I can seem to get it to
take
> effect is by changing diff.css under the trac tree.
>
> Another lower level example..  When viewing change sets, sometimes the
> source path name is extremely long and goes off the screen to the right
> (the header "Changeset # in {product} for {SVN path}".  So I figured I'd
> hack in the jQuery TextFill plugin to reduce only the source name to a
> maximum of 1170 pixels (width of current template content area).  This
> requires modifying trac/trac/versioncontrol/templates/changeset.html,
> though, which is bad.  Plus it hard codes some constants into the source
> like the font height in pixels, the width of the page, etc.
>
> Is there a better way for modifying templates, html, css, etc than going
> back to the trac source?
> --
> Eric Ladner

Yeah, fixes for the issues you mention should be applied to the bloodhound
theme templates, which replace the Trac templates.  In the case of the
changeset view, a bloodhound template needs to be created, which is why
it's unsightly at the moment.

The bloodhound theme templates can be found in
bloodhound_theme/bhtheme/templates.