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

This is something to consider:

https://en.m.wikipedia.org/wiki/Great_Recession#Housing_bubbles

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

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

In T173600#3545784, @Nirzar wrote:

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!

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 @ovasileva
can we put this back on kanban?

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

updated zeplin.

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

Looks good on Beta.