[Bug] HTML print layout looks bad

[TimidRobot]

Description

HTML print layout looks bad

We expect people may print all of the legal tools Deeds and Legal Codes pages. The following list pages provide links to the legal tools:

• CreativeCommons.org/licenses/
• CreativeCommons.org/publicdomain/

Reproduction

1. Ex. legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en

Expectation

• Icons should be consistent size
• Text should flow without overlap
• Digital navigation elements should be hidden

Screenshots

Environment

• Device: Laptop
• OS: macOS Monterey 12.3.1
• Browser: Firefox 99.0.1

[AMMAR-62]

Anyone on this issue yet?? ... may I work on this??

[TimidRobot]

Anyone on this issue yet?? ... may I work on this??

@AMMAR-62 no one else is working on this yet. Please keep the print media CSS in its own file and keep it as simple as possible.

[MdSahil-oss]

@TimidRobot I'm new to creativecommons, I think this issue has been resolved because when I visit to the page https://legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en I don't see any kind of icons/text overlapping using browser chrome/firefox on my laptop (window 11 OS) but I see text/icon on the page doesn't render very well (looks very bad) on the screen size (width) 500px (or smaller)

Screenshots

 

Do we need to fix this ?

[TimidRobot]

@MdSahil-oss

[...] I think this issue has been resolved because when I visit to the page https://legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en I don't see any kind of icons/text overlapping using browser chrome/firefox on my laptop (window 11 OS) [...]

The issue is only visible from print dialog/output.

[...] I see text/icon on the page doesn't render very well (looks very bad) on the screen size (width) 500px (or smaller) [...] Do we need to fix this ?

Sure! Help documenting the responsiveness issue(s) in an issue would also be welcomed.

[Akbar-Ibrahim]

I'd like to work on this, if it's okay

[kevinRapahel]

@TimidRobot I would love to work on this too, can I help?

[adetyaz]

hello @TimidRobot , Please how'd love to work on this , How can I help?

[tolubishops0]

Hello, my name is Tolu an Outreachy applicant. I’m new to Creative Commons community. The page looks good and responsive on loading it on my phone, but I couldn’t help but notice that the hamburger button me meant for the side-bar is not responsive and the screen goes blank and all the texts disappear as one clicks on said button. I’d like to give this a shot by fixing it, and would be creating a pull request. Thank you.

Screenshot


[TimidRobot]

Hello, my name is Tolu an Outreachy applicant. I’m new to Creative Commons community. The page looks good and responsive on loading it on my phone, but I couldn’t help but notice that the hamburger button me meant for the side-bar is not responsive and the screen goes blank and all the texts disappear as one clicks on said button. I’d like to give this a shot by fixing it, and would be creating a pull request. Thank you.

@tolubishops0 The menu is blank unless there is a properly configured WordPress instance for the page to pull data from or the Django app is providing dummy data to populate the menu.

If you have ideas about how the menu might be improved under either use case, please open new issue(s)

[Tapo41]

I want to contribute to this if it is still open .

[TimidRobot]

@Tapo41 yep, please see Contribution Guidelines — Creative Commons Open Source

[shreyansh1910]

@TimidRobot As i see this problem still persist . i would like to work on it. I need few information does this issue only persist in this page or some other page also. Do you want me to create new css for printing or make correction to already present css . (please guide me I am little new)

[TimidRobot]

@TimidRobot As i see this problem still persist . i would like to work on it. I need few information does this issue only persist in this page or some other page also. Do you want me to create new css for printing or make correction to already present css . (please guide me I am little new)

Please see Contribution Guidelines — Creative Commons Open Source.

I think a new CSS file.

[vanamaabhi2004]

please assign me to work on it

[BalrajDhakad]

Hey, This is Balraj, I want to work on this issue could you please assign it to me. @TimidRobot

[TimidRobot]

Please see Contribution Guidelines — Creative Commons Open Source for how we manage issues and PRs (we generally don't assign issues prior to resolution).

[BalrajDhakad]

I have read it but able to get what you want to say about assigning this issue to me @TimidRobot

[SamarthShukla17]

Hi @TimidRobot Is this https://legal-tools-dev.creativecommons.org/licenses/by/4.0/deed.en the page you want to be addressed in the issue?

[TimidRobot]

@SamarthShukla17 That page is an example of a Deed. We want to improve printing of all of the tools Deed and Legal Code pages (I also updated the issue description).

[SamarthShukla17]

Thankyou @TimidRobot for the clarification.

[TimidRobot]

@nobodys-ghost please make a comment on this issue so GitHub will allow me to assign it to you

[nobodys-ghost]

I've added a pull request to fix this issue. (see #484 )