search

kodeklubben / codeclub-viewer

A viewer to display codeclub lessons
4 stars 17 forks source link

Override bootstrap print stylesheet to restore color decorations in print #689

Closed niclan closed 3 years ago

niclan commented 4 years ago

Se #688 - here is a PR to fix that.

niclan commented 4 years ago

@Skagevang - as long as you're busy patching?

Skagevang commented 4 years ago

Don’t think this work for window.print() since we are trying to style code tags

niclan commented 4 years ago

Oh yes it works in the browser and in the pre-generated pdfs and it's needed to get our 4th graders to follow the lessons.

Try the ?pdf and then set preview to "print" in the lessons I've mentioned in various tickets.

niclan commented 4 years ago

It's also easy to test since yarn will rebuild as needed at once when the patch applies.

niclan commented 4 years ago

....but, when printing via browser you have to enable background graphics in the print dialog. Which is another reason why browser generated pdf is a bad idea.

Skagevang commented 4 years ago

I will try later. Thank you for the PR :)

Skagevang commented 3 years ago

@niclan Yes, this works :D But we need to set !important on other places too, to get all the styling. Or do you just need the blocks? In that case you just need !important on line 242 to get white text in the blocks. I think we should have equal styling on the PDFs as the website. So a lot of !important needs to be added.

Regarding window.print(), I think we should aim to get back to puppeteer, but we should not do that before the line break bug is fixed.

niclan commented 3 years ago

You might be right about e.g. the white text being black on print, but for the kids the background color is the most significant to aid recognizing the text as bricks in scratch. No background - very low recognition.

Also, if the user does not click to get "background graphics" printed on their browser the text would be white on white which would be even worse than just not having the background. Not sure if there is a CSS element we can set to default background printing to on?

For scratch IMHO this PR is sufficient.

Re. puppeteer: chrome page breaks much worse than it. Please bring it back.

Skagevang commented 3 years ago

I will have a check on https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust when I got time. Can you post some examples of bad line breaks with save to pdf in browser? Seems to work great for me

niclan commented 3 years ago

This is interesting. When I print directly from the html it breaks pretty well. When I change the query to ...?pdf and print that it's worse.