Fix styles and add download form

Vizzuality · Oct 28, 2024 · ed50875 · ed50875
1 parent 1953a21
commit ed50875
Show file tree

Hide file tree

Showing 22 changed files with 614 additions and 99 deletions.
diff --git a/app/assets/images/tpi/icons/download.svg b/app/assets/images/tpi/icons/download.svg
diff --git 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
@@ -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
@@ -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
@@ -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;
+    }
+  }
+}