From 77cb361a564eab53f12f116e832ea0be37151b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= Date: Thu, 31 Oct 2024 15:10:18 +0100 Subject: [PATCH 1/2] Add sticky header and other design reviews --- app/assets/stylesheets/tpi/_bubble-chart.scss | 57 ++++++++++--------- .../stylesheets/tpi/_dropdown-selector.scss | 2 +- .../stylesheets/tpi/_mq_beta_scores.scss | 5 +- .../tpi/charts/cp-all-sectors.scss | 1 + .../tpi/charts/cp-performance.scss | 2 +- .../stylesheets/tpi/pages/banks-index.scss | 2 +- app/assets/stylesheets/tpi/pages/company.scss | 9 ++- app/assets/stylesheets/tpi/pages/sector.scss | 15 ++--- .../stylesheets/tpi/pages/sectors-index.scss | 12 +++- app/javascript/components/tpi/BaseTooltip.js | 2 +- app/javascript/components/tpi/InfoTooltip.js | 2 +- .../tpi/charts/mq-sector-pie/Chart.js | 2 +- app/views/tpi/shared/_mq_beta_scores.html.erb | 2 +- 13 files changed, 67 insertions(+), 46 deletions(-) diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss index 486ee0786..56e86e56f 100644 --- a/app/assets/stylesheets/tpi/_bubble-chart.scss +++ b/app/assets/stylesheets/tpi/_bubble-chart.scss @@ -21,6 +21,7 @@ $legend-image-width: 60px; /* CSS GRID */ display: grid; align-items: center; + justify-content: center; &--sectors { grid-template-rows: 144px auto; @@ -61,12 +62,6 @@ $legend-image-width: 60px; } } -.bubble-chart__container--banks { - .bubble-chart__cell { - height: $cell-height-banks; - } -} - .bubble-chart_circle { circle:hover { stroke-width: 2; @@ -155,6 +150,22 @@ $legend-image-width: 60px; } .bubble-chart__container--banks { + .bubble-chart__cell { + height: $cell-height-banks; + border-left: 4px dotted rgba(25, 25, 25, 0.1); + &:first-of-type { + border-left: none; + } + &::after { + background-color: rgba(25, 25, 25, 0.1); + content: ""; + position: absolute; + top: calc(50% - 4px); + height: 8px; + width: calc(100% + 4px); + } + } + .bubble-chart__title-container { position: absolute; top: -50px; @@ -168,6 +179,20 @@ $legend-image-width: 60px; font-size: 16px; font-weight: bold; } + .bubble-chart__level-title { + font-family: $font-family-bold; + font-size: 12px; + color: $black; + } + + .bubble-chart__level { + text-align: center; + padding-left: 0px; + } + + .bubble-chart__legend-container + .bubble-chart__level { + text-align: left; + } } .bubble-chart_circle { @@ -231,26 +256,6 @@ $legend-image-width: 60px; } } -.bubble-chart__container--banks { - .bubble-chart__level-title { - font-family: $font-family-bold; - font-size: 12px; - color: $black; - } - - .bubble-chart__level { - text-align: center; - } - - .bubble-chart__legend-container + .bubble-chart__level { - text-align: left; - } - - .bubble-chart__level { - padding-left: 0px; - } -} - .bubble-chart__level-subtitle { color: $grey-dark; font-size: 12px; diff --git a/app/assets/stylesheets/tpi/_dropdown-selector.scss b/app/assets/stylesheets/tpi/_dropdown-selector.scss index bb9f18ea5..9949e11e2 100644 --- a/app/assets/stylesheets/tpi/_dropdown-selector.scss +++ b/app/assets/stylesheets/tpi/_dropdown-selector.scss @@ -91,7 +91,7 @@ $header-height-mobile: 60px; left: calc(-1 * #{$box-shadow}); width: calc(100% + (2 * #{$box-shadow})); // 60px = 2 x 30px for box shadow from left and right margin-top: 20px; - z-index: 1; + z-index: 15; overflow: hidden; } diff --git a/app/assets/stylesheets/tpi/_mq_beta_scores.scss b/app/assets/stylesheets/tpi/_mq_beta_scores.scss index b668ee5d3..1129cf0e0 100644 --- a/app/assets/stylesheets/tpi/_mq_beta_scores.scss +++ b/app/assets/stylesheets/tpi/_mq_beta_scores.scss @@ -2,10 +2,10 @@ display: flex; flex-wrap: wrap; flex-direction: row; + align-items: center; &__container { display: flex; - padding: 4px 4px 4px 14px; flex-wrap: wrap; @include until($desktop) { padding: 0; @@ -47,6 +47,8 @@ .button { + height: 36px !important; + @include until($desktop) { width: 50%; height: 40px; @@ -86,6 +88,7 @@ .button { background-color: $blue; + height: 36px !important; } @include until($desktop) { diff --git a/app/assets/stylesheets/tpi/charts/cp-all-sectors.scss b/app/assets/stylesheets/tpi/charts/cp-all-sectors.scss index 87c4c3b6d..37206781b 100644 --- a/app/assets/stylesheets/tpi/charts/cp-all-sectors.scss +++ b/app/assets/stylesheets/tpi/charts/cp-all-sectors.scss @@ -5,6 +5,7 @@ .chart--cp-all-sectors { justify-content: unset; + margin-bottom: 50px; div[data-highcharts-chart] { width: 100%; diff --git a/app/assets/stylesheets/tpi/charts/cp-performance.scss b/app/assets/stylesheets/tpi/charts/cp-performance.scss index 95208bb8a..e37ccfde6 100644 --- a/app/assets/stylesheets/tpi/charts/cp-performance.scss +++ b/app/assets/stylesheets/tpi/charts/cp-performance.scss @@ -98,7 +98,7 @@ .chart--cp-performance { @import 'chart-company-selector'; - margin-top: 10px; + margin-block: 50px; justify-content: unset; flex-flow: column; diff --git a/app/assets/stylesheets/tpi/pages/banks-index.scss b/app/assets/stylesheets/tpi/pages/banks-index.scss index 529bab25c..bea658766 100644 --- a/app/assets/stylesheets/tpi/pages/banks-index.scss +++ b/app/assets/stylesheets/tpi/pages/banks-index.scss @@ -60,7 +60,7 @@ .dropdown-selector-wrapper { background-color: $blue; - + transform: translateY(-1px); .dropdown-selector__container { @include desktop { padding: $container-top-padding $container-side-padding 40px $container-side-padding; diff --git a/app/assets/stylesheets/tpi/pages/company.scss b/app/assets/stylesheets/tpi/pages/company.scss index 58267c76c..667c792dd 100644 --- a/app/assets/stylesheets/tpi/pages/company.scss +++ b/app/assets/stylesheets/tpi/pages/company.scss @@ -14,10 +14,14 @@ .companies-header { background: $blue; - - height: 100px; + // height: 100px; + min-height: 76px; display: flex; align-items: center; + position: sticky; + top: 0; + z-index: 10; + transform: translateY(-1px); a { color: white; @@ -33,6 +37,7 @@ font-size: $size-7; height: auto; font-family: $font-family-regular; + min-height: 76px; } } diff --git a/app/assets/stylesheets/tpi/pages/sector.scss b/app/assets/stylesheets/tpi/pages/sector.scss index 59fcffd4f..b50c9176a 100644 --- a/app/assets/stylesheets/tpi/pages/sector.scss +++ b/app/assets/stylesheets/tpi/pages/sector.scss @@ -14,11 +14,14 @@ $tape-color: rgba(25, 25, 25, 0.1); .sectors-header { background: $blue; - - height: 100px; display: flex; align-items: center; - + min-height: 76px; + position: sticky; + top: 0; + z-index: 10; + transform: translateY(-1px); + a { color: white; line-height: 40px; @@ -33,7 +36,7 @@ $tape-color: rgba(25, 25, 25, 0.1); font-size: $size-7; height: auto; font-family: $font-family-regular; - + min-height: auto; } } @@ -96,7 +99,7 @@ $tape-color: rgba(25, 25, 25, 0.1); color: white; display: flex; align-items: end; - + > div:first-child { width: 100%; text-align: center; @@ -109,8 +112,6 @@ $tape-color: rgba(25, 25, 25, 0.1); } } - - .mq-level-trend { @include mq-level-trend(20px); background-color: rgba(0, 0, 0, 0.4); diff --git a/app/assets/stylesheets/tpi/pages/sectors-index.scss b/app/assets/stylesheets/tpi/pages/sectors-index.scss index 925f25037..d23fefcf1 100644 --- a/app/assets/stylesheets/tpi/pages/sectors-index.scss +++ b/app/assets/stylesheets/tpi/pages/sectors-index.scss @@ -3,9 +3,14 @@ .sectors-index-page { .sectors-header { background: $blue; - min-height: 100px; + min-height: 76px; display: flex; align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + z-index: 10; + transform: translateY(-1px); a { color: white; @@ -24,9 +29,9 @@ @include until($desktop) { padding: 0; font-size: $size-7; - min-height: 60px; + height: auto; font-family: $font-family-regular; - // transform: translateY(-1px); + min-height: 76px; } } @@ -49,6 +54,7 @@ font-weight: bold; line-height: 40px; margin-bottom: 80px; + font-size: 28px !important; } @include until($desktop) { diff --git a/app/javascript/components/tpi/BaseTooltip.js b/app/javascript/components/tpi/BaseTooltip.js index 370bc74c7..9cee49dc0 100644 --- a/app/javascript/components/tpi/BaseTooltip.js +++ b/app/javascript/components/tpi/BaseTooltip.js @@ -28,7 +28,7 @@ BaseTooltip.propTypes = { BaseTooltip.defaultProps = { trigger: ( - ? + i ) }; diff --git a/app/javascript/components/tpi/InfoTooltip.js b/app/javascript/components/tpi/InfoTooltip.js index c1d840178..574a6079a 100644 --- a/app/javascript/components/tpi/InfoTooltip.js +++ b/app/javascript/components/tpi/InfoTooltip.js @@ -17,7 +17,7 @@ InfoTooltip.propTypes = { InfoTooltip.defaultProps = { trigger: ( - ? + i ), html: false }; diff --git a/app/javascript/components/tpi/charts/mq-sector-pie/Chart.js b/app/javascript/components/tpi/charts/mq-sector-pie/Chart.js index 2bce7ebf3..eba910eea 100644 --- a/app/javascript/components/tpi/charts/mq-sector-pie/Chart.js +++ b/app/javascript/components/tpi/charts/mq-sector-pie/Chart.js @@ -78,7 +78,7 @@ function MQSectorChart({ dataUrl }) {

Level {item.name}

?} + trigger={i} />

diff --git a/app/views/tpi/shared/_mq_beta_scores.html.erb b/app/views/tpi/shared/_mq_beta_scores.html.erb index 5c13c23fd..452a4747f 100644 --- a/app/views/tpi/shared/_mq_beta_scores.html.erb +++ b/app/views/tpi/shared/_mq_beta_scores.html.erb @@ -4,7 +4,7 @@ style: "min-width: 0;") { "Current V5.0" } %>

- MQ Methodology + <%= link_to disable_beta_data_tpi_mq_assessments_path, class: class_names('button', 'is-primary', 'no-margin', 'weight-normal': session[:enable_beta_mq_assessments], 'active': !session[:enable_beta_mq_assessments]), style: "min-width: 0;" do %> From ccb887a65b6d1d31522f7c806471b21eb12be2ba Mon Sep 17 00:00:00 2001 From: martintomas Date: Fri, 1 Nov 2024 09:46:00 +0100 Subject: [PATCH 2/2] test: fir sectors test --- spec/system/public/tpi/sectors_spec.rb | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/spec/system/public/tpi/sectors_spec.rb b/spec/system/public/tpi/sectors_spec.rb index 8a714baf6..d74d7264d 100644 --- a/spec/system/public/tpi/sectors_spec.rb +++ b/spec/system/public/tpi/sectors_spec.rb @@ -44,11 +44,11 @@ it 'loads all elements' do # bubble chart loads within '.chart--mq-sector-pie-chart' do - expect(page).to have_text('Level 0 ? 0 companies', normalize_ws: true) # Level 0 0 companies - expect(page).to have_text('Level 1 ? 2 companies', normalize_ws: true) # Level 1 2 companies - expect(page).to have_text('Level 2 ? 0 companies', normalize_ws: true) # Level 2 0 companies - expect(page).to have_text('Level 3 ? 2 companies', normalize_ws: true) # Level 3 2 companies - expect(page).to have_text('Level 4 ? 1 company', normalize_ws: true) # Level 4 1 company + expect(page).to have_text('Level 0 i 0 companies', normalize_ws: true) # Level 0 0 companies + expect(page).to have_text('Level 1 i 2 companies', normalize_ws: true) # Level 1 2 companies + expect(page).to have_text('Level 2 i 0 companies', normalize_ws: true) # Level 2 0 companies + expect(page).to have_text('Level 3 i 2 companies', normalize_ws: true) # Level 3 2 companies + expect(page).to have_text('Level 4 i 1 company', normalize_ws: true) # Level 4 1 company expect(page).to have_text('Level 5') expect(page).to have_selector('.companies-size', text: '5') end