Hmm... Yeah, I hadn't designed for widescreens. See, I'd used a custom-made replica of SEN's layout (100% my code, and images I made/edited) to put my DLDB draft in, and in my replica (which was more focused on new code than on an accurate recreation of SEN), I'd simply CSS'd the page so that it would have a flexible width with a minimum of 800px and maximum of 1024px. In widescreen browsers, it'd simply be centered, with padding. (IIRC Carbonite does this.)
But then, the same issue exists on many sites, as widescreen is not yet standard. While it'd be nice to fix it, it's not exactly necessary.
As for the large height of the infobox compared to the description... I did this deliberately, to encourage longer, more detailed descriptions.
@Dev:I could set up the More Images box functionality without doing any work at all, as I've already done it.
All I'd need you to do in that regard is upload a file, some JS, and some CSS. But
if you want to do it on your own, here's how. (Along with some other JS-related improvements that can be made.) (I'll try to keep each one short, as I know you don't have all day to screw around with code
)
For the images box, don't use the same JS that's used with the other collapsible boxes on the site.
The JS used for other collapse boxes requires that there be an HTML duplicate of each collapsed box (with the duplicate just being the title bar). This is entirely unnecessary and completely inefficient. (One can simply hide the contents of the box, leaving only the header, using elementary CSS.)
Simply upload the image file shown just below this paragraph, edit the CSS to refer to it (replace all instances of "images/collapse.png"), and follow the fairly simple JS method described here. (About this image: a technique called "
CSS sprites"
[1] is used to get the collapse, expand, remove (unused), shrink, and restore icons into one file.)
To rig up the JS, start by creating (from within the JS -- not from PHP! use
createElement and
appendChild!) two elements, a.collapse-button and a.shrink-button. They should be inserted into #file-images>div:first-child (that is, into the DIV that holds the "More Images" label). The As should have textual labels (which will be hidden from sighted users and replaced with icons, but remain legible to screen readers) that are padded with one space on each side (so that screen readers interpret them as, say, "shrink collapse" rather than "S-H-R-I-N-K-C-O-L-L-A-P-S-E"). Set their
onclick attribute to add "collapsed" and "shrunk"
classNames to #file-images (depending, of course, on which one is clicked). The CSS I've provided does the rest.
Change the JS tabs to normal links with additional JS.
This will allow them to be opened in a new window/tab, and prevent them from breaking when JS is disabled. It's also fairly simple. No NOSCRIPT tags required, and only very minor PHP changes (mostly removals, and one or two ifs) needed.
You'd start by having the links' HTML point to the PHP URL for opening a tab. (As I'm sure you recall, there were URLs for the non-JavaScript links in the original design. You'd just write these same URLs using PHP.) You'd strip all JS from the tabs. And you'd have PHP write a "sel" class to the selected tab's LI element. (li#file_basic_link, etc.) Then, remove the STYLE attributes from the actual views (div#file_basic, etc.).
From there, you'd alter the JS (stored in an external file, of course). You'd have it add the event handlers from the outside (by finding the elements in the DOM and setting their
onclick properties to anonymous functions). Instead of having it set the CSS
display properties directly, you'd simply have it set a
className on div#file-info. Ideally, the class would be the name of the tab ("basic", "edit", "comments", "reviews", "history", and "links"). (The
sel class would also be added to the clicked tab's LI.) After setting the
className, the handlers should
return false to prevent the hyperlink from actually being followed.
Finally, you'd add this to the CSS:
#file_description, #file_images, #file_edit, #file_comments, #file_reviews, #file_history, #file_links {display:none}
#file-info.basic #file_basic,
#file-info.basic #file_images{display:block}
#file-info.edit #file_edit{display:block}
#file-info.comments #file_comments{display:block}
#file-info.reviews #file_reviews{display:block}
#file-info.history #file_history{display:block}
#file-info.links #file_links{display:block}
The effect is that the PHP would write out the tabs' default states (allowing people to link to a specific tab). The tabs would initially have no JS (allowing them to be opened in a new browser window/tab, and allowing them to work in browsers that have JS disabled for security reasons, by NoScript, etc.). The JavaScript would
add itself to the tabs. Rather than altering any elements' styles directly, the JS would simply tab into the existing CSS, using the class names to show/hide tabs as needed. A rather elegant trick IMO.
Merge the Rating display and the rate-this-file bit into one widget.
This would be tricky (and would require a few things on the PHP side) but doable (and indeed, I've done it in a newer version of my draft. Not sure if you got the newest version; my apologies if you didn't). Here's a screenshot of what it could look like.
The filled-in stars show the file's average rating. The green backgrounds behind the stars show the viewer's rating (if the viewer has rated the file). The number of votes is shown as text. A SPAN has all of this information in prose form, and
special CSS hides this SPAN from everything but screen readers (giving them a textual form of this information). For people who haven't yet rated the file, each of the star images is also a hyperlink to the server-side rating applying script thing.
And finally, the star images have no SRC attributes; they use
CSS sprites[1]. This allows anyone writing skins for the site to use whatever icons they wish, without any changes needing to be made to the PHP (as the icons are set using CSS). The display even handles files that lack enough votes to gain an average rating. (The image file has question mark sprites for such a case.)
I can provide the HTML and CSS (and I probably should, to make implementation as easy as possible). As for the PHP? Literally the only non-constant strings would be
"<a{$star_href}><img></a>" ;
"<span class='ratings r{intval($rating)} you-r{$viewer_rating}' title='{$rating}'>" ;
"({$votes} votes)" ; and
"<span class='voice-only'> You gave it {$viewer_rating} stars.</span>" . (Where $star_href is a string for a particular star's optional HREF, $rating is the decimal rating or "undetermined", $viewer_rating is the viewer's rating or 0, and $votes is the number of people who have rated the file.) Everything else is a matter of HTML and CSS; I have already coded both, and they should be trivial to implement.
[1] Think about the potential implications of this, if you used this elsewhere... You wouldn't need a whole folder for topic icons, or a whole folder for any set of related images... Granted, you can't resize them through code (as they'd just tile) (but the browser's zoom will work just fine), but they all become fully skinnable, and it's all IN ONE FILE!
None.