Page MenuHomePhabricator

Improve treatment of hatnotes
Closed, ResolvedPublic2 Story Points

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

Solution

Have a background on hatnotes, remove italics

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 created this task.Aug 18 2017, 8:43 PM
Nirzar updated the task description. (Show Details)
Nirzar moved this task from Design to Product Owner Backlog on the Readers-Web-Backlog board.
Nirzar moved this task from Product Owner Backlog to 2017-18 Q1 on the Readers-Web-Backlog board.
Nirzar moved this task from 2017-18 Q1 to Upcoming on the Readers-Web-Backlog board.

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

Nirzar removed Nirzar as the assignee of this task.Aug 18 2017, 10:05 PM
TheDJ added a comment.Aug 19 2017, 2:58 AM

Interesting idea. Will be testing this out myself.

Jdlrobson updated the task description. (Show Details)Aug 21 2017, 2:42 PM

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

Nirzar updated the task description. (Show Details)Aug 21 2017, 8:34 PM

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

@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 :)

TheDJ added a comment.Aug 23 2017, 9:25 AM

@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:

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.

TheDJ added a comment.EditedAug 24 2017, 2:19 PM

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 :)

@TheDJ sent an invite!

Jdlrobson updated the task description. (Show Details)Aug 29 2017, 5:32 PM
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.

Jdlrobson updated the task description. (Show Details)Aug 29 2017, 5:36 PM

@Jdlrobson @ovasileva
can we put this back on kanban?

ovasileva set the point value for this task to 2.Aug 30 2017, 4:29 PM
Jdlrobson claimed this task.Sep 6 2017, 1:57 PM
Jdlrobson moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.
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

Nirzar added a comment.Sep 6 2017, 4:25 PM

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.

Nirzar added a comment.Sep 6 2017, 4:36 PM

updated zeplin.

Okay got it. @colorProgressive is 36c

Volker_E added a comment.EditedSep 6 2017, 5:01 PM

@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.

Nirzar added a comment.Sep 6 2017, 6:44 PM

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

ABorbaWMF added a subscriber: ABorbaWMF.

Looks good on Beta.