Design proposal

[jannschu]

First draft of a new header:

RFC. Direct link to image.

[astro]

Very pretty.

Are these free fonts? Can we have a font loader that only sets them once they're retrieved?

[astro]

A few thoughts for your consideration:

• The logo seems to overlap at the bottom
• Perhaps a tad more border-radius on the navigation bar
• How do we navigate to the other Top pages?
• A search bar on dark background should be dark as well... (see my notes on #5)

[jannschu]

Update:

I’m not quite content with this state. Might change navigation color back to original, sub-menu is ugly. Grey line at the top is my browser :-)

The /top sub-menu problem for touch devices might be solved by adding a option-menu to the /top page repeating the functionality.

The used font for the header is free, rest are common fonts (Baskerville, Helvetica) with alternatives for Linux. Menu entries are guessed (fillers).

Plan to use http://fortawesome.github.com/Font-Awesome/ for icons instead of Unicode and maybe kick off the font loader and use a picture instead.

Also a browser compatibility check is on my list, because a lot critical CSS features are used at the moment.

RFC especially regarding top menu solution.

[astro]

Oh wow. Top bar looks delicious.

Top-Folgen in the navigation bar still looks like the current behaviour. Any ideas?

[jannschu]

Next preview. I’m going to change the font sizes/spacing in the middle. Notice the new sub-menu style (Kurzanleitung), still :hover based.

[jannschu]

Update.

The "Bitlove erstellt…" line should be more eye-catching. Next I’ll try some decoration for that.

RFC, so far.

[astro]

I like it a lot.

[jannschu]

TODO:

• make top menu working (hide search)
• user login/menu style
• restyle help page(s)
• i18n for new added texts
• replace dummy links
• cross-browser compatibility
• option-menu on /top page

(lower priority)

• replace dummy text (front, help)
• make podcast logos on front unique + proper linking
• fix pagination: currently links forever to next page, even if no episodes are left
• CSS cleanup (a lot messy classes around)

I don’t know whether I will have the time to do all of these within the next days. Probably not, but it is not that urgent, is it? :-)

Edit: I also try to make the podcast listing a bit more fancy + local date format

[astro]

Not sure if it's good that the new download buttons are less call-to-action, but the rest is awesome. I'm on holiday all september, so no hurries.

BTW: Both PritTorrent and Bitlove-UI have been developed in the open even before they were deployed. Es würde mir das Herz erfreuen andere dasselbige tun zu sehen. After all, we're doing Open Source here, and your participation is the best example for it.

[astro]

@jannschu: I'm going to be back from holiday next week and would love to start integrating this! I can do any template modifications myself if you don't have the time.

[jannschu]

I’ll push my code this sunday with a few little changes/history-cleanups. Hope I can do one or two things previously :).

[jannschu]

Here it is, shouldn’t I get to this tomorrow (9aaa650c41eed58ae8a5dd56bcc5aed6cf2a6c33).

See TODO above. Definitely not production ready :-)

Things to reconsider:

• font loading (see /static/fonts). Font loader, maybe Google?
• fixed size layout
• general layout/css style. Maybe rewrite with Twitter Bootstrap?

Fonts used in the header are Qwigley (free) and Baskerville (non-free, needs to be replaced, TODO). Helvetica in the body is also not that well supported under Linux ;-), especially the numerous font-widths currently used. Maybe also use a font-loader alternative or something like Arial (Narrow/Black).

[astro]

I merged this to master. Taking care of fonts and implementing search will take some additional time.

Fix-size layout seems to be sufficiently solved by replacing some width by max-width: 6b6a8c5f1caad8ec127a33580ff5c92190ab81ef

I'm also not convinced about replacing the delicious green download buttons for now. They may not match the current theme, but the new buttons were way boring.

Btw, what's your Twitter handle/Flattr id? I want to give credit.

[astro]

I've spent quite some time integrating this. Take a last check before we take it live. :-)

[jannschu]

I could only skip through the code here on this machine. Looks good.

Returning to the green buttons should make the code at https://github.com/astro/bitlove-ui/blob/master/static/js/filter.js#L207 unnecessary.

When I have access to my work station I'll take a closer look. My suggestion is to take it live and if I find things and time to improve it, I'll push a few commits.

I'm not active on twitter and have no flattr id (yet). Commit history is credit enough ;-).

[astro]

Thanks!