1014431 - Improve visualization for code snippets

Status: VERIFIED FIXED

(Mozilla QA Graveyard :: One and Done, defect)

Description

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Right now code snippets are very hard to identify in a task. For example see https://oneanddone.mozilla.org/en-US/tasks/30/.

It would be great to get a better styling for them. Maybe a lighter background an border, which emphasizes it.

Comment 1

[Rebecca Billings [:rbillings]]

This will be resolved in the upcoming version, where users will be able to create tasks within the tool.

Comment 2

[Bob Silverberg [:bsilverberg]]

As per my comment on bug 1014429, nothing about the instructions editor is changing with the advent of moving task creation inside the tool. If there are issues and concerns with the current way of inputting instructions and displaying them to a user, that should be addressed in a separate bug. It might make sense to group all such issues together and have a discussion about what we might do to address them.

Comment 3

[Rebecca Billings [:rbillings]]

Please review the new task creation and view process- it's up on staging. Tasks are still entered in the same manner so your original issue may remain. I'm not sure how we would change the background for one piece of text within markup.

Comment 4

[Henrik Skupin [:whimboo][⌚️UTC+1]]

I don't know where staging lives, so I would need more information here. Otherwise I will have to test it when its live on production.

Comment 5

[Rebecca Billings [:rbillings]]

https://oneanddone.paas.allizom.org/en-US/

Comment 6

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Thanks Rebecca, but I can't actually do anything here as long as I'm not an admin and can create tasks myself. I haven't found any existing task, which includes a code snippet.

Comment 7

[Rebecca Billings [:rbillings]]

I've made you an Admin on staging for the future.

Comment 8

[Bob Silverberg [:bsilverberg]]

The rendering of the instructions is done via the `markdown` package. It might be possible to customize the package's behaviour, or perhaps this could also be accomplished via CSS.

Comment 9

[Bob Silverberg [:bsilverberg]]

Commit pushed to master at https://github.com/mozilla/oneanddone

https://github.com/mozilla/oneanddone/commit/4ea5c2b91ebb7b5af327c2127ff4f523e44f32f1
Bug 1014431 - Improve visualization for code snippets

Comment 10

[Rebecca Billings [:rbillings]]

Verified on staging that code snippets now display with a yellow background making them a lot easier to distinguish from the rest of the text. Ex: https://oneanddone.allizom.org/en-US/tasks/107/

Comment 11

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Indeed, but personally I feel the color doesn't really match the color schema of One and Done. Maybe a lighter blue color as what we have on the front page might have been a better choice? Or making it a box with a slightly different background as how code snippets are shown on Github like https://github.com/mozilla/mozmill#installation.

Comment 12

[Bob Silverberg [:bsilverberg]]

Thanks for the feedback, Henrik. Rather than going back and forth between versions that you may or may not like, would you care to contribute some CSS that will make it look exactly the way you think it should look?

Comment 13

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Maybe the following?

pre, code {
    background-color: #F3F1EA;
    color: #666;
    font-size: 14px;
    border: 1px solid #666;
    padding: 1px 4px;
}

It's lesser loud and trendy and IMHO fits better into the design. Maybe a nearly white background might also be fine.

Comment 14

[Bob Silverberg [:bsilverberg]]

Attachment: Screenshot of latest css

Comment 15

[Bob Silverberg [:bsilverberg]]

Commit pushed to master at https://github.com/mozilla/oneanddone

https://github.com/mozilla/oneanddone/commit/fbd0c333fd7bd46c302e8663b8dd4c2d80fec94d
Bug 1014431 - Improve visualization for code snippets

Comment 16

[Bob Silverberg [:bsilverberg]]

The latest changes have been pushed to dev and stage. Henrik and Rebecca, can you verify?

Comment 17

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Lovely at least from my side. Lesser eye hurting. ;) Thanks.

Comment 18

[Rebecca Billings [:rbillings]]

Looks good on staging

Comment 19

[Rebecca Billings [:rbillings]]

Verified on prod