Refactor Special:TopUsers - Tasklist
Open, Needs TriagePublic
Actions

Assigned To

None

Authored By

	SamanthaNguyen
	Aug 19 2016, 6:39 AM

Description

Refactor HTML

This is what generated HTML looks like:

<div class="top-users">
	<div class="top-fan-row">
		<div class="top-fan-level">
			Legendary Brickipedian
		</div>
	</div>
	<div class="top-fan-row">
		<span class="top-fan-num">1.</span>
		<span class="top-fan">
			<img src="http://images.brickimedia.org/avatars/global_66_m.jpg?r=1461762052" alt="avatar" border="0"> 
			<a href="http://en.brickimedia.org/wiki/User:NovaHawk">NovaHawk</a>
		</span>
		<span class="top-fan-points">
			<b>55,221</b> points
		</span>
		<div class="visualClear"></div>
	</div>
</div>

Remove emptyElement (element with class 'visualClear' that has clear: both;): First off, elements are meant for content, not for presentation! That's what HTML is all about. If we want to show more separation between each row, we can use margin.
Convert .top-users to <section> element
Convert each .top-fan-row to <li> element and rename to .top-users-list-person
Convert .top-fan-level to <h2> element
For each different level, there should be a <section> to imply that there are different sections. Currently, you just see a bunch of divs with no clear differentiation :(
Also rename selectors to some saner names
Add some data-* attributes for sane customisability.
Move border="0" to CSS --> border: 0;

What the generated HTML could look like instead:
(we're using ul since using the <ol> wouldn't work, so just add list-style: none;)

<section class="top-users">
	<section class="top-users-level-section" id="level-Legendary-Brickipedian" data-top-users-level="Legendary Brickipedian">
		<h2>Legendary Brickipedian</h2>
		<ul class="top-users-list">
			<li class="top-users-list-person" data-top-fan-person="Person">
				<span class="top-fan-rank" data-top-fan-rank="1">1</span>
				<span class="top-fan-person">
					<img src="" alt="avatar">
					<a href="" title="Person">Person</a>
				</span>
				<span class="top-fan-points">
					<span class="points" data-top-fan-points="84,329">84,329</span>
				</span>
			</li>
			<!-- continue generating <li>s -->
		</ul>
	</section>
	<!-- continue generating <section>s -->
</section>

Redesign Special:TopUsers

WIP

Highlight own rank

A person's own rank should be highlighted so that they can find it easily :)

Add CSS for top 3 people

There should be some CSS in TopUsers to customize the top 3 (gold, silver, bronze) which could look like this:

/* gold */
.top-users-level-section:nth-child(1) .top-users-list li:nth-child(1) {
}

/* silver */
.top-users-level-section:nth-child(1) .top-users-list li:nth-child(2) {
}

/* bronze */
.top-users-level-section:nth-child(1) .top-users-list li:nth-child(3) {
}

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T143388 Refactor Special:TopUsers - Tasklist
		Open		None	T143498 Compact Special:TopFansByStatistics, Special:TopUsersRecent, Special:QuizLeaderboard into Special:CommunityLeaderboard

Event Timeline

SamanthaNguyen created this task.Aug 19 2016, 6:39 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 19 2016, 6:39 AM

SamanthaNguyen updated the task description. (Show Details)Aug 19 2016, 6:40 AM

SamanthaNguyen updated the task description. (Show Details)Aug 19 2016, 10:42 AM

SamanthaNguyen updated the task description. (Show Details)Aug 19 2016, 10:44 AM

Highlight own rank
Add CSS for top 3 people

These are great ideas and should've really been there since day 1! But better late than never, right?

Remove emptyElement (element with class 'visualClear' that has clear: both;): First off, elements are meant for content, not for presentation! That's what HTML is all about. If we want to show more separation between each row, we can use margin.

Careful there. I trust you and your skills, but history has shown that while a developer's intentions may be sane and sensible, skins don't tend to be that sensible. I'd prefer if, once the redesign is complete, we'd test it with at least all the skins installed on the Labs test wiki.

Add some data-* attributes for sane customisability.

How would this help? (I have no idea, hence the -- probably stupid -- question. :)

Move border="0" to CSS --> border: 0;

wAvatar::getAvatarURL() (in /extensions/SocialProfile/UserProfile/AvatarClass.php) sets that. It's probably not needed anymore, but we should test it out. I mean, most skins are at least sane enough to do img { border: 0; } in their main CSS file...right?

Anyway, you might wanna study the source a bit closer, as there are a few unexpected things you'll need to consider when redesigning:

if $wgUserStatsTrackWeekly is true, a link to this week's top users is output in the right-hand sidebar. Ditto for $wgUserStatsTrackMonthly.
the "top fans by category" stuff. When MediaWiki:Topfans-by-category is defined, as it is on Brickipedia, the list can also be ordered by a certain, defined statistic, such as the amount of friends or gifts sent, etc. (Some inline CSS is involved in here for the <h1> element, yuck.)