diff --git a/app/assets/images/tpi/ascor/circles_1.svg b/app/assets/images/tpi/ascor/circles_1.svg new file mode 100644 index 000000000..47899dcd6 --- /dev/null +++ b/app/assets/images/tpi/ascor/circles_1.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/assets/images/tpi/ascor/circles_2.svg b/app/assets/images/tpi/ascor/circles_2.svg new file mode 100644 index 000000000..8b63c8694 --- /dev/null +++ b/app/assets/images/tpi/ascor/circles_2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/assets/images/tpi/ascor/logo.png b/app/assets/images/tpi/ascor/logo.png new file mode 100644 index 000000000..c3b8f8a6a Binary files /dev/null and b/app/assets/images/tpi/ascor/logo.png differ diff --git a/app/assets/stylesheets/tpi/_nested-dropdown.scss b/app/assets/stylesheets/tpi/_nested-dropdown.scss index d56d69ce4..ae10a5794 100644 --- 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 index bc717dba7..4853d725d 100644 --- 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 index a7b13496d..a8219ab25 100644 --- 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 index b847bc7cf..e05ebb421 100644 --- 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 index 6d60362ab..53b57fe2d 100644 --- a/app/views/layouts/tpi/_banner.html.erb +++ b/app/views/layouts/tpi/_banner.html.erb @@ -10,26 +10,7 @@ /> <% end %> -
-

Hosted by:

- -
- - The London School of Economics and Political Sciences - - - Grantham Research Institute on Climate Change and the Environment - -
-
+ <%= content_for?(:hosted_by) ? content_for(:hosted_by) : render('layouts/tpi/hosted_by') %> diff --git a/app/views/layouts/tpi/_hosted_by.html.erb b/app/views/layouts/tpi/_hosted_by.html.erb new file mode 100644 index 000000000..404c1b97b --- /dev/null +++ b/app/views/layouts/tpi/_hosted_by.html.erb @@ -0,0 +1,20 @@ +
+

Hosted by:

+ +
+ + The London School of Economics and Political Sciences + + + Grantham Research Institute on Climate Change and the Environment + +
+
\ No newline at end of file diff --git a/app/views/tpi/ascor/index.html.erb b/app/views/tpi/ascor/index.html.erb index 82e0e77c4..53b9b4113 100644 --- 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 %><% end %>
+
+
+
+ <%= react_component("BankDropdown", { banks: @countries_json, selectedOption: 'All countries' }) %>
-
+
<% if @methodology_publication.present? %> - + arrow down Methodology <% end %> - + arrow down Publications diff --git a/app/views/tpi/ascor/show.html.erb b/app/views/tpi/ascor/show.html.erb index a8363eb3b..91eea6f8a 100644 --- 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 %><% end %>
+
+
+
+ <%= react_component("BankDropdown", { banks: @countries_json, selectedOption: 'All countries' }) %> -
+
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]