Merge pull request #448 from Vizzuality/feat/ascor-layout

feat: ASCOR layout
Vizzuality · Sep 27, 2023 · 9ead60f · 9ead60f
2 parents daae0e9 + ee225b3
commit 9ead60f
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 55 deletions.
diff --git a/app/assets/images/tpi/ascor/circles_1.svg b/app/assets/images/tpi/ascor/circles_1.svg
diff --git a/app/assets/images/tpi/ascor/circles_2.svg b/app/assets/images/tpi/ascor/circles_2.svg
diff --git a/app/assets/images/tpi/ascor/logo.png b/app/assets/images/tpi/ascor/logo.png
diff --git a/app/assets/stylesheets/tpi/_nested-dropdown.scss b/app/assets/stylesheets/tpi/_nested-dropdown.scss
@@ -111,4 +111,13 @@
       color: $white;
     }
   }
+
+  &--ascor:not(.nested-dropdown--open) {
+    background: $ascor-background-color;
+
+    .nested-dropdown__title {
+      border: 1px solid $white;
+      color: $white;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/tpi/_variables.scss b/app/assets/stylesheets/tpi/_variables.scss
@@ -71,6 +71,7 @@ $navbar-dropdown-item-hover-background-color: $blue;
 $navbar-dropdown-item-active-color: white;
 $navbar-dropdown-item-active-background-color: $blue;
 $navbar-bottom-box-shadow-size: 0;
+$ascor-background-color: #242638;
 
 // TAGS
 $tag-background-color: $white;

diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -1,47 +1,117 @@
 .ascor-page {
-  .ascor-header {
-    min-height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  .dropdown-selector-wrapper {
+    position: relative;
+    background-color: $ascor-background-color;
 
-    &__assessment-dropdown {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      color: white;
+    .dropdown-selector__container {
+      background-color: $ascor-background-color;
 
-      @include tablet {
-        flex-direction: row;
-        align-items: center;
+      @include desktop {
+        padding: $container-top-padding $container-side-padding 40px $container-side-padding;
       }
     }
 
-    a {
-      color: white;
-      margin-right: 20px;
+    .dropdown-selector__container--active {
+      background-color: $white;
     }
 
-    @include until($desktop) {
-      padding: 0 0.75rem;
-      font-size: $size-7;
-      height: 60px;
-      font-family: $font-family-regular;
+    .dropdown-selector__wrapper {
+      background-color: $ascor-background-color;
     }
-  }
 
-  .dropdown-selector-wrapper {
-    background-color: $blue;
-
-    .dropdown-selector__container {
-      @include desktop {
-        padding: $container-top-padding $container-side-padding 40px $container-side-padding;
-      }
+    .dropdown-selector__active-button {
+      background-color: $dark;
     }
 
     @include desktop {
       height: 335px;
     }
+
+    .left-icon {
+      background-image: image-url('tpi/ascor/circles_1.svg');
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      position: absolute;
+      background-position-y: 30px;
+    }
+
+    .right-icon {
+      background-image: image-url('tpi/ascor/circles_2.svg');
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      position: absolute;
+      background-position-x: 100%;
+    }
+
+    .bottom-icon {
+      background-image: image-url('tpi/ascor/logo.png');
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      position: absolute;
+      background-position: 50px 260px;
+    }
+
+    .ascor-header {
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &.show-version {
+        justify-content: space-between;
+
+        @include tablet {
+          padding-left: 20px;
+        }
+
+        @include desktop {
+          padding-left: calc((960px - 608px)/2);
+        }
+
+        @include widescreen {
+          padding-left: calc((1152px - 608px)/2);
+        }
+      }
+
+      &__assessment-dropdown {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        color: white;
+
+        @include tablet {
+          flex-direction: row;
+          align-items: center;
+        }
+      }
+
+      .button {
+        background-color: $ascor-background-color;
+      }
+
+      .button:hover {
+        background-color: $dark;
+      }
+
+      a {
+        color: white;
+        margin-right: 20px;
+      }
+
+      .links {
+        padding-right: 20px;
+      }
+
+      @include until($desktop) {
+        padding: 0 0.75rem;
+        font-size: $size-7;
+        height: 60px;
+        font-family: $font-family-regular;
+      }
+    }
   }
 
   section {

diff --git a/app/javascript/components/tpi/RemoteDropdown.js b/app/javascript/components/tpi/RemoteDropdown.js
@@ -43,7 +43,7 @@ function RemoteDropdown({ url, theme, params, data, selected, name }) {
     window.Rails.fire(Select.current, 'change');
     setLabel(item.label);
   };
-  const chevron = !isOpen && theme === 'blue' ? chevronIconWhite : chevronIconBlack;
+  const chevron = !isOpen && (theme === 'blue' || theme === 'ascor') ? chevronIconWhite : chevronIconBlack;
 
   return (
     <>

diff --git a/app/views/layouts/tpi/_banner.html.erb b/app/views/layouts/tpi/_banner.html.erb
@@ -10,26 +10,7 @@
           />
         <% end %>
       </div>
-      <div class="column is-offset-3 partners__container">
-        <p class="partners__title">Hosted by:</p>
-
-        <div class="partners">
-          <a href="http://www.lse.ac.uk/">
-            <img
-              src="<%= asset_path 'tpi/partners/lse.png' %>"
-              alt="The London School of Economics and Political Sciences"
-              class="partners__lse"
-            />
-          </a>
-          <a href="http://www.lse.ac.uk/GranthamInstitute/">
-            <img
-              src="<%= asset_path 'tpi/partners/grantham.png' %>"
-              alt="Grantham Research Institute on Climate Change and the Environment"
-              class="partners__grantham"
-            />
-          </a>
-        </div>
-      </div>
+      <%= content_for?(:hosted_by) ? content_for(:hosted_by) : render('layouts/tpi/hosted_by') %>
     </div>
   </div>
 </div>
diff --git a/app/views/layouts/tpi/_hosted_by.html.erb b/app/views/layouts/tpi/_hosted_by.html.erb
@@ -0,0 +1,20 @@
+<div class="column is-offset-3 partners__container">
+  <p class="partners__title">Hosted by:</p>
+
+  <div class="partners">
+    <a href="http://www.lse.ac.uk/">
+      <img
+        src="<%= asset_path 'tpi/partners/lse.png' %>"
+        alt="The London School of Economics and Political Sciences"
+        class="partners__lse"
+        />
+    </a>
+    <a href="http://www.lse.ac.uk/GranthamInstitute/">
+      <img
+        src="<%= asset_path 'tpi/partners/grantham.png' %>"
+        alt="Grantham Research Institute on Climate Change and the Environment"
+        class="partners__grantham"
+        />
+    </a>
+  </div>
+</div>
diff --git a/app/views/tpi/ascor/index.html.erb b/app/views/tpi/ascor/index.html.erb
@@ -1,19 +1,24 @@
 <% content_for :page_title, "ASCOR Tool - Transition Pathway Initiative" %>
+<% content_for :hosted_by do %><span></span><% end %>
 
 <div class="ascor-page">
   <div class="dropdown-selector-wrapper">
+    <div class="left-icon"></div>
+    <div class="right-icon"></div>
+    <div class="bottom-icon"></div>
+
     <!-- TODO: React component needs to be replaced!!! -->
     <%= react_component("BankDropdown", { banks: @countries_json, selectedOption: 'All countries' }) %>
 
     <div class="ascor-header container">
-      <div>
+      <div class="links">
         <% if @methodology_publication.present? %>
-          <a href="#methodology" class="link with-icon is-pulled-left">
+          <a href="#methodology" class="link with-icon">
             <img src="<%= asset_path 'icons/arrow-down.svg'%>" alt="arrow down" class="is-hidden-touch" />
             Methodology
           </a>
         <% end %>
-        <a href="#publications" class="link with-icon is-pulled-left">
+        <a href="#publications" class="link with-icon">
           <img src="<%= asset_path 'icons/arrow-down.svg'%>" alt="arrow down" class="is-hidden-touch" />
           Publications
         </a>

diff --git a/app/views/tpi/ascor/show.html.erb b/app/views/tpi/ascor/show.html.erb
@@ -1,11 +1,16 @@
 <% content_for :page_title, "#{@country.name} - Transition Pathway Initiative" %>
+<% content_for :hosted_by do %><span></span><% end %>
 
 <div class="ascor-page">
   <div class="dropdown-selector-wrapper">
+    <div class="left-icon"></div>
+    <div class="right-icon"></div>
+    <div class="bottom-icon"></div>
+
     <!-- TODO: React component needs to be replaced!!! -->
     <%= react_component("BankDropdown", { banks: @countries_json, selectedOption: 'All countries' }) %>
 
-    <div class="ascor-header container">
+    <div class="ascor-header container show-version">
       <div class="ascor-header__assessment-dropdown">
         <div class="caption">
           Assessment Date:
@@ -14,7 +19,7 @@
           <%= react_component('RemoteDropdown', {
             name: 'assessment_id',
             remote: true,
-            theme: 'blue',
+            theme: 'ascor',
             url: tpi_ascor_path(@country),
             data: @country.assessments.map {|v| {label: v['assessment_date']&.strftime('%d %B %Y'), value: v['id']}},
             selected: params[:assessment_id]