[v7.5] Metro Homepage

[nickbro]

Hi all,

The homepage of HAP+ will be getting a bit of a face lift in v7.5, and a bit more touch friendly. Taking inspiration from my Windows Phone, I've metroized it. Plus there will be a "I want to..." box on the right of the tabs box. This will be used to provide a quick I want to do box. I'll be shipping with it set up with Access My Files and Protect my PC (Links to Microsoft Safety Scanner - Antivirus | Remove Spyware, Malware, Viruses Free, to instill a bit of common sense among students, some of which might a little nasty app on there system).

Anyhow, here you go

Comments/reactions?

[2097]

does it mean im going to have to edit all the CSS again

[nickbro]

Shouldn't have to, I tried to code HAP+ v7 to be use it's own fonts/styles inside the hapContent div rather than doing generic css. It's only on the basestyles.css for now, all of HAP+ will be getting a slightly refreshed look

[mattgrimley]

That looks really good Nick. I love the box on the right.

[wdwm]

Looking nice and functional, great work!

[Edu-IT]

Can you centre the text on the buttons?

[nickbro]

It's part of the metro guidelines that it isn't. Wont stop you from editing the CSS though

[Edu-IT]

It's part of the metro guidelines that it isn't. Wont stop you from editing the CSS though

Metro guidelines?! What?!

[nickbro]

Essential Graphics, Visual Indicators, and Notifications for Windows Phone

[Edu-IT]

Oh I see. :-D

[jamesfed]

We have been 'Metroing' all of our internal sites here recently and this looks good - one thing that I would say though is usaly with the large square tiles the images are commonly pure white (against a coloured background) but then again maybe if we had multiple icon packs it would appeal to all?

[nickbro]

There will be full colour and white icon sets in the images folder ~/images/icons or ~/images/icons/white

[Edu-IT]

So this is the new Web 2.0 then? Everything will be metro'd.

Oh I look forward to it.

[nickbro]

A bit more info

This looks like this now

.tile-color { background: #0060a6 border-color: #0060a6 }
.tile-border-color { border-color: #0060a6 }
.tile-color-font, #hometabs .ui-tabs-nav li.ui-state-active a, #hometabs .ui-tabs-nav li.ui-state-active a:hover { color: #0060a6 }
.tiles a { background-color: #0060a6 color: #fff }
.tiles a:hover { background-color: #3286C1 }
.tiles a:active { background-color: #004577 }

These will be for the metro tiles/base colour. Found in ~/styles/basestyles.css

A new option in the Homepage Link Groups will be SubTitle