Posted by jix_ on June 27, 2009 at 11:20am
| Project: | Drupal core |
| Version: | 7.x-dev |
| Component: | menu system |
| Category: | task |
| Priority: | minor |
| Assigned: | jix_ |
| Status: | active |
| Issue tags: | d7uxsprint, Needs design review |
Issue Summary
Bojhan wrote:
A patch introduced whitespace on admin/build/menu between the description, help text and listing. This should be removed mostly.
Attached is a screenshot of the problem and a mockup for my proposed solution.
| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| before.png | 31.83 KB | Ignored: Check issue status. | None | None |
| after.png | 25.18 KB | Ignored: Check issue status. | None | None |
Comments
#1
Talked to kika about it. Displaying it inline would be a bit dirty as well, it would cause the help link to be at different spots, depending on the length of the text.
Proposed solution: float it on the right top. That way it’ll be at exactly the same spot, no matter what.
#2
Created patches for this. There’s a
margin: 0.5em 0;on.block .contentthough, which means there’s still a bit too much whitespace below the help text. Would it conflict with other design decisions to remove that margin?#3
Never mind the patches above, they’re not working ;)
Here’s an updated version (with a little help from clemens)
#4
#5
The last submitted patch failed testing.
#6
Thy shall not believe the bot.
#7
Works for me, both FF 3.0 and Safari 3.0.
More browser tests needed!
#8
Works fine in Internet Explorer 6 (of course the PNG alpha transparency fails ;)), 7 and 8 and also in Opera 9.64. Screenshot attached.
#9
Tagging for (at least) an IE test.
I have to say as a user, that looks extremely jarring to me breaking up the gradient like that. So also tagging as "Needs design review"
#10
Tested on IE. Removing the tag due to cross-posting.
#11
Does it still look good with longer help texts?
#12
Would my opinon matter, I'd say it looks better "before" ;) Even on the admin/menu/build page...that whitespace never really annoyed me. I should have precised that my focus was to see if the Before/After situation were reproduced on various IE versions (after being asked to test this on IRC).
#13
I agree that it looked better before -- especially with large help texts.
#14
Yhea, I reviewd this with him on site. It should be not fixed right, but floated right and pushed below if its more then 1 line.
#15
One problem with this solution is that it creates a relatively large white space right of the help text on normal screen size of 1024+. It must be this size because it has a relative width (25%). An other effect can be seen with multi line help text (attached). The help link floats to the top right of the help text area. I am not sure if this is a desired effect.
#16
This is an alternative patch with less white space (absolute size) and the help text alligned with the last line of help text.
One screenshot attached, tested in FF3, Safari 4, IE6, 7 and 8.
#17
Can't it be below?
#18
Someone should test this in Stark, to see whether this actually needs to be in system.css or in Garland's style.css
#19
I don't like those divs added in there. Their place is inside a theme function.
The fixed width is not a solution. It may brake the layout if the font size is increased.
#20
It still looks better in CVS HEAD. Either way, this feels a lot like 'lipstick on a pig'. It might make sense to postpone this until the new admin theme is in core?
#21
@Dries Well, yes and no. It kind of looks ugly, eveywhere outside of D7UX.
#22
You can't get I clean solution if you want this to "float" on right unless you use tables. And to tell the true. I don't like the idea. For long text you will have a lot of white space below the help link.
IMO there are 2 options:
1. What Dries said. Leave it for now, until the admin theme is in core.
2. You make it float right but let the text wrap around it (give it enough padding so it's not lost in the text).
#23
What about setting the
div.helpasposition:relative, and position thediv.more-help-linkinside it withposition: absolute; top: 0; right:0;... or maybe center it vertically with the same buttop: 50%;?And yeah the margin should not be fixed... percent might not be a good solution, but we could use another relative unit to set the right margin...
Another thing to consider is that this margin should not be set when there is no
div.more-help-linkso we should most likely add a class.with-more-helpto thediv.helpand set these new styles accordingly.#24
#3 patch broke help links in FF3.0
+1 on "Leave it for now, until the admin theme is in core."
#25
Ok, going to postpone it for now - we should get back to it once we got admin theme in.
#26
What's up with this now?