Complete Site Facelift

“Facelift” may be a bit of an understatement.  I finally got fed up with how ugly and amateurish the site looked, and decided that it was time to bite the bullet and go to a fixed-width layout.  I think you’ll agree the site looks better by leaps and bounds.  However, the reason I didn’t have a fixed-width layout in the first place is because the site features lots of very wide tables that won’t fit in the usual 1000px.  Thus, although the new design comes with a number of new features, right now I want to focus on the revised tables.

Instead of having controls at the top and bottom and lots of buttons, all tables now have a title bar (a la a standard window in your OS of choice), a “page bar” on the right, and possibly some other options like search and page size below the title bar.  These options are unchanged, so if you’ve used the site, you know how they work.  The title bar and page bar are a bit different.

Title Bar

Aside from the title, each title bar may have a number of controls on either side.  To the left is a checkbox.  Clicking this will toggle checklists for the current table.  The popup that explained that you need a login to make full use of this feature has been removed, but once I come up with something a bit less intrusive I’ll put something in.

On the right side, there are four possible buttons.  The minimize button will hide everything but the title bar, while the restore button brings it back.  Currently there isn’t a lot of purpose to doing this, but the plan is for the site to save your preferences as far as which tables to keep minimized, and allow you to re-order tables on view pages (with minimized tables going to the bottom).  The box with an arrow is a maximize/new window button.  This will open the table in its own window, without the fixed-width layout and therefore without any horizontal scrolling.  Basically this lets you view a given table as if it were on the old version of the site.  Finally, the box with a bunch of lines is the “reset” button, which will clear any search text, reset the page size to 20, and bring you back to page 1 of the table with the default sort.

Page Bar

In an effort to condense the standard paging controls into something unobtrusive, as well as something that works well on mobile devices, I came up with the page bar.  It’s basically a segmented scroll bar, with each segment representing a single page of data.  You can use the arrow buttons at the top and bottom to move one page at a time, or click directly on the page you want.  Best of all, scrolling the mouse wheel while hovering over a table will change the page as well.  It’s not quite a vertical scrollbar, and despite appearances, it’s not trying to be.  Though I may implement a vertical scrollbar option later for those who want it.

Table Contents

Finally, if a table doesn’t fit into its allowed space, you’ll notice that one or more columns may be “frozen” in place.  This allows you to horizontally scroll and see other data while keeping the name of whatever it is you’re looking at visible.  This feature doesn’t work on mobile pages where space is at a premium, however.  As mentioned earlier, if you need more horizontal space, you can “maximize” the table and use it that way.

Aside from the table changes, the overall navigation has changed, the mobile theme is operational, and the notes are now displayed in a sidebar that scrolls along with the window for your convenience, among other minor tweaks.  I hope you like the revised Gamer Corner Guides!

Leave a Reply