Forum:Upgrading Infoboxes - Active Development

Forums: Index > Wiki discussion > Upgrading Infoboxes - Active Development

Project aim

The Portable Infobox project aims to replace the current infoboxes with ones that behave and display properly on both mobile and desktop devices.

Project status

Development status: Active

Forum status: Active

Module status:

Module:Games: In development (source)

CSS status:

Infobox.css: Ready for review (source)

Infobox status:

Character infobox: In development (demo) (source)
Weapon infobox: Ready for review (demo - original) (source)
Gamebryo Weapon infobox: status unknown
Faction infobox: Ready for review (demo - original) (source)
Consumable infobox: Ready for review (demo - original) (source)
Quest infobox: Ready for review (demo - original) (source)
Achievement infobox: Ready for review (demo - original) (source)
Ammunition infobox: status unknown
Creature infobox: Ready for review (demo - original) (source)

Change log

Module

CSS

August 9 2015 - Force images 100%: "If not already there"
August 9 2015 - Fix captions: "Make them blend in with the infobox"
August 12 2015 - Fixed image widths and footers: "Perhaps make them blend a bit more"

Infoboxes

Character

August 9 2015 - Removed formatting for IDs: "Already present in parameters"
August 10 2015 - Added several new fields: "Are there any that I am missing?"

Discussion

Hey guys :) Just checking in to see if you needed any help with portable infoboxes.

I know that TwoBearsHigh-Fiving got the skinny on why portable infoboxes are a pretty nifty idea when he attended Wikia's Community Connect earlier this month, so I'm going to assume he probably shared at least some of that info with you already.

I think it's great that you've started this thread to act as a sort of central repository of discussion on the project!

But I notice in this thread that development of the boxes here at Fallout seems to be stalled because of an unnamed development issue with Wikia. Since I wasn't the staff member directly involved with that, I dunno what problem, exactly, is seen as a roadblock. Lemme know if you're still having that problem, and I'll try to clear the road for you.

I'd also be happy to answer any other questions you might have, so please either ask below, or feel to drop by any of my message walls/user talk pages if you wanna chat! Also, Shareif, one of our top engineers, is a huge Fallout fan, and thus is making himself especially available to this community. So don't be surprised if you get a message or two from him, too! Thanks!
czechout ☎ ✍  00:19: Tue 29 Sep 2015

I can't say for sure, but I thought the Wikia issue that's referred to was the one that broke some templates (like the youtube one).

I think we'd be happy with any help we can get. What we'd (we = my perception of the general opinion) like to achieve is basically that we can keep the exact same (or only really really minor changes) for computer users, while improving the infoboxes for the mobile users. The main concern raised so far is that making the infoboxes mobile friendly gave some drawbacks for the computer users (first propositions and examples). A lot of progress had been made for the character infoboxes meanwhile, as can be witnessed here, but that so far only happened for the "characters". If this could also be done for the other infoboxes we have (locations, factions, weapons, ...), I think the community will be happy to support the changes. - ^Greets Peace'n Hugs (talk) (blog) 01:37, September 29, 2015 (UTC)

Ah, it is fine. Usually I'd refrain from upgrading infoboxes if there are no .css experts. Since there are, I don't think we should have any major problems at all. ☢ Energy X ☣ 08:32, September 29, 2015 (UTC)

Looks good so far. The atrocious display of infoboxes on mobile is actually a major reason why I avoided viewing this site from my phone as much as I could. --Skire (talk) 21:55, September 29, 2015 (UTC)

Agreed, it's really a chore to navigate the them in mobile. I support the initiative.
Limmiegirl

^{Talk! ♪} 00:00, September 30, 2015 (UTC)

Hey Nukapedians! Today was Wikia Day, a sort of company holiday here at Wikia. On this day we drop everything we usually do and edit wikias. For my focus today I chose Fallout Wiki and wanted to help you guys out with portable infoboxes.

I created [[:Template:Infobox faction/Draft]], [[:Template:Infobox weapon/Draft]], [[:Template:Infobox achievement/Draft]], [[:Template:Infobox consumable/Draft]], and [[:Template:Infobox quest/Draft]]. These are ready for review by you guys. Probably not perfect ;) but I hope they're close enough for acceptance.

As a side note I'll add that we plan to add a "Media Collections" feature to our new infobox markup. This will allow us to consolidate images for the various Fallout games at the top of infobox, avoiding situations like the one on Poison (where the Tactics image is in the footer).

Hope you like these. ;) Feedback welcome, of course. TOR (talk) 20:01, October 23, 2015 (UTC)

I have reviewed the Template:Infobox quest/Draft and it looks really great so far. Some nitpicking details can be better, like adding the achievement image in the top right corner of the main image, a bit less space around the title so pages with less content looks less silly, but all in all, you did a truely outstanding job on it. - ^Greets Peace'n Hugs (talk) (blog) 20:42, October 23, 2015 (UTC)

Follow-up

During a discussion I had with TOR in chat, we discussed making a "beta test" of the new infoboxes. What is going to happen is a few hundred infoboxes across Fallout, Fallout 2 and Fallout 3 will be converted to the new versions. After which people can view them in "action" and provide feedback. The reason why we are doing it this way is that the discussion here has been stalled and Fallout 4 is being released in less than 2 weeks. I personally would like this finished and ready before that time. Please leave any comments and concerns here. Thanks.--Kingclyde (talk) 01:08, October 29, 2015 (UTC)

I found several bugs.

The infobox is too wide on desktop (should be 240; ruins the 240px Fallout and Fallout 2 images)
The icon in the top-right corner is displayed way too large on mobile, wrong position
Game icon in the wrong position on mobile, missing on desktop
Image size doesn't for work with an achievement template (Take it Back!)
Preferably just a little more space between lines

...

The infobox image becomes (much) too large on the desktop (Glowing one, Vipers)
The automatic removal of the suffix (game differentiation) doesn't work anymore for the infobox header
The footer image isn't centered anymore on desktop (New_California_Republic)

That's what I see for now. Jspoel 18:36, October 29, 2015 (UTC)

Thanks for the feedback, Jspoelstra! And good job testing on mobile, too. The team & I are going to be looking into those issues next week. The icon positioning is a tricky one, but I'll see what's possible. TOR (talk) 20:16, October 31, 2015 (UTC)

When the updated template was added to New California Republic, it introduced a redlink in the uppermost part of the infobox to "Lonesome Roads factions". This should be a link to "Lonesome Road factions". Clockpuncher (talk) 23:55, October 31, 2015 (UTC)

This is now fixed thanks to an edit by Jspoelstra. The problem was in Module:Games. TOR (talk) 21:17, November 1, 2015 (UTC)

Hey guys! I'm going to be creating a file called MediaWiki:Wikia.css/Infobox.css, as well as several subpages off of my own User pages, in order to address the CSS issues mention above by Jspoel. Do not panic. Do not adjust your sets. :)
czechout ☎ ✍  18:57: Wed 11 Nov 2015

A comparison of original and portable infoboxes is now available for your comments at User:CzechOut/Faction. The original {{Infobox faction}} is on top; the portable, on bottom. Your views on what more needs to be done to accept this new infobox are super important!
czechout ☎ ✍  00:34: Fri 13 Nov 2015

Here's a full list of the infoboxes you can compare, right now!

faction infobox
achievement: Here I decided to let you have a look at the infobox image at larger dimensions. To my eye it presents a more attractive, dominant image on desktop and mobile. But what do you think?
creature
quest
weapon: This one presented the challenge of the fact that there's nowhere to really apply the va-infobox-icon class, so there's no real way that I can think of to make the icon inset in the top right corner.
czechout ☎ ✍  01:45: Fri 13 Nov 2015

(←) If you would, could you please float the two infoboxes side by side. That would be a bit more helpful to compare them. I was gonna do it, but it's your userspace. The Gunny 02:29, November 13, 2015 (UTC)

Done on each infobox, except {{Infobox achievement}}, which is short enough that scrolling shouldn't really be much of an issue.
czechout ☎ ✍  18:31: Fri 13 Nov 2015

(←)

Issues

Faction template

the supertitle doesn't link to the overview page anymore, but to the game
space between lines has become a little too cramped
font of infobox headers is a little too large

Achievement template

The infobox image has become too large, previous is much more subtle
supertitle doesn't link to overview page anymore

Character template

The image description is somewhat large, and doesn't have to be italic
space between lines too big, general problem

Quest template

Same problems as described above
The quest icon has disappeared

Weapon template

The icon has been placed below the infobox image, obviously we want it back in the top right corner
Same problems as described above

Still some work left to do in my opinion. Jspoel 17:57, November 17, 2015 (UTC)

Moving to implementation

Hey all! I just want you — and by that the whole community — to know that your efforts with Fallout 4, are driving tons of new traffic to the site. You've done an awesome job in the last few weeks in particular!

We're also seeing a massive spike in mobile traffic, stronger this week even than last, which means that we'd like to see closure on the portable infobox conversion. So we'd like your permission to actually make the conversions happen by this weekend.

We have confidence in the new PIs because they're really close to your current infoboxes in terms of style and functionality.

Much of what Jspoel has mentioned above are fairly minor stylistic things that you guys can change to your precise liking later. See, when you say the fonts are "a little too large" or other font instances are "too big", we're in a pretty subjective territory. If you want me to make size exactly 12px or line-height precisely 140%, I can do that.

But it's hard to know how to respond to "too big" or "too small". Trickier still, a lot of the CSS has actually been worked out by one of your community, Shining-Armor. I didn't really want to countermand these stylistic choices, and thereby override what appeared to be local community wishes.

Communities regularly tweak infoboxes, and indeed the revision history of your own infoboxes suggests that such tweaking has been going on for years. That didn't stop you from committing to the current infoboxes at one point in the past.

All we're looking to do is to make sure that the current, huge numbers of mobile viewers get a much improved experience — without radically changing the desktop experience.

Can we therefore agree that minor styling shouldn't be a barrier to adoption? Questions of font size or line-height or padding should really be a part of a subsequent discussion, as would have been the case with the original infoboxes.

So I see three objections of substance, but I still don't think any of them should hold up adoption:

Icons in infoboxes like Weapon aren't inset in the upper right of infobox pictures - As I've said, above, this has been one of the more difficult aspects of conversion here at Fallout. The answer is not straightforward, but it is forthcoming. Maybe we can agree that it is something that will indeed be fixed to look more like the current infoboxes, but that this fix shouldn't hold up implementation.
Supertitle doesn't link to the right page. This is actually a problem within the Lua module that's called by the Infobox, and therefore not really a part of the infobox proper. It can almost certainly be corrected. The reason the current, non-PI template works is because it doesn't use the Lua module at all. I would suggest that you guys could still approve the new infoboxes even with this flaw, because the flaw really isn't a part of the infoboxes at all.
Infobox picture on {{Infobox achievement}} is too big. This infobox is unusual for you in that the images have user-defined widths, and that these widths are not the same from instance to instance. One page that uses the template may say that the width is 150px; another says they may be 140px. The current PI draft treats these infoboxes like any other ones on the site. Since your infobox pictures are generally widescreen, the CSS solves for that case. But the {{Infobox achievement}} images are typically precisely square. This means they inevitably get blown up slightly, but proportionally. So they're not warped; they're just not the size you'd prefer. Since these images aren't presenting as "broken" in any way, I'd ask you to let this be a tweak that can happen in the future for this one infobox.

As I hope you can see, the PIs actually do match your non-PIs pretty closely. And the feedback so far received can be solved. But in the current reality where you're getting gigantic mobile numbers, the priority should now be on actually implementing the new infoboxes. We can then continue to take your notes and fix things going forward.

Can we move forward with actually installing the new infoboxes?
czechout ☎ ✍  21:25: Tue 17 Nov 2015

I have no clue if the wiki is as bad on mobile as some people state (i never use mobile computerstuff), but if it is, it might be better to apply it already? We agreed it didn't need a vote unless there would be dissensus, which doesn't seem to be the case. On the other hand, I would like to hear something about when the remaining issues with these infoboxes will get fixed. I wouldn't like to see the situation where nothing happens anymore as the mobile infoboxes are already online anyway. - ^Greets Peace'n Hugs (talk) (blog) 22:00, November 17, 2015 (UTC)

That's a reasonable fear. But trust me when I say that this wiki is currently being watched by a lot of Wikia Staff members. Creation of the /Draft infoboxes has so far involved three people actively involved in the coding and several other kibitzing from the sidelines. We are absolutely dedicated to getting you where you want to be.

That said, I think it's really important to note that on some of the smaller, stylistic issues, we know that you can take care of things on your own. There's a demonstrated history of the admin and interested users who currently edit here being able to tweak infobox design. So if you don't like the precise font size, for example, we have every confidence that you guys can play with that until you get it to your liking. And remember, too, that Module:Games, the thing that's causing the issue with the supertitle not linking to the right page, is actually something you guys created and for the most part have developed entirely here at Fallout.

So between our Staff and yours, we reasonably think we can get all this transformed within the next few days.

Overnight, btw, one of our engineers developed a new conversion for {{Infobox game}}. Like the other draft, we've put this /Draft on a couple of pages. You can see it in situ on Fallout and Fallout 4, and in a side-by-side comparison at User:CzechOut/Game.
czechout ☎ ✍  16:19: Wed 18 Nov 2015

With my apologies for being largely away at such an important time ( real life issues seriously getting in the way), I think these are to the point where we should implement them as requested. As mentioned above, the remaining issues can be fixed/tweaked as time allows. Is there any serious opposition to this? Speak now, please. The Gunny

20:59, November 18, 2015 (UTC)

Conclusion

As promised in Chat discussions a few days ago, this discussion was going to be closed at the end of the 19th November. It having recently passed midnight in American Samoa on the 20th, and hearing agreement from Peace'n Hugs, The Gunny, and — on my talk page — Jspoelstra, and no dissent, here's what happens next.

The /Drafts which are currently complete will be converted within the next hour into portable infoboxes
Throughout today, and possibly into the weekend, your remaining infoboxes will be converted into portable infoboxes
Next week, tweaking will occur to make these things look precisely how you want them.

Because infoboxes can be used somewhat differently on different pages, and you have a lot of pages here, it would be very helpful if you guys could help with ensuring the boxes are basically looking okay. Although we don't expect problems, if you see pages where the infoboxes don't quite work, please make a note of the problem on my talk page so that I'm quickly alerted to the issue. I obviously intend to look at a random sample of pages using each infobox, but I can't reasonably look at every, single one. That's why your help is necessary. Note that your feedback on my talk page may not receive timely acknowledgement. But it will all be read and it will all form the basis for next week's improvement.

Thanks to everyone who participated in conversations with either me or TOR — and obviously thanks go out to Shining-Armor, who's done a lot of PI work for the community over the past several months.
czechout ☎ ✍  14:05: Fri 20 Nov 2015

Additional comments

Game differentations (<pagename> (Fallout 3) etc.) are visible, should be removed (as it was).
Only the first image in the infobox is visible; if there are more (My Kind of Town) they aren't displayed anymore.
Icons are missing, notably on quest pages
Location infobox is not converted (yet?) Jspoel 22:53, November 22, 2015 (UTC)

Currently Vault 13 doesn't list the game appearances - {{Game switch}} doesn't handle list of games. It will probably be easier to either use {{abblink}} which already does all the corner cases right or change Module:Games to do all the stuff. Short-term using abblink will be easier, but looking at it's source, doing it in lua will probably be easier to read/change. --Alfwyn (talk) 22:10, December 2, 2015 (UTC)

Sorry, guys. I should have initially started out today making my changes on a dummy page and template. You kinda saw the curtains pulled back there for a few hours, and it was likely pretty ugly. You should find Vault 13, and all location templates, now properly show their game appearances in the supertitle once again. One of today's main objects was to create working links to the right game overview page again. This has been achieved. On Vault 13, you'll note that the Fallout link now takes you to Fallout locations and Fallout 2 takes you to Fallout 2 locations.
czechout ☎ ✍  02:16: Thu 03 Dec 2015

Ah, thanks for fixing that. At Modules:Games-test I tried an approach so we don't need a new function for every infobox. The invocation for the example would be just {{#invoke:Games|title|FO1, FO2|locations}}. The last parameter is optional. --Alfwyn (talk) 09:44, December 3, 2015 (UTC)

About the game differntation, it prooved to be a remarkably resistent problem. I ended up writing a lua function for it and changed the location infobox accordingly. See for example Diamond City Radio (location). Not 100% sure about names chosen, but I guess we can use this for the other infoboxes too if nothing better comes up. --Alfwyn (talk) 14:01, December 3, 2015 (UTC)

After some changes to Module:Games I started to link the whole supertitle like it was before - for locations and characters so far. Seems to me to be less "link suprise", especially when only one game is involved. If there are no objections I will change the rest of the infoboxes accordingly in the near future. --Alfwyn (talk) 16:28, December 4, 2015 (UTC)