refactoring: Updating styles of ASCOR pages based on feedback

Vizzuality · Oct 13, 2023 · 66cbfd3 · 66cbfd3
1 parent fd89003
commit 66cbfd3
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 44 deletions.
diff --git a/app/assets/images/tpi/ascor/circles_3.svg b/app/assets/images/tpi/ascor/circles_3.svg
diff --git a/app/assets/stylesheets/tpi/_emissions-chart.scss b/app/assets/stylesheets/tpi/_emissions-chart.scss
@@ -10,14 +10,14 @@
     justify-content: space-between;
 
     &.assessments {
-      margin-bottom: 30px;
+      margin-top: 10px;
+      margin-bottom: 0px;
     }
 
     &__emissions {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
-      flex-wrap: wrap;
     }
 
     &__country-selector {

diff --git a/app/assets/stylesheets/tpi/_publications.scss b/app/assets/stylesheets/tpi/_publications.scss
@@ -114,7 +114,7 @@ $max-lines: 3;
   }
 }
 
-.tpi-sector__promoted-publications, .tpi-banks__promoted-publications {
+.tpi-sector__promoted-publications, .tpi-banks__promoted-publications, .ascor-page__promoted-publications {
   margin-bottom: 30px;
 
   .view-all-btn__container {

diff --git a/app/assets/stylesheets/tpi/_variables.scss b/app/assets/stylesheets/tpi/_variables.scss
@@ -73,6 +73,7 @@ $navbar-dropdown-item-active-background-color: $blue;
 $navbar-bottom-box-shadow-size: 0;
 $ascor-background-color: #242638;
 $ascor-color: #191919;
+$ascor-green: #17B091;
 
 // TAGS
 $tag-background-color: $white;

diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -133,6 +133,14 @@ $see-more-width-tablet: 130px;
     }
   }
 
+  .base-tooltip__default-trigger {
+    background-color: $ascor-green;
+
+    &:hover {
+      background-color: transparentize($ascor-green, 0.4);
+    }
+  }
+
   .bubble-chart-header {
     margin-bottom: 20px;
 
@@ -232,9 +240,20 @@ $see-more-width-tablet: 130px;
     }
   }
 
+  .button {
+    background-color: $ascor-green;
+    color: $white;
+    border: 0;
+
+    &:hover {
+      color: $white;
+      background-color: transparentize($ascor-green, 0.4);
+    }
+  }
+
   .country-assessment {
-    margin-top: 30px;
-    margin-bottom: 30px;
+    margin-top: 60px;
+    margin-bottom: 60px;
 
     &__pillar {
       outline: solid 1px $grey-lighter-medium;
@@ -377,6 +396,11 @@ $see-more-width-tablet: 130px;
       }
     }
 
+    &__break {
+      flex-basis: 100%;
+      height: 0;
+    }
+
     &__metric-block {
       margin-left: 40px;
       padding: 30px 45px 0 45px;
@@ -397,11 +421,6 @@ $see-more-width-tablet: 130px;
         flex-grow:2
       }
 
-      &__break {
-        flex-basis: 100%;
-        height: 0;
-      }
-
       &__text {
         background: $dark;
         padding: 5px 10px;
@@ -486,4 +505,67 @@ $see-more-width-tablet: 130px;
       }
     }
   }
+
+  .contacts {
+    width: 100%;
+    height: 380px;
+    background-color: $ascor-green;
+    position: relative;
+
+    &__icon {
+      background-image: image-url('tpi/ascor/circles_3.svg');
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      position: absolute;
+      display: none;
+
+      @include tablet {
+        background-position-x: calc(50% - 250px);
+        display: block;
+      }
+
+      @include widescreen {
+        background-position-x: 200px;
+      }
+    }
+
+    &__info {
+      padding-top: 80px;
+      margin: 0 auto;
+      width: 400px;
+
+      h3 {
+        font-family: $family-sans-serif;
+        font-size: 24px !important;
+        font-weight: 700;
+        padding: 20px 0;
+      }
+
+      p {
+        font-size: 14px;
+        margin-bottom: 50px
+      }
+
+      .button {
+        background-color: $ascor-background-color;
+        color: $white;
+        display: inline-block;
+
+        &:hover {
+          background-color: $dark;
+          border: 0;
+        }
+      }
+
+      &__link {
+        font-weight: bold;
+        text-decoration: underline;
+      }
+
+      @include tablet {
+        margin: 0 0 0 50%;
+      }
+    }
+  }
 }
diff --git a/app/javascript/components/tpi/AscorRecentEmissions.js b/app/javascript/components/tpi/AscorRecentEmissions.js
@@ -26,46 +26,39 @@ const AscorRecentEmissions = ({
 
   return (
     <>
-      <div className="emissions__filters assessments">
-        <div className="emissions__filters__emissions">
-          <Select
-            options={emissions_metric_filter}
-            onSelect={handleSelect}
-            value={filters.emissions_metric}
-            name="emissions_metric"
-            placeholder="Emissions Metric"
-            label="Emissions Metric"
-          />
-          <Select
-            options={emissions_boundary_filter}
-            onSelect={handleSelect}
-            value={filters.emissions_boundary}
-            name="emissions_boundary"
-            placeholder="Emissions Boundary"
-            label="Emissions Boundary"
-          />
-          <Select
-            options={trend_filters}
-            onSelect={handleSelect}
-            value={filters.trends}
-            name="trends"
-            placeholder="Trends"
-            label="Trends"
-          />
-        </div>
-      </div>
       <div className="country-assessment__metric">
         <div className="country-assessment__metric__title">
           i. What is the country&apos;s most recent emissions level?
         </div>
+        <div className="country-assessment__break" />
+        <div className="emissions__filters assessments">
+          <div className="emissions__filters__emissions">
+            <Select
+              options={emissions_metric_filter}
+              onSelect={handleSelect}
+              value={filters.emissions_metric}
+              name="emissions_metric"
+              placeholder="Emissions Metric"
+              label="Emissions Metric"
+            />
+            <Select
+              options={emissions_boundary_filter}
+              onSelect={handleSelect}
+              value={filters.emissions_boundary}
+              name="emissions_boundary"
+              placeholder="Emissions Boundary"
+              label="Emissions Boundary"
+            />
+          </div>
+        </div>
         { recentEmissions.source && (
           <div className="country-assessment__metric__source">
             <a target="_blank" rel="noreferrer" href={recentEmissions.source}>Source ({recentEmissions.year})</a>
           </div>
         )}
         { recentEmissions.value !== null && (
           <>
-            <div className="country-assessment__metric__break" />
+            <div className="country-assessment__break" />
             <div className="country-assessment__metric__text">
               {recentEmissions.value} {recentEmissions.unit}
             </div>
@@ -76,14 +69,27 @@ const AscorRecentEmissions = ({
         <div className="country-assessment__metric__title">
           ii. What is the country&apos;s most recent emissions trend?
         </div>
+        <div className="country-assessment__break" />
+        <div className="emissions__filters assessments">
+          <div className="emissions__filters__emissions">
+            <Select
+              options={trend_filters}
+              onSelect={handleSelect}
+              value={filters.trends}
+              name="trends"
+              placeholder="Trends"
+              label="Trends"
+            />
+          </div>
+        </div>
         { trend.source && (
           <div className="country-assessment__metric__source">
             <a target="_blank" rel="noreferrer" href={trend.source}>Source ({trend.year})</a>
           </div>
         )}
         { trendValue.value && (
           <>
-            <div className="country-assessment__metric__break" />
+            <div className="country-assessment__break" />
             <div className="country-assessment__metric__text">
               {trendValue.value}
             </div>

diff --git a/app/views/tpi/ascor/_assessment.html.erb b/app/views/tpi/ascor/_assessment.html.erb
@@ -51,7 +51,7 @@
                         </div>
                       <% end %>
                       <% if ascor_assessment_result_for(metric, @assessment).answer.present? %>
-                        <div class="country-assessment__metric__break"></div>
+                        <div class="country-assessment__break"></div>
                         <div class="country-assessment__metric__text">
                           <%= ascor_assessment_result_for(metric, @assessment).answer %>
                         </div>

diff --git a/app/views/tpi/ascor/_contact.html.erb b/app/views/tpi/ascor/_contact.html.erb
@@ -0,0 +1,8 @@
+<div class="contacts">
+  <div class="contacts__icon"></div>
+  <div class="contacts__info">
+    <h3>Get in touch with us for enquiries. </h3>
+    <p>At ASCOR, we are here to help and answer any questions you may have. Contact us at <span class="contacts__info__link">[email protected]</span>.</p>
+    <a href="mailto:[email protected]" class="button">Contact ASCOR</a>
+  </div>
+</div>
diff --git a/app/views/tpi/ascor/index.html.erb b/app/views/tpi/ascor/index.html.erb
@@ -25,7 +25,7 @@
 
       <%= link_to user_download_tpi_ascor_index_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
         <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
-        Download all ASCOR data
+        Download ASCOR data
       <% end %>
     </div>
   </div>
@@ -109,7 +109,7 @@
 
   <hr>
 
-  <section id="publications" class="section promoted-publications">
+  <section id="publications" class="section ascor-page__promoted-publications promoted-publications">
     <div class="container">
       <div class="promoted-publications__title">
         <div class="promoted-publications__title-text">Publications and news</div>
@@ -129,4 +129,6 @@
       </div>
     </div>
   </section>
+
+  <%= render 'contact' %>
 </div>
diff --git a/app/views/tpi/ascor/show.html.erb b/app/views/tpi/ascor/show.html.erb
@@ -28,7 +28,7 @@
 
       <%= link_to user_download_tpi_ascor_index_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
         <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
-        Download all ASCOR data
+        Download ASCOR data
       <% end %>
     </div>
   </div>
@@ -38,4 +38,6 @@
       <%= render 'assessment', assessment: @assessment %>
     </section>
   <% end %>
+
+  <%= render 'contact' %>
 </div>