PCGamingWiki redesign and new features

[Andytizer 269]

After implementing the lovely new Forums, I took it on myself to improve PCGamingWiki skin to help integrate these aspects together to create a better user experience. Building in the forum's navigation was not an easy thing to do, but after much development it is now ready to be used.A list of new features:

• Full single-sign on (SSO) - use the same account to login to PCGamingWiki and our Forums
• Comment in our News section (like this article!) using the same account.
• Files - upload, sort and rate obscure PC game fixes.
• Gallery - upload screenshots.
• Image comparison slider for Forums and News BBCode (see below).

Some things we are working on:

• IRC autologin (nearly there)
• New editorial system for uploading your own articles and promoting them to the front page.
• New Wiki Home page.

Please report any bugs by commenting on this article.

 

Here's an image comparison shot of Saints Row IV:

The code (you can also use the button in the editor, in between the speech icon and h2):

[compimg]http://community.pcgamingwiki.com/uploads/gallery/album_2/med_gallery_1_2_53704.jpg|http://community.pcgamingwiki.com/uploads/gallery/album_2/gallery_1_2_39639.jpg|800|450|FOV stock|FOV modded[/compimg]

 

Click here to view the article

[Dillonator 5]

I am literally so impressed at how easy it is to make comparison images now. 

[Hungry eyes 6]

Nice work andy. Some brief points about the new wiki layout

 

1) if the wiki/forums/news tabs are along the top they don't need to be duplicated on the sidebar as well.

2) The sidebar needs to be slimmed down - with the new design it is distracting now.

3) I think we should ditch or at least remove pictures from news/replies/review codes etc on the sidebar as well - with the new narrower article section it is distracting when trying to read.

[Suicide machine 53]

Can we (you?) like expend the website horizontally? Or squish some elements? Because I have 1440x900 monitor and some pages look like this:

 

When it should be more like this (I used a scale function there is in Firefox to make it fit):

 

So, can we make it somehow look correct from resolutions 1366x768 (which seems to be pretty common amongs many laptops) and up? Or is someone already working on it?

[Andytizer 269]

Can we (you?) like expend the website horizontally? Or squish some elements? Because I have 1440x900 monitor and some pages look like this ... So, can we make it somehow look correct from resolutions 1366x768 (which seems to be pretty common amongs many laptops) and up? Or is someone already working on it?

 

I have increased the min-width from 1200px to 1280px for desktop views so this should fix that issue for you. I use 1366x768 primarily so this has fixed that issue for me too. The other thing we could probably do is make the tables a bit more 'squishable' so that it doesn't have that odd behaviour - the Video settings template does collapse a bit and we should get the others to do the same.

[Suicide machine 53]

Yeah, now it looks as it should.

[Garrett 214]

Couldn't you use both CSS min-width and max-width to have the central content area fit a certain minimum size when necessary while still expanding to fully fit a reasonable maximum size (1920px or whatever)? The default MediaWiki skin works like that.

[Andytizer 269]

Here's our wrapper div:

 

#wrapper {
margin: 0 auto;
width: 87% !important;
min-width: 1250px;
position: relative; 
}

The max-width is not defined, but basically it will go up to 87% wide. Are you suggested we set a maximum width? The last time I suggested this it didn't go down too well (although this was about a year ago) - people really hated the idea of fixed width website!

[Garrett 214]

Relative widths waste space. See Wikipedia etc. for how the default MediaWiki skin completely fills the screen for all normal widescreen resolutions; as it is the new layout is wasting around 150 pixels on my 1440-wide monitor and it will be even worse on 1080-wide displays since you've used a percentage.

[Nicereddy 109]

 

Just a small problem I have with the design. On the sidebar the "Wiki" and "Toolbox" sections are dropdowns' whereas everything else opens automatically. I also think either the font is differently sized or just different? Not sure, but it looks weird to me. Personally, I'd prefer if those were opened automatically, the dropdown removed, aligned to the left, and then resized to the proper font-size.

 

EDIT:

 

 

I also discovered this. There's a little while line going across the header. Might just be me?

[Hungry eyes 6]

I don't have the white line:

 

[Andytizer 269]

 

I also discovered this. There's a little while line going across the header. Might just be me?

Can you tell me the resolution/browser/OS you are using? I can probably fix this if I can recreate the issue, it's actually similar to what I see on my iPhone.

 

I've adjusted the text below the toolbar to adjust the line-height, but I'm having an issue with overwriting the style, this should do it but it isn't working:

div#mw-panel div.portal div.body ul li { line-height:0.7em; }

I will also consider disabling the Vector extension's collapsable tabs, but I think the shorter line-height should fix the issue for you.

[Hungry eyes 6]

Could we have the blue background on the wiki too? A la http://i.imgur.com/UPRncbH.png

[Nicereddy 109]

I'm using 1366x768/Chromium (fully updated)/Ubuntu 13.04.

 

It only happens when I zoom out to 90% in Chromium, so you may be able to do it no matter what resolution your screen is.

[Andytizer 269]

I'm using 1366x768/Chromium (fully updated)/Ubuntu 13.04.

 

It only happens when I zoom out to 90% in Chromium, so you may be able to do it no matter what resolution your screen is.

I believe I have fixed the issue for up to 75% zoom. However I will need further CSS help to get this to degrade properly at even lower zoom levels.

 

Could we have the blue background on the wiki too? A la http://i.imgur.com/UPRncbH.png

I would really like this too having a proper background and boxshadow that matches the rest of IPB. The solution is to have a different background by changing the body's background colour. However I am running into an issue where the sidebar height and background are not matching up correctly resulting in the following look.

 

I wonder if it's possible to get Masked' Turk to consult on this one quickly?