Merge pull request #500 from Vizzuality/app/javascript/section-pages-…

…update-fixes Add sections pages fixes
Vizzuality · Oct 30, 2024 · 7a4f1f1 · 7a4f1f1
2 parents 3bf44b5 + c4c9c86
commit 7a4f1f1
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 10 deletions.
diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss
@@ -20,7 +20,6 @@ $legend-image-width: 60px;
   width: 100%;
   /* CSS GRID */
   display: grid;
-  grid-row-gap: 4px;
   align-items: center;
 
   &--sectors {
@@ -214,7 +213,7 @@ $legend-image-width: 60px;
 .bubble-chart__level {
   border-right: calc(#{$tape-height / 2}) dotted $tape-color;
   position: relative;
-  height: 20%;
+  height: 60%;
 
 }
 

diff --git a/app/assets/stylesheets/tpi/_nested-dropdown.scss b/app/assets/stylesheets/tpi/_nested-dropdown.scss
@@ -34,6 +34,7 @@
   &__title-header {
     display: flex;
     flex-direction: column;
+    font-size: 16px;
 
     small {
       margin-top: -7px;

diff --git a/app/assets/stylesheets/tpi/_selector.scss b/app/assets/stylesheets/tpi/_selector.scss
@@ -12,6 +12,10 @@
       justify-content: space-between;
       cursor: pointer;
 
+      .selector__input {
+        border: 0;
+      }
+
       .selector__value {
         width: 100%;
         margin-right: 16px;

diff --git a/app/assets/stylesheets/tpi/charts/companies_accordion.scss b/app/assets/stylesheets/tpi/charts/companies_accordion.scss
@@ -83,10 +83,10 @@ $tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #9747FF;
       width: 100%;
       font-size: $size-5;
       border-radius: 0;
-      height: 30px;
+      height: 40px;
 
       &:focus {
-        height: 30px;
+        height: 40px;
       }
     }
   }

diff --git a/app/assets/stylesheets/tpi/pages/company.scss b/app/assets/stylesheets/tpi/pages/company.scss
@@ -2,6 +2,14 @@
   .change-view {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
+
+    .buttons {
+      justify-content: end;
+      @include until($desktop) {
+        // flex-direction: column;
+        justify-content: center;
+      }
+    }
   }
 
   .companies-header {
@@ -15,12 +23,15 @@
       color: white;
       line-height: 40px;
       margin-right: 10px;
+      @include until($desktop) {
+        margin-right: 0;
+      }
     }
 
     @include until($desktop) {
-      padding: 0 0.75rem;
+      padding-inline: 0 !important;
       font-size: $size-7;
-      height: 60px;
+      height: auto;
       font-family: $font-family-regular;
     }
   }
@@ -35,6 +46,9 @@
 
   .summary-boxes {
     margin-top: 1.5rem;
+    @include until($desktop) {
+      margin-top: 0;
+    }
   }
 
   .summary-box {

diff --git a/app/assets/stylesheets/tpi/pages/sector.scss b/app/assets/stylesheets/tpi/pages/sector.scss
@@ -32,7 +32,6 @@ $tape-color: rgba(25, 25, 25, 0.1);
       padding-inline: 0 !important;
       font-size: $size-7;
       height: auto;
-      padding-top: 40px;
       font-family: $font-family-regular;
 
     }

diff --git a/app/javascript/components/tpi/charts/bubble/Chart.js b/app/javascript/components/tpi/charts/bubble/Chart.js
@@ -109,7 +109,7 @@ const BubbleChart = ({ levels, sectors }) => {
 
   const levelsSignature = levels && Object.keys(levels[Object.keys(levels)[0]]);
 
-  const GRID_HEIGHT = parsedData.length * SINGLE_CELL_SVG_HEIGHT + 150;
+  const GRID_HEIGHT = parsedData.length * SINGLE_CELL_SVG_HEIGHT + 120;
 
   return (
     <div className="is-hidden-touch">
@@ -170,7 +170,7 @@ const BubbleChart = ({ levels, sectors }) => {
                   x1="1"
                   y1="0.984375"
                   x2="1"
-                  y2="1050"
+                  y2={GRID_HEIGHT}
                   stroke="#D8D8D8"
                   strokeLinecap="round"
                   strokeLinejoin="round"

diff --git a/app/views/tpi/companies/show.html.erb b/app/views/tpi/companies/show.html.erb
@@ -31,7 +31,7 @@
 
   <% if @company.cp_alignment_region.present? %>
     <section class="container change-view">
-      <div class="buttons has-addons" style="justify-content: flex-end;">
+      <div class="buttons has-addons">
         <%= link_to "Global benchmarks", {view: nil}, class: "button #{!regional_view ? 'is-primary' : 'is-secondary'}" %>
         <%= link_to "Regional benchmarks", {view: 'regional'}, class: "button #{regional_view ? 'is-primary' : 'is-secondary'}" %>
       </div>