The graphic for the "grippie" is both a bit misleading and a bit high. Misleading because the current graphic suggests it's possible to resize the textarea horizontally, which it isn't.
Here's an attempt to make it less obtrusive and more "correct". New grippie.png (/misc/) attached and below is the relevant style for system.css (/modules/system/).
A demo can be seen at http://perifer.se/textbar-drupal5/, there's also a "before and after"-screenshot attached.
System.css at line 283:
.resizable-textarea .grippie {
height: 5px;
font-size: 0;
background: #eee url(../../misc/grippie.png) no-repeat 50% 1px;
border: 1px solid #ddd;
border-top-width: 0;
cursor: s-resize;
}
| Comment | File | Size | Author |
|---|---|---|---|
| #14 | system_center.patch | 676 bytes | ChrisKennedy |
| #11 | system.css_1.patch | 682 bytes | ChrisKennedy |
| #9 | grippesize.png | 742 bytes | profix898 |
| #7 | grippie_2.png | 162 bytes | ChrisKennedy |
| #6 | system.css_0.patch | 684 bytes | ChrisKennedy |
Comments
Comment #1
anders.fajerson commentedNew grippe.png attached.
Comment #2
anders.fajerson commented...and a patch
Comment #3
profix898 commentedReally nice! This is a small, but very appealing improvement :) Thanks.
@fajerstarter: The 'texbar' you use on your demo site looks like an improved version of 'quicktags' module, right? Are your changes documented (or patch and new icons available) anywhere? Or did you write a new module 'textbar' yourself?
Comment #4
Frando commentedComment #5
dvessel commentedLooks nice but it's definitely too thin. The horizontal 'grips' better signifies the direction the text field can be dragged.
Comment #6
ChrisKennedy commentedIt's a simple usability issue to change the grippie from a corner image to a horizontal one. The correct height that is both accessible and stylish is a matter of opinion, but this patch makes the size 10px rather than the original 14px or the modified 5px. A 2px larger grippie image will follow.
Comment #7
ChrisKennedy commentedHere is a 2px larger grippie with one additional bar to better fill the 10px vertical space.
Comment #8
webchickChanging title; this is less a cosmetic issue and more an issue that the textarea doesn't drag in the direction indicated by the current graphic.
Comment #9
profix898 commentedThe later version with '3 line' grippie and 10px looks asymetrical (and a bit too large) and that's not nice IMO. Take the same grippie but use a height of 8px is much better. See screenshot for comparison.
Comment #10
ChrisKennedy commentedGood call - 8px height does look better.
Comment #11
ChrisKennedy commentedOops, I forgot to attach the updated patch.
Comment #12
Steven commentedBoth 8px and 10px are asymmetrical, as we need to center a 5px tall image inside. I changed it to 9px, which leaves 2px on each side of the image.
Committed to HEAD.
Comment #13
(not verified) commentedComment #14
ChrisKennedy commentedThe vertical centering is broken in IE6 and looks quite bad. Attached patch reverts to 2px vertical offset.
Comment #15
dries commentedThanks a bundle. Committed.
Comment #16
(not verified) commented