Modernising this site

[AF]

I've currently got a fork of the site as is, that I'm modernising.

Note that at the moment I am making no aesthetic changes. Things will look and work just as they do now.

Changes so far include:

• Fixing the top banner to use cleaner code
• Using ul/li instead of table cells for the menu
• Using div based layout for the top header and main content wrapper instead of table cells
• Removal of utterly pointless markup
• Addition of IDs for people running greasemonkey scripts
• Improvements to the CSS so that to change the width one need only modify the #wrapper element rather than 50 table different elements.

Once this is done, thoroughly tested and applied, I'll mull over things for mobile such as making the header static, and start a discussion on how to make the site wider without sacrificing readability ( I'm thinking make the thread posts the same width as they are now, but they will expand to fill the full width if their contents demand it, e.g. 900px image will show native resolution with a 960px wide post, but other posts would remain at the current 760px)


Current issues:

I can't get Mediawiki running using the git repo and SQL provided:

Database error

Code: Select all

A database error has occurred
Query: SELECT lc_value FROM `wiki_l10n_cache` WHERE lc_lang = 'en' AND lc_key = 'deps' LIMIT 1 
Function: LCStore_DB::get
Error: 1146 Table 'springdb.wiki_l10n_cache' doesn't exist (localhost)

[liamdawe]

"Error: 1146 Table 'springdb.wiki_l10n_cache' doesn't exist (localhost)"

Basically the table "wiki_l10n_cache" needs to be created mate.

[SpliFF]

Uh, table layouts, how positively 90's

[AF]

Fixed that issue, I expected the mediawiki to run out the box, instead better to install it fresh and then do the SQL stuff.

[hoijui]

i guess you do not need it anymore now, but maybe this would be useful for others:
http://www.turnkeylinux.org/mediawiki
(small VM image with a basic linux and MediaWiki pre-installed)

+1 on your approach of modernizing without visual change first!
way to go, congrats!

[AF]

New changes:

• The majority of the site is now fluid width and sits within a div named #wrapper with a fixed width of 760px. One can change this using userscripts easily with a css 1 liner now
• Extra measures have been added to the top heading so that the banner image fades out on the far left edge if it isn't big enough to fill the header
• The #wrapper container is now always smaller or as big as the width of the page. There should never be a page wider than the browser window
• Below 760px the site transitions from 760px fixed width to completely fluid
• Below 663px the menu overflows on to a second row. Rather than showing buttons floating attached to a header image, they now become a 2 row menu bar that spans the full page width.
• The media on the frontpage now has appropriate css IDs
• The video on the frontpage is hidden when below 760px ( makes no sense for mobiles )
• Various fixes to the markup and organisation of the news content
• Welcome image is now positiong top right to account for the smaller potential sizes
• Spring Project -> Spring Engine
• Added proper padding markup and margin to the welcome text, it now has an ID and p tags instead of warped font tags and a br tag
• iPhone viewport tags added to head

If somebody could take https://github.com/Tarendai/spring-website and pull it into the main spring site repo then deploy? It's currently ready to go works the same way the current site does, but renders/loads faster, and works a lot better for mobiles.

[Tobi]

Nice work, looks good on first sight.

Pushed to http://test.springrts.com/ for any desired further testing; will push to production saturday, if everything looks fine.

[very_bad_soldier]

An error on chrome:

[Tobi]

Current issues:

I can't get Mediawiki running using the git repo and SQL provided:

Database error

Code: Select all

A database error has occurred
Query: SELECT lc_value FROM `wiki_l10n_cache` WHERE lc_lang = 'en' AND lc_key = 'deps' LIMIT 1 
Function: LCStore_DB::get
Error: 1146 Table 'springdb.wiki_l10n_cache' doesn't exist (localhost)

I uploaded a new SQL with the new wiki schema that should solve this.

[AF]

An error on chrome:

I noticed but since it was there before I made a single change IIRC, I'll add it in

[very_bad_soldier]

Nah, this is how it looks currently:

[AF]

I've made improvements:

• The main site table is now wrapped in a div container of id #maincontentwrapper
• Fixes to the tab links as mentioned above
• Fixes to the 3 buttons adjacent for sub 410px window widths
• When below 420px the site logo was too wide inducing scrollbars, now it swaps the image out for a 300px logo rather than the 400px logo currently used
• The top logo now uses CSS backgrounds instead of an img tag
• In some cases the top header menu overflowed onto a third row, padding adjusted to fix

There's a new pull request on github

[Andrej]

Above: Current (springrts.com) Forum Layout
Below: Test (test.springrts.com) Forum Layout


Getting horizontal scrollbars, in a case where the old layout displayed normally.
The browser window when screencapping was about 1200px wide.
By experimenting with resize, the minimal width displaying without scrollbars was 1326px.
Even though the actual posts seem to be the same width, the 'border' area on left side is wider.

[Tobi]

Pushed the new stuff to http://test.springrts.com

[AF]

Above: Current (springrts.com) Forum Layout
Below: Test (test.springrts.com) Forum Layout
http://img717.imageshack.us/img717/355/ ... hconsp.png

Getting horizontal scrollbars, in a case where the old layout displayed normally.
The browser window when screencapping was about 1200px wide.
By experimenting with resize, the minimal width displaying without scrollbars was 1326px.
Even though the actual posts seem to be the same width, the 'border' area on left side is wider.

Neither are correct, the bottom one is no more broken than the top ( which is not how this site should be displaying, the forum should not be breaking out of the main container). Just to be clear, both are broken in that screenshot.

I'm unable to reproduce that behaviour in the latest firefox or chrome stable, my guess was that you are zoomed in but this doesn't reproduce the problem either. I can't produce this issue in either http://test.springrts.com or http://www.springrts.com. I don't get horizontal scrollbars until the browser reaches 310px

If possible could you provide me more information about your OS, the version of firefox used, if it displays correctly in chrome, and a 1:1 actual size image so I can take measurements?

Also is it fixed by ctrl+f5?

[Andrej]

If possible could you provide me more information about your OS, the version of firefox used, if it displays correctly in chrome, and a 1:1 actual size image so I can take measurements?

I went to ask someone with a Windows 7 computer if I could try to open the site. They didn't have Chrome. (Instead Firefox 6, Opera 11, IE 9)
Since I'm using Windows 2000 and it can't be reproduced it must be just obscure incompatibility with this combination of OS and Firefox.

[Tobi]

Deployed.

Ctrl+f5 might be necessary for some to get rid of ugly artifacts from the interaction between cached old stuff and new stuff.

[hoijui]

huge fail here :/
see attachment

i am on ubuntu 11.10, FF 7.0.1, using NoScript

edit: it seems not to be NoScript's fault

[knorke]

got that too on firefox

but clearing cache solved it

[Tobi]

Try ctrl+f5.