HTML Draft of the new WordPress page listJune 16, 2007
I managed to put together a HTML/CSS draft of what the new page list should look like. It can be viewed in this link. Please note it’s only static HTML, and the “Save Page Order” still doesn’t do anything.
The list, that looks like it was done with a HTML table, was implemented using only DIVs and ULs. This effect was quite hard to achieve, because CSS positioning was actually not designed to do that kind of stuff. A lot of tweaking had to be done. Some extra tweaking also had to be done to make it work in both Firefox and IE7 (didn’t test in other browsers).
As discussed in my previous post, using HTML tables (like the page list is currently implemented in WordPress) would make it very hard to implement the AJAX sorting behavior. Nesting of table rows is not supported by HTML (ok, I could nest whole tables, but the resulting HTML would probably look nasty, and I am still not quite sure it would be usable with jQuery’s Sortable class – I will probably try it latter on).
If you use Firefox and try to change the text size (View>Text Size), you will notice the list will resize gracefully and nothing will fall out of place. This is thanks to the fact I used “em” as the measure unit in the CSS positioning code.
I believe the end result resembles the original Page list quite satisfactory. This approach allows us to add/remove as many fixed width columns as required, making it usable also for other parts of WordPress that require sorting. The HTML code is quite clean (although the CSS is pretty complex and not so easy to maintain).