Site redesign

[Ortham]

The site looks a bit crummy, it still has the "throw something together quickly" layout I started with. Since LOOT v0.7's UI is going to be based on Material Design, it would be nicely consistent if the site were redesigned with the same style.

I've started this work in the material-redesign branch. Still to do are:

• [x] Swap the <select> in the plugin search page with a <paper-dropdown-menu>. Consider using the <loot-dropdown-menu> that v0.7's UI uses, as it gives a select-like interface for it, and simplifies the boilerplate. If used, it should be packaged up as a reusable component like the Polymer elements, but that's a bit of work for just one select box...
• [x] Swap the contributor icons out for something like a Material Design icon list.
• [x] Get a bower config set up to manage the Polymer dependencies. These will need to be committed to the repo for GitHub to include them in its Jekyll build of the site, which is a bit messy.

The site redesign doesn't need to be coordinated with the v0.7 release, it can go live as soon as it's done.

[Ortham]

Bah humbug there are styling issues in Firefox and IE. I've gotten most of the Firefox ones fixed, but still to fix are:

• [x] Firefox/IE: Links in paper-items and paper-buttons don't take up the whole space.
• [x] Firefox/IE: The dropdown game menu paddings are messed up on the masterlist search page.
• [x] IE: The SVG LOOT icon doesn't scale. Replace it with a PNG.
• [x] IE: The Download LOOT button is squashed horizontally.
• [x] IE: The contributor cards are squashed horizontally.

[Ortham]

OK, now for Material Design double-checking. The core elements aren't specifically Material Design, but they do overlap, so they should be checked too.

• [ ] <core-drawer-panel> (MD): The only thing I can see is that the drawer should have different max widths depending on screen size.
• [x] <core-toolbar>
• [ ] <core-menu>
• [x] <paper-button> (MD)
• [x] <paper-icon-button>
• [x] <paper-item>
• [x] <paper-spinner>
• [ ] <paper-input-decorator>
• [ ] <paper-shadow>
• [ ] <paper-dropdown-menu>
• [ ] <paper-dropdown>

Also a few other things, like:

• [x] Dividers (MD)
• [x] Lists (MD): some of this is relevant to <paper-item> above.
• [x] Menu subheaders (MD)
• [x] Nav bar and sidebars (MD): some of this may be useful for <core-toolbar> and <core-drawer-panel> above.

The MD spec uses units of density independent pixels (dp) for layouts and scaleable pixels (sp) for font sizes. I'm using the following mapping:

• 1 dp = 1 CSS px. CSS pixels are not screen pixels, so may (?) be device independent already.
• 14 sp = 1rem. Text sizing is relative, and only the relative scales matter, not the units. MD uses 14 sp for the body size text, so assume that the root text size is the body text size, and scale from there.

[Ortham]

A lot of polish was applied in 52f5b3ee98e79ffd6e453de2787d2f8aab22ae48, which ticked most of the boxes above.

[Ortham]

I tried to switch to a true MD grid layout for the contributor cards in 85550a52f777f006001bd14baf089dc6a57851fb, but on my phone the cards' touch area was offset from the content, and it caused the grid to look and behave weird, so I've reverted the changes.

To switch between the true grid and the inline list, the width CSS needs to be removed from the #contrib > paper-item selector in credits.html, and credits.js updated to add a grid class and vertical attribute to the paper-item, removing the horizontal and center attributes. Then just copy across the block of grid CSS added in the above commit.

[Ortham]

I've done as much as I want to with the input and dropdown elements in 1fff0ba607b4dbc6ad7ee9c555168887c8bbd9fa. The spacings in the MD spec just doesn't match the pictures they give, and looks ridiculous.

[Ortham]

Bah humbug, I tested 9e5908d0f4db7674aef264b364018b81b2e93661 over my local network on my phone, and it all worked fine, so I pushed it, and the online page displays badly again. It looks like there's extra padding within the paper-item for each contributor card.

I've had to revert the changes again, because I can't get the Chrome remote debugging to see my phone...