From 39a52e23d26061d94e791b8f1590a7dee352919d Mon Sep 17 00:00:00 2001 From: Jeremy Prevost Date: Thu, 1 Aug 2024 09:10:54 -0400 Subject: [PATCH 1/4] Adds panel for NPS surveys Why are these changes being introduced: * UX has requested this to gather feedback from users Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/PW-102 How does this address that need: * Creates display panel that is configured via ENV to allow for making changes to content without redeploys of code Document any side effects to this change: * Added some newish sqlite files to gitignore --- README.md | 6 ++++++ app/assets/stylesheets/_survey.scss | 18 ++++++++++++++++++ app/assets/stylesheets/application.scss | 1 + app/views/search/_nps_feedback.html.erb | 7 +++++++ app/views/search/bento.html.erb | 2 ++ 5 files changed, 34 insertions(+) create mode 100644 app/assets/stylesheets/_survey.scss create mode 100644 app/views/search/_nps_feedback.html.erb diff --git a/README.md b/README.md index 9d5458b0..cb7390be 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,12 @@ to construct thumbnail URLs. - `TACOS_URL`: The GraphQL endpoint for the [TACOS](https://github.com/mitlibraries/tacos/) application. - `TIMDEX_TIMEOUT`: value to override the 6 second default for TIMDEX timeout. +### NPS Survey Environment Variables (optional) + +- `NPS_BLURB`: Text to display before the survey link. Survey link will still display if not provided. +- `NPS_LINK_TEXT`: Survey link text. If not present, survey does not display. +- `NPS_URL`: Survey link URL. If not present, survey does not display. + ## Confirming functionality after updating dependencies This application has good code coverage, so most issues are detected by just running tests normally: diff --git a/app/assets/stylesheets/_survey.scss b/app/assets/stylesheets/_survey.scss new file mode 100644 index 00000000..a7841f3c --- /dev/null +++ b/app/assets/stylesheets/_survey.scss @@ -0,0 +1,18 @@ +.nps-feedback { + margin-top: 1em; + background-color: #333; + color: #fff; + text-align: center; + + a { + color: #00C8FF + } + + a:hover { + color: #00C800 + } + + a:active { + color: #FF00FF + } +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 82db1387..a4ec2e53 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -7,4 +7,5 @@ @import "_search"; @import "_results"; @import "_hint"; +@import "_survey"; @import "_print"; diff --git a/app/views/search/_nps_feedback.html.erb b/app/views/search/_nps_feedback.html.erb new file mode 100644 index 00000000..7b21669e --- /dev/null +++ b/app/views/search/_nps_feedback.html.erb @@ -0,0 +1,7 @@ +<% return unless ENV.fetch('NPS_URL', false).present? %> +<% return unless ENV.fetch('NPS_LINK_TEXT', false).present? %> + +
+ <%= ENV.fetch('NPS_BLURB', nil) %> + <%= ENV.fetch('NPS_LINK_TEXT') %> +
diff --git a/app/views/search/bento.html.erb b/app/views/search/bento.html.erb index a205fa61..43f0de14 100644 --- a/app/views/search/bento.html.erb +++ b/app/views/search/bento.html.erb @@ -23,6 +23,8 @@

Not finding what you need? <%= link_to('Ask us', 'https://libraries.mit.edu/ask/') %>

+<%= render partial: "nps_feedback" if ENV.fetch('NPS_URL', false).present? %> +
From 03d1be2408819d2eb0bad043de828f98f7e430dd Mon Sep 17 00:00:00 2001 From: jazairi <16103405+jazairi@users.noreply.github.com> Date: Thu, 8 Aug 2024 15:01:45 -0400 Subject: [PATCH 2/4] Changes from pairing session Stephanie and I paired today to fine-tune the design a bit. The goals of the session were to fix the padding, reduce the font size in large viewports, and ensure that the text didn't wrap beyond two lines in smaller viewports. We made the following changes: * Removes `copy-lead` and `box-content` classes. * Sets padding to `20px 10px`. * Sets font-size to `$fs-large` (20px) at viewport widths larger than our medium breakpoint, and `$fs-base` (16px) at smaller widths. * Explicitly sets `display: block`. (This rule is implied/inherited, but it felt useful to declare it because inline-block does weird things.) Other things we tried but decided not to do: * Put `display: block` and `text-wrap: nowrap` on the link in smaller viewports. This mostly looked good, but squeezed the spacing from the sides. * Leave the font size as `$fs-large` in smaller viewports. We were able to do this without wrapping by reducing the padding, but it was visually out of proportion. Co-authored-by: Stephanie Hartman --- app/assets/stylesheets/_survey.scss | 33 +++++++++++++++---------- app/views/search/_nps_feedback.html.erb | 6 ++--- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/app/assets/stylesheets/_survey.scss b/app/assets/stylesheets/_survey.scss index a7841f3c..64bd44ba 100644 --- a/app/assets/stylesheets/_survey.scss +++ b/app/assets/stylesheets/_survey.scss @@ -1,18 +1,25 @@ .nps-feedback { - margin-top: 1em; - background-color: #333; - color: #fff; - text-align: center; + margin-top: 1em; + padding: 20px 10px; + background-color: #333; + color: #fff; + text-align: center; + font-size: $fs-large; + display: block; - a { - color: #00C8FF - } + a { + color: #00C8FF; + } - a:hover { - color: #00C800 - } + a:hover { + color: #00C800 + } - a:active { - color: #FF00FF - } + a:active { + color: #FF00FF + } + + @media (max-width: $bp-screen-md) { + font-size: $fs-base; + } } diff --git a/app/views/search/_nps_feedback.html.erb b/app/views/search/_nps_feedback.html.erb index 7b21669e..868a8742 100644 --- a/app/views/search/_nps_feedback.html.erb +++ b/app/views/search/_nps_feedback.html.erb @@ -1,7 +1,7 @@ <% return unless ENV.fetch('NPS_URL', false).present? %> <% return unless ENV.fetch('NPS_LINK_TEXT', false).present? %> -
- <%= ENV.fetch('NPS_BLURB', nil) %> - <%= ENV.fetch('NPS_LINK_TEXT') %> +
+ <%= ENV.fetch('NPS_BLURB', nil) %> + <%= ENV.fetch('NPS_LINK_TEXT') %>
From 31b8a5b3e258c18f08dcb7dd6b683a121ba4ad0f Mon Sep 17 00:00:00 2001 From: jazairi <16103405+jazairi@users.noreply.github.com> Date: Thu, 29 Aug 2024 17:52:39 -0400 Subject: [PATCH 3/4] Refactor SCSS to use nesting and color variables --- app/assets/stylesheets/_survey.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/_survey.scss b/app/assets/stylesheets/_survey.scss index 64bd44ba..95dc6de1 100644 --- a/app/assets/stylesheets/_survey.scss +++ b/app/assets/stylesheets/_survey.scss @@ -8,15 +8,13 @@ display: block; a { - color: #00C8FF; - } - - a:hover { - color: #00C800 - } - - a:active { - color: #FF00FF + color: $blue-bright; + &:hover { + color: $green; + } + &:active { + color: $magenta; + } } @media (max-width: $bp-screen-md) { From 42b63b15ae9d333344750f872b830d7a1284936d Mon Sep 17 00:00:00 2001 From: jazairi <16103405+jazairi@users.noreply.github.com> Date: Thu, 29 Aug 2024 17:58:24 -0400 Subject: [PATCH 4/4] Changes additional colors to variables --- app/assets/stylesheets/_survey.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/_survey.scss b/app/assets/stylesheets/_survey.scss index 95dc6de1..d8faecb3 100644 --- a/app/assets/stylesheets/_survey.scss +++ b/app/assets/stylesheets/_survey.scss @@ -1,8 +1,8 @@ .nps-feedback { margin-top: 1em; padding: 20px 10px; - background-color: #333; - color: #fff; + background-color: $gray-d1; + color: $white; text-align: center; font-size: $fs-large; display: block;