Add css classes to style top level terms on the main page
| Project: | Directory |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | beginner |
| Status: | active |
First let me say you've done fabulous work with this module. It is almost perfect.
I have a couple of wishes for the list output on the directory page:
1. keep child categories in the same column with their parent.
2. replace "--" added to child categories by Drupal with an admin defined bullet.
3. give parent category a different class, so I can bold the parent and leave the children normal font weight. Right now it looks like I can only visually differentiate the categories based on whether the have child nodes, and I'd like to differentiate font based on whether they have child categories (only the top level is important to me, however.)
My application is a local directory site and I like giving strong visual clues so people can find things fast, plus I'm picky about the overall look (I blame my art degree) but these features might have a wider appeal. Again, thanks for taking this module on and doing such great work with it.
#1
1 and 2 are fixed by http://drupal.org/node/144958.
3 will be done when I add some javascript to collapse the topmost levels on the main page.
#2
Would somebody care to review this patch, before I consider committing it?
It adds js to make vocabs on the main page collapsible, with a setting to say which vocabulary should be collapsed by default.
To do: add better classes to each level of the list of terms, to allow theming (of the topmost level of terms, for example, as was requested above).
#3
here is the .js file that goes with it.
#4
The patch looks ok from here, but I've not tested it (nor can I do so any time soon.)
One question: is the 'xdiv' in the following snippet a typo? Should it be a 'div' ?
+/* Controls the javascript collapsible vocabs on the main page */+xdiv.directory-home-vocabulary-collapsed {
+ margin-bottom: 2em;
+}
#5
Thanks for having a look.
Good catch. The x in 'xdiv' was for debugging. I have cleaned the css a bit.
Also, I have moved the drupal_add_js() calls to the only place where they'll be needed, so the extra code doesn't get added for every page.
#6
Any js and jQuery experts following this issue?
I discovered a major bug with the patch: if we have nested terms, and a vocab is set as collapsed by default, the nested lists will disappear altogether...
Also, what I first tried to do is have the link display "hide" and "show" alternatively, but couldn't achieve this. Instead, I am using the jQuery function toggle(), but that function's behavior is very simple and does not allow for changing text.
Can anybody with more experience with jQuery help?
Back to the drawing board...
#7
I found the problem. It was a small bug in directory.js.
Updated file attached.
#8
I committed the patch above with new .js file.
I set as active, because there is one detail left to check from the original request: make sure to add proper classes to each level, so that the topmost level of term, can be themed differently from the second level, etc...
It's just a matter of adding classes where necessary.
#9