Add sticky header and other design reviews

Vizzuality · Oct 31, 2024 · 77cb361 · 77cb361
1 parent 7a4f1f1
commit 77cb361
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -28,7 +28,7 @@ BaseTooltip.propTypes = {
 
 BaseTooltip.defaultProps = {
   trigger: (
-    <span className="base-tooltip__default-trigger">?</span>
+    <span className="base-tooltip__default-trigger">i</span>
   )
 };
 

diff --git a/app/javascript/components/tpi/InfoTooltip.js b/app/javascript/components/tpi/InfoTooltip.js
@@ -17,7 +17,7 @@ InfoTooltip.propTypes = {
 
 InfoTooltip.defaultProps = {
   trigger: (
-    <span className="base-tooltip__default-trigger">?</span>
+    <span className="base-tooltip__default-trigger">i</span>
   ),
   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
@@ -78,7 +78,7 @@ function MQSectorChart({ dataUrl }) {
                       <p>Level {item.name}</p>
                       <InfoTooltip
                         content={LEVELS_SUBTITLES[index]}
-                        trigger={<span className="button is-secondary is-info" type="button">?</span>}
+                        trigger={<span className="button is-secondary is-info" type="button">i</span>}
                       />
                     </div>
                     <p className="chart-legend-item__value">

diff --git 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" } %>
 
   <div class="mq-beta-scores__container">
-    <span class="mq-beta-scores__text">MQ Methodology</span>
+
     <%= 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 %>