Guidance for bilingual services (Issue #50)

Nova-Scotia-Digital-Service / service-pattern-library

4 stars 2 forks source link

Guidance for bilingual services (Issue #50) #49

Closed jamie-benoit closed 2 years ago

jamie-benoit commented 3 years ago

Guidance when a service is bilingual. Create a new page and added content to the Content page
Examples of Confirmation pages. Add links to the examples on the Confirmation Pages and created example pages for Address change Changement d'adresse Book an appointment Daily Public Health Check-in Ticket Lottery Permit - Approved Ticket Lottery Permit - Under review Sportfishing licence

gabwhite commented 3 years ago

It's great to see the different versions of confirmation pages! This looks really good. A couple small things:

confirmation-page-examples/confirmation-page-notes-fr.html has a little bit of weirdness where the title is showing? "blocs de construction", might just be missing a closing tag!
confirmation-page-examples/ticket-lottery-under-review-page-b.html in the heading it says it's version A? might just be something you forgot to take out!
confirmation-page-examples/ticket-lottery-under-review-page.html says it's version b?

Since the french is still a WIP, let's leave this open for now. Maybe next meeting you can share some of this work with the group. I love seeing confirmation pages looking so consistent!

jamie-benoit commented 3 years ago

Thanks Gab.

confirmation-page-examples/confirmation-page-notes-fr.html that is odd. Unsure if I am going to keep that page or not. It is to highlight what is different between services.
I created two versions of the Under review page to have discussion with the team. The "version" link is toggle between them. Version A is using the Definition List with DT for section titles and the details in DD. Version B is using a H3 for the section titles and DT for Detail lable and DD for the Details.

jamie-benoit commented 3 years ago

@gabwhite The content is ready for your review.

gabwhite commented 3 years ago

A few notes:

This branch wasn't up to date with main, so i synced it up.
I'm seeing some bad horizontal scrolling on the page templates: Content page, Confirmation page, and review answers. I tried to fix it but I couldn't figure out why it was happening! Maybe @connorscarolyns has a fix!
Let me know if you want to discuss anything before the next meeting!

jamie-benoit commented 3 years ago

I see the scrolling.

I will fix it.

jamie-benoit commented 3 years ago

Found the issue.

It is the code for width of the iFrame.

style="width: calc(100% + 25%)"

I looked up the calc function but I am not seeing an advantage of using it. Yes, it does make the iFrame wider but it creates horizonal scrolling.

@connorscarolyns could we just use a width=100%?

connorscarolyns commented 3 years ago

@jamie-benoit @gabwhite Can't just do 100% because the iframe displays at 75%, this is why the +25%. Otherwise, the iframe displays at tablet view in fullscreen. The fix for this is adding a negative margin. I had added it to the bottom because the text was being bumped down the page. Add margin-right: -25%; and the problem should be resolved.

jamie-benoit commented 3 years ago

the margin-right: -25%; seem do the fix. I will it to code and @gabwhite can verify

gabwhite commented 2 years ago

It's taken me way too long to review this. There were a couple merge conflicts on the confirmation pages but I believe we're all good now.