Fixes #476 Printing a patient record

[dapierce]

Fixes #476 Printing a patient record

• Adds print stylesheet, with printing-specific css.
• Removed left padding of navigation from the print style, and set basic color and margin styles for printing.
• Adds definition of a new css class ‘print-section’, which will only show on a printed report.
• In app/locales/en/translations.js, added the string 'messages.for_authorized_persons' with the message: 'This report is for authorized persons only.' (Will require actual translation into additional languages, in this commit I just used Google Translate for placeholder translations into all the current language files).
• Added a header to app/templates/section.hbs to add messages.for_authorized_persons text, using the ‘print-section’ class.

This might not be exactly as envisioned, but I would appreciate any feedback. Thanks!

cc @HospitalRun/core-maintainers

[jkleinsc]

Thanks for the pr @dapierce ! We will take a look at this. @tangollama what do you think? @jglovier any issues/concerns about the css changes here?

[jglovier]

@dapierce can you please add an image of the final outcome here for quick reference?

[dapierce]

@jglovier here are a couple examples:

[jglovier]

There a couple things we could clean up later, but in general this looks great and is super helpful. 🤘 👍 ⚡

🚢

[jglovier]

Each selector should be on their own line. In fact I thought we had a test for that in the Stylelint. Wonder why it's not failing the build? cc @billybonks

[jglovier]

Found some CSS syntax issues that need cleaned up before merging. Wonder why Stylelint isn't failling the build on these though?

[jkleinsc]

@jglovier Not sure why stylelint isn't failing the build here, but if I test this code change with the latest from master, it does throw an error:

not ok 7 PhantomJS 2.1 - Style Lint: _print.scss should pass stylelint
    ---
        actual: >
            false
        expected: >
            true
        stack: >
            http://localhost:7357/assets/test-support.js:4130:17
            http://localhost:7357/assets/tests.js:54:7
            runTest@http://localhost:7357/assets/test-support.js:2779:32
            run@http://localhost:7357/assets/test-support.js:2764:11
            http://localhost:7357/assets/test-support.js:2906:14
            process@http://localhost:7357/assets/test-support.js:2565:24
            begin@http://localhost:7357/assets/test-support.js:2547:9
            http://localhost:7357/assets/test-support.js:2607:9
        message: >
            7:5 Expected variable for "color". (sh-waqar/declaration-use-variable)
        Log: |
    ...

@dapierce can you correct this issue? We should be able to accept the PR once this is set.

[billybonks]

@jkleinsc because he is using a colour that hasn't been set to a variable 😄

[dapierce]

I will change to color variables in the print scss--been away for a bit, but I should be able to update the PR this week.

[billybonks]

@dapierce i love the fact that you added translations into every locale 👍 .

[dapierce]

I have updated my PR, but I'm not really sure why the tests are all failing on this one.

EDIT: I found the part where it combs the stylesheet, I'll make another update to this!

[jglovier]

Should use px values here.

[jglovier]

@dapierce btw for your convenience, if you are using Atom there is a handy linter package you can install that will show you SCSS linting failures in real time as you work, and what the fix is. More on that here.

[dapierce]

I have made updates to the _print.scss that fixed the printed page margin and pass the lint test. I tried Atom and the scss lint, however I was unable to find the lint rules file (the readme github link doesn't work) and it seems by default the rules are different than our project's rules.

[jkleinsc]

@dapierce Looks good to me. I'm going to merge this PR in.

[jglovier]

@dapierce oooff. My bad. Those docs need updated. We're using Stylelint now, not SCSS Lint anymore. 😖