Bruji

I've been working on a new template the last couple days, and I was hoping to get people's feedback on it.

I basically had three objectives:

1) Every item on one page that's quick to load, and
2) Make it sortable (if you click on any column head)
3) Make it easy to see additional information without having to leave the page (a lightbox)

Basically, I'm aiming for a slightly more upscale dfProHTML.

Here is what I have thrown together so far: http://www.twoevils.org/html/mygames/

Still in progress:
1) Getting all the details into the lightbox popup
2) Auto-hiding missing details on the lightbox popup
3) Having some sort of indication that the columns are sortable
4) Making it prettier

Any feedback along any lines (like feature requests) would be appreciated. Hopefully I'll keep making progress over the next couple weeks. Thanks!

I love the sorting - it's so fast! We'd love to include the template in Gamepedia (and the other Pedias) when it's ready.

Woah, awesome. I will definitely let you know when it gets to that stage.

Okay, so I've finished #1, #3, and about half of #4 (the listing page). Still have to do a lot of work on the details popups. And, of course, /lots/ of code cleanup.

As always, feedback is appreciated.

Okay, just made a whole bunch of changes:

* Zebra stripes on listing page
* Secondary sorting always includes title second
* Sorting the title column now ignores "The " at the beginning, just like Gamepedia. If there are other words it ignores, lemme know.
* Added credits at the bottom
* Lightbox popup now auto-resizes - this is somewhat suboptimal, due to not knowing the coverImageURL size ahead of time (I made a feature request for this)
* Details on the lightbox now auto-hide if empty
* Much rearranging on lightbox page to fit as much information in a small space as possible

Slick. I'm a sucker for compact, info-dense listings like that.

Okay, it took a great deal of today to get the code in, but I saw that it was a much requested feature, so...

* The template is now on-the-fly searchable!

When you type in, as soon as you hit three characters long, it will automatically prune the table of anything that doesn't match. It searches on any column, so you can search by "castlevania" to only show Castlevania games, search by "playstation" to only see Playstation games, search by "sega" to show games made by Sega... you get the idea. Not only will it filter the non-matches out, but it will also re-zebra stripe the table (this was a pain) as well as update the count on the bottom of the page. Woo!

Amazing work. You've done what I most desire to add to dfProHTML: sorting and searching. But I, too, love density, and look forward to even more info packed in there.

Excellent, glad you like it! I'll probably end up giving things roughly the same information density as dfProHTML, and more-or-less the same columns. Everybody seems to enjoy dfProHTML, and so I figure that it's a good place to start when it comes to information density.

I'll probably be taking out the # column (it's not terribly needed in this layout), so that means even more delicious information for your enjoyment.

It really looks fantastic!
For feedback I found one thing that can be improved with the search function.
If I start typing something in the search box, and spells it wrong, for example "Playstatiom", I get the "Sorry, no results found" message.
If I then hit backspace to erase the letter that is wrong, the error message remain on the screen. I have to delete every letter except the first two, and then start typing the word again to get it to update the search.

Good catch! I will try to fix that in the next day or so. Thanks!

Wow, that is beyond awesome; basically exactly what I was wanting from a template. The only question I have is how easy is it to modify the columns? For different lists I want different info shown.

When it's all done, it should be very easy to modify the columns.

Okay, newly updated again. http://www.twoevils.org/html/mygames/

Have now:
* Added additional columns (developer, my rating)
* Forces lines to stay 1em high <-- this is really difficult with tables
* On a related note to that, you can force columns to be class "lbr" (let's be reasonable), setting their max width to 20em
* Fixes the bug that Jonas reported

Still have some IE piggily-wigglies to figure out (why is it always IE?) - hopefully I won't tear my hair out before I figure out what's wrong.

* Fixed a bunch of IE issues. There's still a few left (like when you search, then sort) that are edge-casey enough that I'll probably not fix
* Added some extra fields to the details page
* Added links for Additional Images, Find on Google, and Buy on Amazon to the details pages

Aside from some code-cleaning and you folks reporting some bugs, I think that's probably what I'd leave it at. I'll try to throw up a downloadable Template when I get a chance.