Page MenuHomePhabricator

Refactor Special:TopUsers - Tasklist
Open, Needs TriagePublic

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) {
}

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 19 2016, 6:39 AM
ashley added a subscriber: ashley.Aug 19 2016, 5:31 PM

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.)
SamanthaNguyen renamed this task from Refactor and redesign Special:TopUsers to Refactor Special:TopUsers - Tasklist.Aug 20 2016, 8:41 PM