Page MenuHomePhabricator

Improve treatment of hatnotes
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
Nirzar
Aug 18 2017, 8:43 PM
Referenced Files
F9400708: image.png
Sep 8 2017, 7:03 PM
F9400689: image.png
Sep 8 2017, 7:03 PM
F9154125: Screen Shot 2017-08-23 at 11.15.21.png
Aug 23 2017, 9:25 AM
F9151132: iPhone 7.png
Aug 22 2017, 8:18 PM
F9151131: iPhone 7 Copy.png
Aug 22 2017, 8:18 PM
F9146586: Screen Shot 2017-08-22 at 13.43.55.png
Aug 22 2017, 11:47 AM
F9114845: hatnotes.png
Aug 18 2017, 8:43 PM
F9114847: ext-hatnotes.png
Aug 18 2017, 8:43 PM

Description

Problem

  • Hatnotes as of now are sticking to the article actions
  • Hatnotes are meta content, (content about the content) and we need to make it look different than the actual content

ext-hatnotes.png (1×750 px, 196 KB)

Solution

Have a background on hatnotes, remove italics

hatnotes.png (1×750 px, 192 KB)

Acceptance criteria

  • Only elements with class .hatnote will be considered for this treatment.
  • Hatnotes continue to be hidden in print mode
  • If the hatnote is above lead section, div will be touching the article actions
  • If the hatnote is anywhere else, there will be a top and bottom margin.

Spec

https://zpl.io/b6XpXWV

Event Timeline

Nirzar updated the task description. (Show Details)
Nirzar moved this task from Design to Product Owner Backlog on the Web-Team-Backlog board.
Nirzar edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).
Nirzar moved this task from Product Owner Backlog to 2017-18 Q1 on the Web-Team-Backlog board.
Nirzar moved this task from 2017-18 Q1 to Upcoming on the Web-Team-Backlog board.

sorry, phab wen't crazy with dragging. meant to add to upcoming

Interesting idea. Will be testing this out myself.

Interesting idea. Will be testing this out myself.

Thanks!! let me know if you need anything. looks like you don't access to https://zpl.io/b6XpXWV

let me know if you need that. it will help you with the spec

from Jon's open questions
How do we define a hatnote?
Is it just something using class .hatnote? Or do we want to include .dablink elements as well (where they do not have .hatnote class?)

Only .hatnote for now

Questions for @Nirzar:

  • Will this new design appear in print mode?
  • TheDJ points out hatnotes can appear anywhere in content - should these be treated the same and how should they be affected by floating elements
  • What happens if the hatnote is not under a heading e.g. in the middle of a section block?
  • What if it appears immediately before a section?

Currently rough estimates are 1-2 and ? but we'd like to nail down the edge cases before deciding on one.

Will this new design appear in print mode?

Nope, we hide hatnotes, remember? :)

TheDJ points out hatnotes can appear anywhere in content - should these be treated the same and how should they be affected by floating elements

The same. i don't see how it actually differs

What happens if the hatnote is not under a heading e.g. in the middle of a section block?

don't know why this is a question. hatnotes would get background and remove italics. add padding etc. it would work anywhere in the page. the only difference is, the div will be touching the article actions if the hatnote is above lead section.

What if it appears immediately before a section?

Same rule. anywhere on the page, they can look the same

iPhone 7 Copy.png (1×750 px, 143 KB)

iPhone 7.png (1×750 px, 142 KB)

@TheDJ that looks like a bug? hatnotes can be block and push down any other content?
the padding seems off too but you might know that already :)

@Nirzar My point was mostly the floating content overlapping this div. This could be countered with overflow:hidden, just as we do on h#, which would make it like:

Screen Shot 2017-08-23 at 11.15.21.png (1×1 px, 510 KB)

Note that .hatnote, is a somewhat generic 'styling class', used for multiple purposes. Previously we also used the .dablink and .rellink classes, as more specific and semantic versions of it, but these have since disappeared.

I indeed don't have access to that design doc, so i just made up some padding. The specific values are not as important to me.

This could be countered with overflow:hidden, just as we do on h#, which would make it like:

sounds good to me but I would defer to Web engineering for this

Note that .hatnote, is a somewhat generic 'styling class', used for multiple purposes. Previously we also used the .dablink and .rellink classes, as more specific and semantic versions of it, but these have since disappeared.

Is .hatnote used for something other than the examples we know?

I indeed don't have access to that design doc, so i just made up some padding. The specific values are not as important to me.

Can you provide your email address? I can add you to the web project.

Note that .hatnote, is a somewhat generic 'styling class', used for multiple purposes. Previously we also used the .dablink and .rellink classes, as more specific and semantic versions of it, but these have since disappeared.

Is .hatnote used for something other than the examples we know?

Yikes, more than I expected..
https://en.wikipedia.org/w/index.php?title=Special%3AWhatLinksHere&target=Module%3AHatnote&namespace=10

Most of those are relatively rare I guess, but we should probably page through some of uses of those templates on mobile, to double check impact.

I indeed don't have access to that design doc, so i just made up some padding. The specific values are not as important to me.

Can you provide your email address? I can add you to the web project.

hartman . wiki @ gmail

without spaces, and with .com :)

Jdlrobson updated the task description. (Show Details)

There was some confusion here (we should remember to document why we move cards in columns).
https://phabricator.wikimedia.org/T173600#3549766 was interpreted as TheDj and Nirzar having a meeting, but that wasn't what happened, TheDJ was being given access to Zeplin.

This could be countered with overflow:hidden, just as we do on h#, which would make it like
sounds good to me but I would defer to Web engineering for this

I would defer to you - is it okay to clear it? That seems like it would be the easiest solution.

ovasileva set the point value for this task to 2.Aug 30 2017, 4:29 PM
Jdlrobson added a subscriber: Volker_E.

@Nirzar #f2f4f7 (background of infobox) is not a standard color.

@colorGray15: #f8f9fa

i the closest I can find.

#3366cc is also not in the color palette.

cc @Volker_E

Please advise.

Change 376261 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Improve hatnote styling

https://gerrit.wikimedia.org/r/376261

It's supposed to be #f8f9fa

let me check zeplin

36c has to be there! it's our primary accent color... cc @Volker_E

if we need to fix 36c, let's do it outside this card. and not change blue link color in hatnotes.

Okay got it. @colorProgressive is 36c

@Jdlrobson Not sure, what you're referring to here by “#3366cc is also not in the color palette” – it's our main accent color “Accent50”.

My comment came in too late… ;)

This is now on staging. @Nirzar can you confirm it looks good? If so I can pester someone to code review.

Looking great!!

thank you! ship it for Thursday?

Change 376261 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Improve hatnote styling

https://gerrit.wikimedia.org/r/376261