From b204961d235a13bbaeab24a077079f81a502fc55 Mon Sep 17 00:00:00 2001 From: Eric Dunsworth <1907279+EricDunsworth@users.noreply.github.com> Date: Tue, 6 Dec 2022 11:21:43 -0500 Subject: [PATCH] Page feedback tool: Revamp General: * Rename "page success widget" to "page feedback tool" * Turn it into a site component Jekyll: * Change the tool into an include * Use sub-includes for parameter/string variable declarations * Add a pageFeedback variable to enable the tool in page templates * Add pageFeedback sub-variables to optionally override the default values of the tool's form parameters: * institutionopt * themeopt * sectionopt * pageTitle (true re-uses the current page's title, without " - Canada.ca") * language (true re-uses the current page's language) * submissionPage (true re-uses the current page's URL) * Update the page details footer include to accommodate the tool: * Declare col-modified = "col-xs-12" only once at the beginning of variable assignments * Support pageFeedback and prioritize it over report a problem * Make pageFeedback take priority over noReportProblem (i.e. setting former to true and latter to false will show the page feedback tool) SCSS: * Add new classes (tied to the gc-pft class): * nojs-col-sm-12 * nojs-pr-sm-0 * nojs-text-left * Increase the share widget's top margin to make it look vertically-centered when used alongside the tool in small/medium view and over * Depends on the has() pseudo-class HTML: * Rename the gc-pg-hlpfl id/class prefix to gc-pft * Rename the gc-pg-hlpfl-btn class to gc-pft-btns ("s" suffix) * Use a fieldset for "Did you find what you were looking for?" and its yes/no buttons * Change "Did you find what you were looking for?" into a legend * Improve layout: * Remove heading classes * Use form classes (i.e. chkbxrdio-grp, field-name and form-group) * Increase spacing between groups of content * Move the details field's secondary information paragraph below the field * JS mode: * Center-align "Did you find what you were looking for?" in extra-small view * Vertically-center "Did you find what you were looking for?" and yes/no buttons in small view and over * Noscript/Basic HTML mode: * Position the yes button directly below "Did you find what you were looking for?" in all views * Use aria-live regions to announce transition messages to screen reader users: * "Tell us why below:" upon pressing the no button * "Thank you for your feedback." upon pressing the yes button or submitting the no button's questionnaire * Add aria-describedby attributes to: * Programmatically-associate the yes button to the "If not, tell us why below:" paragraph in noscript/basic HTML mode (to make screen readers announce the no button's instructions right after the yes button) * Programmatically-associate the secondary information paragraph to the more details field Content: * Add a visually-hidden "Page feedback" H3 heading * Add a period to the end of "Thank you for your feedback" * Add "below" to the end of "If not, tell us why:" in noscript/basic HTML mode * Add a visually-hidden "Tell us why below:" paragraph in JS mode * Combine "Please provide more details" and "Maximum 300 characters" into the same label * Write all values in an "EN-FR" format, derived from labels Demo pages: * Add a standard demo page (pageFeedback enabled) * Add a custom demo page (pageFeedback with sub-variables) Provisional functionality page: * Portray the widget as stable in the feature availability table * Remove "page success widget" section/example Co-authored-by: David Elisma --- _data/sites.json | 44 +++++++ .../gc-page-feedback/gc-page-feedback.html | 12 ++ _includes/page-details/footer.html | 45 +++++++ components/provisional-en.html | 90 ++----------- components/provisional-fr.html | 91 ++----------- sites/gc-page-feedback/_base.scss | 24 ++++ sites/gc-page-feedback/_print.scss | 7 + sites/gc-page-feedback/_screen-sm-min.scss | 14 ++ .../gc-page-feedback-custom-en.html | 29 +++++ .../gc-page-feedback-custom-fr.html | 29 +++++ .../gc-page-feedback/gc-page-feedback-en.html | 23 ++++ .../gc-page-feedback/gc-page-feedback-fr.html | 23 ++++ sites/gc-page-feedback/includes/css.html | 121 ++++++++++++++++++ .../includes/gc-page-feedback.html | 62 +++++++++ .../includes/parameters.liquid | 57 +++++++++ .../gc-page-feedback/includes/strings.liquid | 58 +++++++++ sites/gc-page-feedback/index.json-ld | 44 +++++++ sites/page-details/_base.scss | 14 +- sites/page-details/_screen-md-min.scss | 16 +++ sites/page-details/_screen-sm-min.scss | 16 +++ sites/page-details/includes/footer.html | 26 ++-- sites/theme.scss | 5 + 22 files changed, 671 insertions(+), 179 deletions(-) create mode 100644 _includes/gc-page-feedback/gc-page-feedback.html create mode 100644 _includes/page-details/footer.html create mode 100644 sites/gc-page-feedback/_base.scss create mode 100644 sites/gc-page-feedback/_print.scss create mode 100644 sites/gc-page-feedback/_screen-sm-min.scss create mode 100644 sites/gc-page-feedback/gc-page-feedback-custom-en.html create mode 100644 sites/gc-page-feedback/gc-page-feedback-custom-fr.html create mode 100644 sites/gc-page-feedback/gc-page-feedback-en.html create mode 100644 sites/gc-page-feedback/gc-page-feedback-fr.html create mode 100644 sites/gc-page-feedback/includes/css.html create mode 100644 sites/gc-page-feedback/includes/gc-page-feedback.html create mode 100644 sites/gc-page-feedback/includes/parameters.liquid create mode 100644 sites/gc-page-feedback/includes/strings.liquid create mode 100644 sites/gc-page-feedback/index.json-ld create mode 100644 sites/page-details/_screen-md-min.scss create mode 100644 sites/page-details/_screen-sm-min.scss diff --git a/_data/sites.json b/_data/sites.json index 3cc56f987a..0a72a8aa28 100644 --- a/_data/sites.json +++ b/_data/sites.json @@ -344,6 +344,50 @@ ] } } +,{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Page feedback tool", + "fr": "Outil de rétroaction sur la page" + }, + "description": { + "en": "Page feedback tool for Canada.ca", + "fr": "Outil de rétroaction sur la page pour Canada.ca" + }, + "modified": "2022-12-06", + "componentName": "gc-page-feedback", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Page feedback tool", + "language": "en", + "path": "gc-page-feedback-en.html" + }, + { + "title": "Outil de rétroaction sur la page", + "language": "fr", + "path": "gc-page-feedback-fr.html" + }, + { + "title": "Page feedback tool with custom parameters", + "language": "en", + "path": "gc-page-feedback-custom-en.html" + }, + { + "title": "Outil de rétroaction sur la page avec paramètres personnalisés", + "language": "fr", + "path": "gc-page-feedback-custom-fr.html" + } + ] + } +} ,{ "@context": { "@version": 2.0, diff --git a/_includes/gc-page-feedback/gc-page-feedback.html b/_includes/gc-page-feedback/gc-page-feedback.html new file mode 100644 index 0000000000..d614cd7e3e --- /dev/null +++ b/_includes/gc-page-feedback/gc-page-feedback.html @@ -0,0 +1,12 @@ + +{%- if page.dir == "/sites/gc-page-feedback/" -%} + {%- include_relative includes/css.html -%} + {%- include_relative includes/gc-page-feedback.html -%} +{%- else -%} +

Error: The page feedback tool only can only be activated in pages located at "sites/gc-page-feedback/*.html".

+{%- endif -%} diff --git a/_includes/page-details/footer.html b/_includes/page-details/footer.html new file mode 100644 index 0000000000..cad6a7932e --- /dev/null +++ b/_includes/page-details/footer.html @@ -0,0 +1,45 @@ + + diff --git a/components/provisional-en.html b/components/provisional-en.html index 60511cbeca..6ee0430af0 100644 --- a/components/provisional-en.html +++ b/components/provisional-en.html @@ -7,7 +7,7 @@ { "title": "GCWeb home", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" } ], "secondlevel": false, - "dateModified": "2021-01-19", + "dateModified": "2022-12-06", "share": "true" } --- @@ -93,9 +93,16 @@

Provisional feature removal first notice

Template .gc-pg-hlpfl - "Page success widget" design pattern to let users share their experience on the page. + +

"Page success widget" design pattern to let users share their experience on the page.

+

Feature has been revised and renamed to "page feedback tool" (.gc-pft):

+ + v7.0 - + Stable (vX.X.X) (TODO) Plugin .wb-chtwzrd @@ -402,80 +409,3 @@

Icon warning color

With "provisional icon-warning-light" class

-

Page success widget

-

Planned to eventually replace Report a problem. Uses multiple features: wb-postback and data-wb-doaction plugins, as well as nojs-* styles and Font Awesome.

-
-
-
-
-
- - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -
-
- -

- (Don’t include any personal information) -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
diff --git a/components/provisional-fr.html b/components/provisional-fr.html index 253deb5b99..5f95f0a38c 100644 --- a/components/provisional-fr.html +++ b/components/provisional-fr.html @@ -7,7 +7,7 @@ { "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" } ], "secondlevel": false, - "dateModified": "2021-01-19", + "dateModified": "2022-12-06", "share": "true" } --- @@ -95,9 +95,16 @@

Provisional feature removal first notice

Gabarit .gc-pg-hlpfl - "Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page. + +

"Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page.

+

Cette fonctionnalité a été révisée et renommée « outil de rétroaction sur la page » (.gc-pft) :

+ + v7.0 - + Stable (vX.X.X) (TODO) Plugin .wb-chtwzrd @@ -408,81 +415,3 @@

Icon warning color

-

Widget succès de page

-

Est prévu pour remplacer Signaler un problème ou une erreur sur cette page éventuellement. Utilises plusieurs fonctionnalités : les plugiciels wb-postback et data-wb-doaction, ainsi que les styles nojs-* puis Font Awesome.

-
-
-
-
-
- - - - -
-
-
-

Avez-vous trouvé ce que vous cherchiez?

-
-
- - -
-
-
- -
-
- Qu’est-ce qui n’allait pas? -
- -
-
- -
-
- -
-
- -
-
- -
-
- -

- (N’incluez pas d’information personnelle) -
- Maximum de 300 caractères -

- -
- -
-
-
-

Merci de vos commentaires

-
-
-
-
-
diff --git a/sites/gc-page-feedback/_base.scss b/sites/gc-page-feedback/_base.scss new file mode 100644 index 0000000000..10692aba5a --- /dev/null +++ b/sites/gc-page-feedback/_base.scss @@ -0,0 +1,24 @@ +/* + @title: Page feedback tool - Base + */ + +/* In noscript/basic HTML mode... */ +.no-js, +.wb-disable { + .gc-pft { + /* Disable row gutters (default selector isn't specific-enough) */ + .row-no-gutters { + @extend .row-no-gutters; + } + + /* Make the legend full width */ + .nojs-col-sm-12 { + @extend .col-sm-12; + } + + /* Left-align the legend and yes/no buttons */ + .nojs-text-left { + text-align: left; + } + } +} diff --git a/sites/gc-page-feedback/_print.scss b/sites/gc-page-feedback/_print.scss new file mode 100644 index 0000000000..5f9c4031db --- /dev/null +++ b/sites/gc-page-feedback/_print.scss @@ -0,0 +1,7 @@ +/* + @title: Page feedback tool - Print view + */ + +.gc-pft { + @extend %gcweb-print-display-none-important; +} diff --git a/sites/gc-page-feedback/_screen-sm-min.scss b/sites/gc-page-feedback/_screen-sm-min.scss new file mode 100644 index 0000000000..72627320fa --- /dev/null +++ b/sites/gc-page-feedback/_screen-sm-min.scss @@ -0,0 +1,14 @@ +/* + @title: Page feedback tool - Small view and over + */ + +/* In noscript/basic HTML mode... */ +.no-js, +.wb-disable { + .gc-pft { + /* Disable the legend's right padding */ + .nojs-pr-sm-0 { + padding-right: 0 !important; + } + } +} diff --git a/sites/gc-page-feedback/gc-page-feedback-custom-en.html b/sites/gc-page-feedback/gc-page-feedback-custom-en.html new file mode 100644 index 0000000000..00b0b2f1e8 --- /dev/null +++ b/sites/gc-page-feedback/gc-page-feedback-custom-en.html @@ -0,0 +1,29 @@ +--- +{ + "altLangPage": "gc-page-feedback-custom-fr.html", + "breadcrumbs": [ + { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" } + ], + "css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"], + "dateModified": "2022-12-06", + "description": "Page feedback tool for Canada.ca", + "language": "en", + "title": "Page feedback tool with custom parameters", + "pageFeedback": { + "institutionopt": "Custom institution", + "themeopt": "Custom theme", + "sectionopt": "Custom section", + "pageTitle": "true", + "language": "true", + "submissionPage": "true" + } +} +--- +
+ +

HTML code

+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%} +{% include variable-core.liquid %} +{% highlight text %} +{% include_relative includes/gc-page-feedback.html %} +{% endhighlight %} diff --git a/sites/gc-page-feedback/gc-page-feedback-custom-fr.html b/sites/gc-page-feedback/gc-page-feedback-custom-fr.html new file mode 100644 index 0000000000..e2b493dc3d --- /dev/null +++ b/sites/gc-page-feedback/gc-page-feedback-custom-fr.html @@ -0,0 +1,29 @@ +--- +{ + "altLangPage": "gc-page-feedback-custom-en.html", + "breadcrumbs": [ + { "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" } + ], + "css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"], + "dateModified": "2022-12-06", + "description": "Outil de rétroaction sur la page pour Canada.ca", + "language": "fr", + "title": "Outil de rétroaction sur la page avec paramètres personnalisés", + "pageFeedback": { + "institutionopt": "Institution personnalisée", + "themeopt": "Thème personnalisé", + "sectionopt": "Section personnalisée", + "pageTitle": "true", + "language": "true", + "submissionPage": "true" + } +} +--- +
+ +

Code HTML

+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%} +{% include variable-core.liquid %} +{% highlight text %} +{% include_relative includes/gc-page-feedback.html %} +{% endhighlight %} diff --git a/sites/gc-page-feedback/gc-page-feedback-en.html b/sites/gc-page-feedback/gc-page-feedback-en.html new file mode 100644 index 0000000000..7bebd0b857 --- /dev/null +++ b/sites/gc-page-feedback/gc-page-feedback-en.html @@ -0,0 +1,23 @@ +--- +{ + "altLangPage": "gc-page-feedback-fr.html", + "breadcrumbs": [ + { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" } + ], + "css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"], + "dateModified": "2022-12-06", + "description": "Page feedback tool for Canada.ca", + "language": "en", + "title": "Page feedback tool", + "pageFeedback": "true", + "share": "true" +} +--- +
+ +

HTML code

+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%} +{% include variable-core.liquid %} +{% highlight text %} +{% include_relative includes/gc-page-feedback.html %} +{% endhighlight %} diff --git a/sites/gc-page-feedback/gc-page-feedback-fr.html b/sites/gc-page-feedback/gc-page-feedback-fr.html new file mode 100644 index 0000000000..636ff31190 --- /dev/null +++ b/sites/gc-page-feedback/gc-page-feedback-fr.html @@ -0,0 +1,23 @@ +--- +{ + "altLangPage": "gc-page-feedback-en.html", + "breadcrumbs": [ + { "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" } + ], + "css": ["https://use.fontawesome.com/releases/v5.15.4/css/all.css"], + "dateModified": "2022-12-06", + "description": "Outil de rétroaction sur la page pour Canada.ca", + "language": "fr", + "title": "Outil de rétroaction sur la page", + "pageFeedback": "true", + "share": "true" +} +--- +
+ +

Code HTML

+{%- comment -%} Manually-included variable-core.liquid so that gc-page-feedback.html's code sample can use the i18nText-lang variable {%- endcomment -%} +{% include variable-core.liquid %} +{% highlight text %} +{% include_relative includes/gc-page-feedback.html %} +{% endhighlight %} diff --git a/sites/gc-page-feedback/includes/css.html b/sites/gc-page-feedback/includes/css.html new file mode 100644 index 0000000000..6c703f0710 --- /dev/null +++ b/sites/gc-page-feedback/includes/css.html @@ -0,0 +1,121 @@ + diff --git a/sites/gc-page-feedback/includes/gc-page-feedback.html b/sites/gc-page-feedback/includes/gc-page-feedback.html new file mode 100644 index 0000000000..6acde9c185 --- /dev/null +++ b/sites/gc-page-feedback/includes/gc-page-feedback.html @@ -0,0 +1,62 @@ +{%- include_relative includes/parameters.liquid -%} +{%- include_relative includes/strings.liquid -%} + +
+
+
+

{{ pft_h3 }}

+
+ + + + + + +
+ {{ pft_legend }} +
+ +
+
+ + +
+
+
+

{{ pft_why_note_nojs }}

+

{{ pft_why_note_js }}

+
+
+ {{ pft_no_legend }} +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ + +

{{ pft_problem6_note }}

+
+ +
+
+
+
+

{{ pft_submit_message }}

+
+
+
+
diff --git a/sites/gc-page-feedback/includes/parameters.liquid b/sites/gc-page-feedback/includes/parameters.liquid new file mode 100644 index 0000000000..e17fb3b005 --- /dev/null +++ b/sites/gc-page-feedback/includes/parameters.liquid @@ -0,0 +1,57 @@ +{%- comment -%} +Set parameter variables +{%- endcomment -%} + +{%- capture pft_institutionopt_value -%} + {%- if page.pageFeedback.institutionopt -%} + {{ page.pageFeedback.institutionopt }} + {%- else -%} + Institution - required - must use same abbreviation value EN and FR + {%- endif -%} +{%- endcapture -%} + +{%- capture pft_themeopt_value -%} + {%- if page.pageFeedback.themeopt -%} + {{ page.pageFeedback.themeopt }} + {%- else -%} + Theme - required - must use same value EN and FR + {%- endif -%} +{%- endcapture -%} + +{%- capture pft_sectionopt_value -%} + {%- if page.pageFeedback.sectionopt -%} + {{ page.pageFeedback.sectionopt }} + {%- else -%} + Section - required but can be blank - same value EN and FR + {%- endif -%} +{%- endcapture -%} + +{%- capture pft_pageTitle_value -%} + {%- if page.pageFeedback.pageTitle == "true" -%} + {{ page.title }} + {%- elsif page.pageFeedback.title -%} + {{ page.pageFeedback.pageTitle }} + {%- else -%} + Page title (EN) - required + {%- endif -%} +{%- endcapture -%} + +{%- capture pft_language_value -%} + {%- if page.pageFeedback.language == "true" -%} + {{ i18nText-lang }} + {%- elsif page.pageFeedback.language -%} + {{ page.pageFeedback.language }} + {%- else -%} + Language - required - use EN or FR + {%- endif -%} +{%- endcapture -%} + +{%- capture pft_submissionPage_value -%} + {%- if page.pageFeedback.submissionPage == "true" -%} + {{ page.url | absolute_url }} + {%- elsif page.pageFeedback.submissionPage -%} + {{ page.pageFeedback.submissionPage }} + {%- else -%} + Page URL - required + {%- endif -%} +{%- endcapture -%} diff --git a/sites/gc-page-feedback/includes/strings.liquid b/sites/gc-page-feedback/includes/strings.liquid new file mode 100644 index 0000000000..20f8155e26 --- /dev/null +++ b/sites/gc-page-feedback/includes/strings.liquid @@ -0,0 +1,58 @@ +{%- comment -%} +Set string variables +{%- endcomment -%} + +{%- assign pft_yes_en = "Yes" -%} +{%- assign pft_no_en = "No" -%} +{%- assign pft_problem1_label_en = "I can’t find the information" -%} +{%- assign pft_problem2_label_en = "The information is hard to understand" -%} +{%- assign pft_problem3_label_en = "There was an error or something didn’t work" -%} +{%- assign pft_problem4_label_en = "Other reason" -%} + +{%- assign pft_yes_fr = "Oui" -%} +{%- assign pft_no_fr = "Non" -%} +{%- assign pft_problem1_label_fr = "Je ne peux pas trouver l’information" -%} +{%- assign pft_problem2_label_fr = "L’information est difficile à comprendre" -%} +{%- assign pft_problem3_label_fr = "Il y avait une erreur ou quelque chose ne fonctionnait pas" -%} +{%- assign pft_problem4_label_fr = "Autre raison" -%} + +{%- assign pft_yes_value = pft_yes_en | append: "-" | append: pft_yes_fr -%} +{%- assign pft_no_value = pft_no_en | strip_html | append: "-" | append: pft_no_fr | strip_html -%} +{%- assign pft_problem1_value = pft_problem1_label_en | strip_html | append: "-" | append: pft_problem1_label_fr | strip_html -%} +{%- assign pft_problem2_value = pft_problem2_label_en | strip_html | append: "-" | append: pft_problem2_label_fr | strip_html -%} +{%- assign pft_problem3_value = pft_problem3_label_en | strip_html | append: "-" | append: pft_problem3_label_fr | strip_html -%} +{%- assign pft_problem4_value = pft_problem4_label_en | strip_html | append: "-" | append: pft_problem4_label_fr | strip_html -%} + +{%- if i18nText-lang == "en" -%} + {%- assign pft_h3 = "Page feedback" -%} + {%- assign pft_legend = "Did you find what you were looking for?" -%} + {%- assign pft_yes = pft_yes_en -%} + {%- assign pft_no = pft_no_en -%} + {%- assign pft_why_note_nojs = "If not, tell us why below:" -%} + {%- assign pft_why_note_js = "Tell us why below:" -%} + {%- assign pft_no_legend = "What was wrong?" -%} + {%- assign pft_problem1_label = pft_problem1_label_en -%} + {%- assign pft_problem2_label = pft_problem2_label_en -%} + {%- assign pft_problem3_label = pft_problem3_label_en -%} + {%- assign pft_problem4_label = pft_problem4_label_en -%} + {%- assign pft_problem6_label = "Please provide more details (maximum 300 characters)" -%} + {%- assign pft_problem6_note = "You will not receive a reply. Telephone numbers and email addresses will be removed." -%} + {%- assign pft_submit = "Submit" -%} + {%- assign pft_submit_message = "Thank you for your feedback." -%} +{%- elsif i18nText-lang == "fr" -%} + {%- assign pft_h3 = "Rétroaction sur la page" -%} + {%- assign pft_legend = "Avez-vous trouvé ce que vous cherchiez?" -%} + {%- assign pft_yes = pft_yes_fr -%} + {%- assign pft_no = pft_no_fr -%} + {%- assign pft_why_note_nojs = "Sinon, dites nous pourquoi ci-dessous :" -%} + {%- assign pft_why_note_js = "Dites nous pourquoi ci-dessous :" -%} + {%- assign pft_no_legend = "Qu’est-ce qui n’allait pas?" -%} + {%- assign pft_problem1_label = pft_problem1_label_fr -%} + {%- assign pft_problem2_label = pft_problem2_label_fr -%} + {%- assign pft_problem3_label = pft_problem3_label_fr -%} + {%- assign pft_problem4_label = pft_problem4_label_fr -%} + {%- assign pft_problem6_label = "Veuillez fournir plus de détails (maximum de 300 caractères)" -%} + {%- assign pft_problem6_note = "Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses électroniques seront supprimés." -%} + {%- assign pft_submit = "Soumettre" -%} + {%- assign pft_submit_message = "Merci de vos commentaires." -%} +{%- endif -%} diff --git a/sites/gc-page-feedback/index.json-ld b/sites/gc-page-feedback/index.json-ld new file mode 100644 index 0000000000..b9e019806d --- /dev/null +++ b/sites/gc-page-feedback/index.json-ld @@ -0,0 +1,44 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Page feedback tool", + "fr": "Outil de rétroaction sur la page" + }, + "description": { + "en": "Page feedback tool for Canada.ca", + "fr": "Outil de rétroaction sur la page pour Canada.ca" + }, + "modified": "2022-12-06", + "componentName": "gc-page-feedback", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Page feedback tool", + "language": "en", + "path": "gc-page-feedback-en.html" + }, + { + "title": "Outil de rétroaction sur la page", + "language": "fr", + "path": "gc-page-feedback-fr.html" + }, + { + "title": "Page feedback tool with custom parameters", + "language": "en", + "path": "gc-page-feedback-custom-en.html" + }, + { + "title": "Outil de rétroaction sur la page avec paramètres personnalisés", + "language": "fr", + "path": "gc-page-feedback-custom-fr.html" + } + ] + } +} diff --git a/sites/page-details/_base.scss b/sites/page-details/_base.scss index 82b9c76262..f1029d6985 100644 --- a/sites/page-details/_base.scss +++ b/sites/page-details/_base.scss @@ -76,15 +76,15 @@ main { } } - .well { - margin: { - left: -$details-identation; - right: -$details-identation; - } - } - details { margin-bottom: 0; + + .well { + margin: { + left: -$details-identation; + right: -$details-identation; + } + } } // Add a top margin on the share button (only if its plugin has initialized). diff --git a/sites/page-details/_screen-md-min.scss b/sites/page-details/_screen-md-min.scss new file mode 100644 index 0000000000..cf064c9a5b --- /dev/null +++ b/sites/page-details/_screen-md-min.scss @@ -0,0 +1,16 @@ +/* + * Share/feedback-specific overrides (medium view and over) + */ + +/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */ +.pagedetails { + div { + &:has( .gc-pft ) { + + { + .wb-share-inited { + margin-top: 21px; + } + } + } + } +} diff --git a/sites/page-details/_screen-sm-min.scss b/sites/page-details/_screen-sm-min.scss new file mode 100644 index 0000000000..086e58e36c --- /dev/null +++ b/sites/page-details/_screen-sm-min.scss @@ -0,0 +1,16 @@ +/* + * Share/feedback-specific overrides (small view and over) + */ + +/* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */ +.pagedetails { + div { + &:has( .gc-pft ) { + + { + .wb-share-inited { + margin-top: 29px; + } + } + } + } +} diff --git a/sites/page-details/includes/footer.html b/sites/page-details/includes/footer.html index 43abe5ae6a..76b3e36c9b 100644 --- a/sites/page-details/includes/footer.html +++ b/sites/page-details/includes/footer.html @@ -1,27 +1,31 @@

{{ i18nText-pageDetails }}

- {%- if page.noReportProblem -%} + {% assign col-modified = "col-xs-12" %} + {%- if page.pageFeedback or page.noReportProblem != true -%} + {% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %} {%- if page.share -%} - {% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %} - {% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %} - {%- else -%} - {% assign col-modified = "col-xs-12" %} + {% assign col-share = "col-sm-4 col-md-3" %} {%- endif -%} {%- else -%} - {% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %} {%- if page.share -%} - {% assign col-share = "col-sm-4 col-md-3" %} + {% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %} + {% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %} {%- endif -%} - {% assign col-modified = "col-xs-12" %} {%- endif -%}
- {%- unless page.noReportProblem -%} + {%- if page.pageFeedback or page.noReportProblem != true -%} - {%- endunless -%} + {%- endif -%} {%- if page.share -%} {%- endif -%} diff --git a/sites/theme.scss b/sites/theme.scss index 32b29ef13b..eb1999684e 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -74,6 +74,7 @@ @import "search/base"; @import "secondary-menu/base"; @import "page-details/base"; +@import "gc-page-feedback/base"; @import "gcweb-menu/base"; @import "authentication/base"; @import "header/base"; @@ -311,6 +312,7 @@ @import "baseline/lists/screen-md-min"; @import "gcweb-menu/screen-md-min"; + @import "page-details/screen-md-min"; @import "wet-boew/src/plugins/feeds/screen-md-min"; @import "wet-boew/src/plugins/tabs/screen-md-min"; @@ -366,6 +368,8 @@ @import "wet-boew/src/base/views/screen-sm-min-to-screen-sm-max"; @import "search/screen-sm-min-to-screen-sm-max"; + @import "page-details/screen-sm-min"; + @import "gc-page-feedback/screen-sm-min"; @import "../templates/campaign/screen-sm-min-to-screen-sm-max"; } @@ -406,6 +410,7 @@ @import "search/print"; @import "secondary-menu/print"; @import "page-details/print"; + @import "gc-page-feedback/print"; @import "wet-boew/src/plugins/footnotes/print"; @import "wet-boew/src/plugins/geomap/print";