611057 - {note} and {warning} styling

Status: VERIFIED FIXED

(support.mozilla.org :: General, defect, P2)

Description

[Paul Craciunoiu [:paulc]]

Per scoobidiver's comment in bug 586487 comment 27, {note} is not styled at all currently.

We need to fix that. Chowse, can you help?

The syntax is:

{note}this is a note{/note}

=> (turns into)

<div class="note">this is a note</div>

Comment 1

[Paul Craciunoiu [:paulc]]

Looks like {warning} is in the same bucket.

Comment 2

[Chris Howse [:chowse]]

For reference, here are uses of notes and warnings in the wild:

https://support.mozilla.com/en-US/kb/
https://support.mozilla.com/en-US/kb/The+Adobe+Flash+plugin+has+crashed
https://support.mozilla.com/en-US/kb/Live%20Bookmarks

Comment 3

[Paul Craciunoiu [:paulc]]

Attachment: nested lists grr

This would be a good opportunity to also fix the styling for nested lists.

---
* list item 1
** ul 1.1
** ul 1.2
Some text.
# list item 1
## ul 1.1
## ul 1.2
---

Check out the attachment.

Comment 4

[Chris Howse [:chowse]]

Attachment: Note and Warning Styling

Two samples. Let me know what you think of the diagonal bars, and I'll add the BG image if you like it.

Here's the accompanying CSS:

.note {
   background: #F5F5FF;
   color: #626266;
   padding: .5em 1em;
}

.warning {
   background: #FFF9DB url(warning-bg.png) repeat-x left top;
   color: #666458;
   padding: .5em 1em;
   padding-left: 2em;
}

Comment 5

[Chris Howse [:chowse]]

(In reply to comment #3)
> Created attachment 489617 [details]
> nested lists grr
> 
> This would be a good opportunity to also fix the styling for nested lists.

Not seeing this on my box. Already been fixed?

https://master.support.mozilla.com/en-US/kb/chowse/revision/5713

Comment 6

[Paul Craciunoiu [:paulc]]

(In reply to comment #5)
> Not seeing this on my box. Already been fixed?
> 
> https://master.support.mozilla.com/en-US/kb/chowse/revision/5713
Ah, scoobidiver points out... this might be just our parser:
https://master.support.mozilla.com/en-US/kb/Template:profileFolder

If you skip level 1:
---
Text
** list item 1
** list item 2
---

Comment 7

[James Socol [:jsocol, :james]]

David, how do you feel about the the styles in comment 4?

Comment 8

[Paul Craciunoiu [:paulc]]

David says he thinks they're good. Cc'ing Michael for additional feedback.

Comment 9

[Verdi [:verdi] Best to slack me]

Looks good to me

Comment 10

[Chris Howse [:chowse]]

Attachment: Warning Box Background

Comment 11

[Ricky Rosario [:rrosario, :r1cky]]

https://github.com/jsocol/kitsune/commit/c6ab2819522c0106f982a15b5e9f7006f0bc3bc4

Comment 12

[Verdi [:verdi] Best to slack me]

I know I said they looked good but in practice I'm finding that the note background is often not visible (or barely visible) when I'm looking at it on my lcd monitor from even a slight angle.

Comment 13

[Chris Howse [:chowse]]

Try it with these colors in Firebug:

#doc-content .note {
   background: #ecebff;
   color: #5e5e66;
}

I'd include a screenshot, but Firefox's color correction can give the wrong impression.

Comment 14

[Rebecca Billings [:rbillings]]

Verified notes and warnings display correctly, and did the firebug color change test. Verdi- you might want to double check the color. I see a light blue on the note on my kb article, but don't know if it's "too" light: https://support-stage.mozilla.com/en-US/kb/including