Skip to content

Commit

Permalink
feat: ASCOR assessments results per country
Browse files Browse the repository at this point in the history
  • Loading branch information
martintomas committed Oct 4, 2023
1 parent 3640d52 commit 072cac2
Show file tree
Hide file tree
Showing 14 changed files with 391 additions and 6 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/tpi.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
@import "tpi/fixed-navbar";
@import "tpi/nested-dropdown";
@import "tpi/banking-question-legend";
@import "tpi/country-question-legend";
@import "tpi/latest-information";
@import "tpi/mq_beta_scores";
@import "tpi/mq-beta-modal";
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/tpi/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $hawkes-blue: #ECF1FE;
$yellow: #FFDD49;
$grey-light: #DDE7FD;
$grey-medium: #D8D8D8;
$grey-lighter-medium: #E2E2E2;
$grey: #F5F8FE;
$grey-dark: #595B5D;
$grey-blue: #CFD7ED;
Expand Down
88 changes: 88 additions & 0 deletions app/assets/stylesheets/tpi/country-question-legend.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
.country-question-legend {
background: #F5F8FF;
border: 1px solid #CFD7ED;
position: fixed;

bottom: 0;
right: 0;

font-size: 12px;

z-index: 10;

transition: opacity .5s ease-out;
opacity: 0;

@include desktop {
bottom: unset;
right: unset;
top: 50%;
left: 15px;
}

@media (min-width: 1530px) {
left: unset;
right: calc(#{$widescreen} + (100vw - #{$widescreen}) / 2);
}

&--active {
opacity: 1;
}

&__header {
display: none;

padding: 10px;
text-transform: uppercase;
border-bottom: 1px solid #CFD7ED;

@include desktop {
display: block;
}
}

&__content {
padding: 15px;
display: flex;
gap: 15px;

@include desktop {
flex-direction: column;
}

.country-question-legend-answer {
display: flex;
align-items: center;
gap: 10px;

&:before {
content: '';
display: block;
margin-top: -3px;

width: 20px;
height: 20px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 9px;
}

&--no:before {
background-image: image-url('icons/x.svg');
background-color: #ED3D4A;
}

&--yes:before {
background-image: image-url('icons/check.svg');
background-color: #5587F7;
}

&--not-applicable:before {
background-image: image-url('icons/oval.svg');
background-color: #C0C2C3;
background-size: 5px;
}
}
}
}
143 changes: 143 additions & 0 deletions app/assets/stylesheets/tpi/pages/ascor.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
$see-more-width: 100px;
$see-more-width-tablet: 130px;

.ascor-page {
.dropdown-selector-wrapper {
position: relative;
Expand Down Expand Up @@ -212,4 +215,144 @@
}
}
}

.country-assessment {
margin-top: 30px;
margin-bottom: 30px;

&__pillar {
outline: solid 1px $grey-lighter-medium;
margin-bottom: 1px;
padding: 30px 0 0 40px;

&:hover, &.active {
background-color: transparentize($grey-lighter-medium, 0.4);
}

&__title {
color: $dark;
font-family: $family-sans-serif;
font-size: 24px !important;
line-height: 1.7rem;
font-weight: 400;
text-transform: uppercase;
margin: 5px 0 40px 0;
}

&__subtitle {
color: $grey-dark;
font-family: $family-sans-serif;
font-size: 12px;
}
}

&__area {
outline: solid 1px $grey-lighter-medium;
margin-left: 40px;
padding: 15px 80px;
position: relative;
background-color: white;

&__title {
font-family: $family-sans-serif;
font-size: 20px !important;
}
}

input.toggle {
display: none;
}

&__indicators {
display: none;
}

&__indicator {
margin-bottom: 1px;

&__title {
outline: solid 1px $grey-lighter-medium;
font-family: $family-sans-serif;
font-weight: 700;
font-size: 16px;
margin-left: 40px;
padding: 15px 80px;
}
}

&__metric {
margin-left: 80px;
padding: 20px 0 20px 40px;
border-left: solid 3px $grey-lighter-medium;

&__title {
}

&__value {
margin: 20px 0 10px 20px;
display: inline-block;
background: $dark;
padding: 3px 10px;
color: $white;
font-weight: 600;
}
}

&__more {
cursor: pointer;
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
height: 30px;
width: $see-more-width;
right: -1px;
bottom: -1px;
border: 1px solid #CFD7ED;
user-select: none;

@include tablet {
width: $see-more-width-tablet;
}

&:before {
color: $grey-dark;
content: 'See more';
display: block;
font-size: 12px;
margin-top: 3px;
}

&:after {
content: '';
display: block;

background-image: image-url('icons/chevron-gray.svg');
background-repeat: no-repeat;
background-position: right center;
background-size: 16px;

height: 16px;
width: 16px;
}
}

input.toggle:checked + .country-assessment__area-block {
.country-assessment__indicators {
display: block;
}

.country-assessment__more {
&:before {
content: 'See less';
}

&::after {
transform: rotate(-180deg);
}
}
}
}
}
7 changes: 5 additions & 2 deletions app/controllers/tpi/ascor_controller.rb
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
module TPI
class ASCORController < TPIController
before_action :fetch_ascor_countries, only: [:index, :show]
before_action :fetch_ascor_country, only: [:show]
before_action :fetch_assessment_date, only: [:index, :show, :index_assessment]
before_action :fetch_ascor_country, only: [:show, :show_assessment]
before_action :fetch_assessment_date, only: [:index, :show, :index_assessment, :show_assessment]
before_action :fetch_emissions_assessment_date, only: [:index]
before_action :fetch_ascor_assessment_results, only: [:index, :index_assessment]

Expand All @@ -18,13 +18,16 @@ def index
end

def show
@assessment = ASCOR::Assessment.find_by country: @country, assessment_date: @assessment_date
fixed_navbar("ASCOR Country #{@country.name}", admin_ascor_country_path(@country.id))
end

def index_assessment; end

def index_emissions_assessment; end

def show_assessment; end

def emissions_chart_data
data = ::Api::ASCOR::EmissionsChart.new(
@emissions_assessment_date,
Expand Down
60 changes: 60 additions & 0 deletions app/javascript/components/tpi/AscorQuestionLegend.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React, { useState, useEffect } from 'react';
import cx from 'classnames';

const AscorQuestionLegend = () => {
const [isVisible, setVisible] = useState(false);

const isChecked = () => {
let anyChecked = false;

document.querySelectorAll('.country-assessment > .country-assessment__pillar').forEach((section) => {
let areaChecked = false;

section.querySelectorAll('input.toggle').forEach((input) => {
areaChecked = areaChecked || input.checked;
anyChecked = anyChecked || input.checked;
});
return areaChecked ? section.classList.add('active') : section.classList.remove('active');
});

setVisible(anyChecked);
};

useEffect(() => {
const eventListeners = [];
document.querySelectorAll('.country-assessment > .country-assessment__pillar > input.toggle').forEach((input) => {
const listener = input.addEventListener('click', isChecked);
eventListeners.push([input, listener]);
});

return () => {
eventListeners.forEach(([input, listener]) => {
input.removeEventListener('click', listener);
});
};
});

return (
<div className={cx('country-question-legend', { 'country-question-legend--active': isVisible })}>
<div className="banking-question-legend__header">
Legend
</div>
<div className="country-question-legend__content">
<div className="country-question-legend-answer country-question-legend-answer--yes">

Check warning on line 43 in app/javascript/components/tpi/AscorQuestionLegend.js

View workflow job for this annotation

GitHub Actions / linters

Expected indentation of 10 space characters but found 12
Yes
</div>
<div className="country-question-legend-answer country-question-legend-answer--no">

Check warning on line 46 in app/javascript/components/tpi/AscorQuestionLegend.js

View workflow job for this annotation

GitHub Actions / linters

Expected indentation of 10 space characters but found 12
No
</div>
<div className="country-question-legend-answer country-question-legend-answer--not-applicable">

Check warning on line 49 in app/javascript/components/tpi/AscorQuestionLegend.js

View workflow job for this annotation

GitHub Actions / linters

Expected indentation of 10 space characters but found 12
Not applicable
</div>
</div>
</div>
);
};

AscorQuestionLegend.propTypes = {
};

export default AscorQuestionLegend;
Loading

0 comments on commit 072cac2

Please sign in to comment.