diff --git a/Gemfile.lock b/Gemfile.lock index 397d68a14..12ed4677f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -412,8 +412,7 @@ GEM actionpack (>= 5.2) railties (>= 5.2) retriable (3.1.2) - rexml (3.3.6) - strscan + rexml (3.3.9) roo (2.10.0) nokogiri (~> 1) rubyzip (>= 1.3.0, < 3.0.0) @@ -505,7 +504,6 @@ GEM sshkit (1.21.2) net-scp (>= 1.1.2) net-ssh (>= 2.8.0) - strscan (3.1.0) super_diff (0.9.0) attr_extras (>= 6.2.4) diff-lcs diff --git a/app/assets/images/tpi/icons/download.svg b/app/assets/images/tpi/icons/download.svg new file mode 100644 index 000000000..caeef0de1 --- /dev/null +++ b/app/assets/images/tpi/icons/download.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/tpi.scss b/app/assets/stylesheets/tpi.scss index 5ad486cab..904bb7d6f 100644 --- a/app/assets/stylesheets/tpi.scss +++ b/app/assets/stylesheets/tpi.scss @@ -44,6 +44,7 @@ @import "tpi/mq_beta_scores"; @import "tpi/mq-beta-modal"; @import "tpi/selector"; +@import "tpi/download-form-modal"; @import "tpi/emissions-chart"; @import "tpi/ascor-benchmarks"; @import "tpi/pages/*"; diff --git a/app/assets/stylesheets/tpi/_base-tooltip.scss b/app/assets/stylesheets/tpi/_base-tooltip.scss index c2c9eacce..c2a9cc3ef 100644 --- a/app/assets/stylesheets/tpi/_base-tooltip.scss +++ b/app/assets/stylesheets/tpi/_base-tooltip.scss @@ -9,6 +9,9 @@ div[data-react-class=BaseTooltip] { .base-tooltip { position: relative; + >div:first-child { + height: auto; + } &__default-trigger { font-family: $font-family-bold; diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss index 5eadb3e46..72ac7593c 100644 --- a/app/assets/stylesheets/tpi/_bubble-chart.scss +++ b/app/assets/stylesheets/tpi/_bubble-chart.scss @@ -1,9 +1,9 @@ @import "colors"; @import "typography"; -$tape-height: 8px; +$tape-height: 1px; $tape-color: rgba(25, 25, 25, 0.1); -$cell-height: 80px; +$cell-height: 60px; $cell-height-banks: 100px; $legend-image-width: 60px; @@ -13,18 +13,18 @@ $legend-image-width: 60px; color: $blue-darker; margin-top: 28px; line-height: 20px; + margin-bottom: 20px; } .bubble-chart__container { width: 100%; - padding: 50px 0; /* CSS GRID */ display: grid; grid-row-gap: 4px; align-items: center; &--sectors { - grid-template-rows: 150px auto; + grid-template-rows: 144px auto; .last { border-right: none; @@ -46,14 +46,13 @@ $legend-image-width: 60px; height: $cell-height; display: flex; align-items: center; - border-right: calc(#{$tape-height / 2}) dotted $tape-color; & > *:first-child { margin: auto; z-index: 1; } - &::before { + &::after { background-color: $tape-color; content: ""; position: absolute; @@ -72,13 +71,13 @@ $legend-image-width: 60px; .bubble-chart_circle { circle:hover { stroke-width: 2; - stroke: #FFDD49; + stroke: $yellow; } } .bubble-chart_tooltip { z-index: 10; background-color: $white; - border: 1.5px solid $black; + border: 1.25px solid $black; padding: 20px; font-size: 14px; width: max-content; @@ -98,15 +97,15 @@ $legend-image-width: 60px; margin-block: 8px 20px; } &_text { - display: grid; - grid-template-columns: repeat(2, 1fr); + columns: 2; margin-block: 12px; font-size: 16px; max-height: 200px; overflow-y: auto; - gap: 12px 20px; - + column-gap: 40px; + .bubble-chart_tooltip_list_item { + margin-top: 12px; margin-left: 20px; a { text-decoration: underline; @@ -115,11 +114,12 @@ $legend-image-width: 60px; } } - button { + .button.is-secondary.is-small { float: right; margin-top: 20px; height: 40px !important; width: 62px !important; + min-width: auto; } } @@ -214,14 +214,15 @@ $legend-image-width: 60px; .bubble-chart__level { border-right: calc(#{$tape-height / 2}) dotted $tape-color; position: relative; - height: 100%; - padding-left: 20px; + height: 20%; + } .bubble-chart__container--sectors { .bubble-chart__level-container { position: absolute; top: 20%; + padding-inline: 16px 10px; } .bubble-chart__level-title { @@ -259,5 +260,5 @@ $legend-image-width: 60px; .bubble-chart__row-link { color: $blue-dark; text-align: right; - padding-right: 50px; + padding-right: 16px; } diff --git a/app/assets/stylesheets/tpi/_download-form-modal.scss b/app/assets/stylesheets/tpi/_download-form-modal.scss new file mode 100644 index 000000000..f5a433ff5 --- /dev/null +++ b/app/assets/stylesheets/tpi/_download-form-modal.scss @@ -0,0 +1,136 @@ +@import "colors"; +@import "typography"; + +.download { + button { + margin-right: 10px; + } +} +.download-form { + > * { + margin-bottom: 20px; + } + h2 { + font-size: 20px !important; + font-weight: bold; + } + .--mandatory { + color: $red; + } + .content { + input[type="text"] { + height: 40px; + width: 100%; + padding-inline: 10px; + border-radius: 0; + border: 1px solid #191919; + &::placeholder { + color: #595b5d; + font-size: 12px; + } + } + .text-inputs { + margin-bottom: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + @include until($breakpoint-desktop) { + grid-template-columns: 1fr; + } + label { + display: block; + line-height: 24px; + margin-bottom: 9px; + } + .selector__container { + list-style: none; + margin: 0; + .selector__header { + height: 40px; + } + .selector__input { + border: 0; + background-color: $white !important; + } + .selector__value { + font-size: 14px; + } + .selector__options { + margin: 0; + transform: translateY(-4px); + list-style: none; + max-height: 300px; + overflow-y: auto; + .selector__option { + font-size: 14px; + padding-block: 5px; + } + } + } + &.--full { + .content__input { + column-span: 2; + } + } + } + .checkbox-inputs { + display: flex; + flex-wrap: wrap; + gap: 16px 20px; + margin-bottom: 16px; + .content__input { + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 12px; + + input { + width: 24px; + height: 24px; + border-radius: 0; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid $grey-dark; + appearance: none; + -webkit-appearance: none; + &::before { + content: ""; + width: 12px; + height: 12px; + display: block; + transform: scale(0); + background-color: $blue; + } + &:checked { + &::before { + transform: scale(1); + } + } + } + } + } + } + .other-purposes-text { + &.hidden { + display: none; + } + } + .error { + color: $red; + font-size: 12px; + margin-top: 10px; + } + .form-buttons { + margin-top: 20px; + width: 50%; + display: flex; + gap: 8px; + button { + min-width: auto !important; + } + .is-primary { + flex-grow: 1; + } + } +} diff --git a/app/assets/stylesheets/tpi/_mq_beta_scores.scss b/app/assets/stylesheets/tpi/_mq_beta_scores.scss index b550309c9..b668ee5d3 100644 --- a/app/assets/stylesheets/tpi/_mq_beta_scores.scss +++ b/app/assets/stylesheets/tpi/_mq_beta_scores.scss @@ -3,20 +3,26 @@ flex-wrap: wrap; flex-direction: row; - @include until($desktop) { - flex-direction: column; - } - &__container { display: flex; - border: 1px solid $white; padding: 4px 4px 4px 14px; + flex-wrap: wrap; + @include until($desktop) { + padding: 0; + width: 100%; + margin-inline: 12px; + } } &__text { color: $white; line-height: 40px; margin-right: 10px; + @include until($desktop) { + flex-direction: column; + width: 100%; + // padding-inline: 12px; + } } &__divider { @@ -27,13 +33,34 @@ } } + a { + padding: 10px 12px; + &.button:not(.active):hover { + text-decoration: underline; + background-color: transparent; + } + &:first-of-type { + order: 3; + margin-right: 12px; + } + } + .button { - background-color: rgba($white ,0.2); - + @include until($desktop) { + width: 50%; + height: 40px; + margin-right: 0; + } &.active { - background-color: $white; - color: $blue-dark; + background-color: $blue-dark; + transform: translateY(1px); + color: $white; + @include until($desktop) { + background-color: $white; + color: $blue; + border-color: transparent; + } } &:last-child { @@ -42,6 +69,7 @@ } &__beta-button { + order: 2; &.disabled { opacity: 0.5; cursor: not-allowed; @@ -49,18 +77,6 @@ } } - &__beta-button:before { - content: ""; - width: 9px; - height: 9px; - border-radius: 50%; - margin-right: 5px; - display: inline-block; - background-color: $tpi-level5-background-color; - vertical-align: middle; - border: 1px solid $white; - } - &__download-button { flex-grow: 4; text-align: right; @@ -73,7 +89,26 @@ } @include until($desktop) { - margin-bottom: 10px; + background-color: #fff; + padding-inline: 12px; + padding-block: 40px; + flex-direction: column; + .button { + background-color: $white; + color: $blue !important; + border-color: $blue !important; + width: 100%; + &::before { + content: ' '; + width: 16px; + height: 16px; + background-image: image-url("tpi/icons/download.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + + } } } } diff --git a/app/assets/stylesheets/tpi/buttons.scss b/app/assets/stylesheets/tpi/buttons.scss index d8e3dbfeb..12d8384c5 100644 --- a/app/assets/stylesheets/tpi/buttons.scss +++ b/app/assets/stylesheets/tpi/buttons.scss @@ -95,6 +95,16 @@ $button-border-width: 4px; justify-content: center; align-items: center; + &.is-info { + height: 20px; + width: 20px; + min-width: auto; + padding: 0; + background-color: transparent; + border-width: 2px; + margin-top: 2px; + } + &.is-small { border-radius: 0; height: 30px; diff --git a/app/assets/stylesheets/tpi/charts/companies_accordion.scss b/app/assets/stylesheets/tpi/charts/companies_accordion.scss index e336446e6..3713a8f9e 100644 --- a/app/assets/stylesheets/tpi/charts/companies_accordion.scss +++ b/app/assets/stylesheets/tpi/charts/companies_accordion.scss @@ -4,7 +4,7 @@ $tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #9747FF; .mobile_bubble-chart__container { - margin: 0 -0.75rem; + margin: 0 -0.75rem 70px; padding: 0; .mq-sector-pie-chart-title { diff --git a/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss b/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss index 41a96d68d..59bb25773 100644 --- a/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss +++ b/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss @@ -101,7 +101,7 @@ $tpi-pie-chart-colors: #86a9f9 #5587f7 #2465f5 #0a4bdc #083aab #9747ff; row-gap: 20px; @include until($desktop) { column-gap: 32px; - width: auto; + width: 100%; } .chart-legend-item { display: flex; diff --git a/app/assets/stylesheets/tpi/pages/sector.scss b/app/assets/stylesheets/tpi/pages/sector.scss index baf4ea746..065f50c91 100644 --- a/app/assets/stylesheets/tpi/pages/sector.scss +++ b/app/assets/stylesheets/tpi/pages/sector.scss @@ -23,13 +23,18 @@ $tape-color: rgba(25, 25, 25, 0.1); color: white; line-height: 40px; margin-right: 10px; + @include until($desktop) { + margin-right: 0; + } } @include until($desktop) { - padding-inline: 0 0.75rem; + padding-inline: 0 !important; font-size: $size-7; - height: 60px; + height: auto; + padding-top: 40px; font-family: $font-family-regular; + } } @@ -89,13 +94,10 @@ $tape-color: rgba(25, 25, 25, 0.1); &__companies { line-height: 1.25; - // height: 150px; - color: white; - display: flex; align-items: end; - + > div:first-child { width: 100%; text-align: center; @@ -103,6 +105,9 @@ $tape-color: rgba(25, 25, 25, 0.1); font-size: 32px; font-weight: 700; cursor: pointer; + &:hover { + border: 2px solid $yellow; + } } @@ -145,6 +150,7 @@ $tape-color: rgba(25, 25, 25, 0.1); display: flex; justify-content: space-between; margin-bottom: 15px; + padding-top: 50px; > p { display: none; @@ -190,7 +196,7 @@ $tape-color: rgba(25, 25, 25, 0.1); .sector-level__popover { z-index: 10; background-color: $white; - border: 1.5px solid $black; + border: 1.25px solid $black; padding: 20px; font-size: 14px; width: 430px; @@ -216,25 +222,25 @@ $tape-color: rgba(25, 25, 25, 0.1); margin-block: 8px 20px; } &_text { - display: grid; - grid-template-columns: repeat(2, 1fr); + columns: 2; margin-block: 12px; font-size: 16px; max-height: 200px; overflow-y: auto; - gap: 12px 20px; - padding-left: 2rem; + column-gap: 40px; } &_list_item { + margin-left: 20px; a { text-decoration: underline; color: black; } } - button { + .button.is-secondary.is-small { float: right; margin-top: 20px; height: 40px !important; width: 62px !important; + min-width: auto; } } diff --git a/app/assets/stylesheets/tpi/pages/sectors-index.scss b/app/assets/stylesheets/tpi/pages/sectors-index.scss index dcdbb9415..925f25037 100644 --- a/app/assets/stylesheets/tpi/pages/sectors-index.scss +++ b/app/assets/stylesheets/tpi/pages/sectors-index.scss @@ -22,10 +22,11 @@ } @include until($desktop) { - padding: 0 0.75rem; + padding: 0; font-size: $size-7; min-height: 60px; font-family: $font-family-regular; + // transform: translateY(-1px); } } @@ -33,7 +34,7 @@ margin-top: 70px; @include until($desktop) { - margin-top: 40px; + margin-top: 0px; padding: 0 0.75rem; } } diff --git a/app/controllers/tpi/sectors_controller.rb b/app/controllers/tpi/sectors_controller.rb index 086105b29..adecdf8f0 100644 --- a/app/controllers/tpi/sectors_controller.rb +++ b/app/controllers/tpi/sectors_controller.rb @@ -170,7 +170,7 @@ def companies_scope(params) end def permitted_email_params - params.permit(:email, :job_title, :forename, :surname, :location, :organisation, purposes: []) + params.permit(:email, :job_title, :forename, :surname, :location, :organisation, :other_purpose, purposes: []) end end end diff --git a/app/javascript/components/tpi/DownloadFormModal.jsx b/app/javascript/components/tpi/DownloadFormModal.jsx new file mode 100644 index 000000000..90bf7f58d --- /dev/null +++ b/app/javascript/components/tpi/DownloadFormModal.jsx @@ -0,0 +1,298 @@ +import React, { useState, useRef, useEffect, useMemo } from 'react'; + +import PropTypes from 'prop-types'; +import { getNames } from 'country-list'; +import { Modal } from './Modal'; +import { OverlayProvider } from '@react-aria/overlays'; +import Select from './Select'; +import classNames from 'classnames'; + +const Field = ({ label, name, value, onChange, type, required, error, placeholder, children }) => { + const ref = useRef(null); + + useEffect(() => { + if (error) { + ref.current.focus(); + } + }, [error]); + + return ( +
+ I have read the Use of TPI Centre Data and will not use the data for + commercial purposes unless I have sought prior permission. +
+All + fields below are mandatory. +
+{item.value} {item.value === 1 ? 'company' : 'companies'} - {item.percentage}% diff --git a/app/views/data_download_mailer/send_download_file_info_email.html.erb b/app/views/data_download_mailer/send_download_file_info_email.html.erb index 3fd2a9a18..6e05995b2 100644 --- a/app/views/data_download_mailer/send_download_file_info_email.html.erb +++ b/app/views/data_download_mailer/send_download_file_info_email.html.erb @@ -10,6 +10,10 @@