diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/chart/countriesByYear.chart.js | 23 | ||||
| -rw-r--r-- | client/modalImage/modal.css | 8 | ||||
| -rw-r--r-- | client/modalImage/modalImage.container.js | 6 |
3 files changed, 25 insertions, 12 deletions
diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js index df7a4530..4f8cc44e 100644 --- a/client/chart/countriesByYear.chart.js +++ b/client/chart/countriesByYear.chart.js @@ -118,7 +118,7 @@ class CountriesByYearChart extends Component { tick: { values: ticks, }, - default: [ 0, maxCitationsInAYear * 286 / 261 ], + default: [0, maxCitationsInAYear * 286 / 261], show: true, } }} @@ -129,7 +129,7 @@ class CountriesByYearChart extends Component { pattern: colorPattern }} tooltip={{ - contents: function (d, defaultTitleFormat, defaultValueFormat, color) { + contents: d => { const countriesByYearLookup = years[yearList[d[0].x]] let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1]) let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount) @@ -139,15 +139,15 @@ class CountriesByYearChart extends Component { const tableRows = topCountriesForThisYear.filter(pair => !!pair[1]).map(([country, total]) => { let colorIndex = topCountries.indexOf(country) if (colorIndex < 0) colorIndex = colorPattern.length - 1 - const color = colorPattern[ colorIndex ] + const countryColor = colorPattern[colorIndex] return [ "<tr>", "<td>", - "<span style='background-color:" + color + "' class='swatch'></span>", - country, + "<span style='background-color:" + countryColor + "' class='swatch'></span>", + country, "</td>", "<td>", - total, + total, "</td>", "</tr>", ].join('') @@ -160,7 +160,16 @@ class CountriesByYearChart extends Component { } }} /> - <div className='caption'>{paper.name}{' dataset citations per country per year. We verified ' + citations.length + ' papers that used the dataset.'}</div> + {paper.vetting && + <div className='caption'> + {paper.name} + {' dataset citations per country per year. We confirmed use of the dataset in '} + {citations.length} + {' papers, out of '} + {paper.vetting.total} + {' citations vetted.'} + </div> + } </div> ) } diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index cf8f331d..d628cc48 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -14,7 +14,7 @@ .modal.visible { opacity: 1; pointer-events: auto; - z-index: 999999999; + z-index: 9999999; } .modal .inner { position: absolute; @@ -68,6 +68,7 @@ align-items: center; cursor: pointer; transition: all 0.1s cubic-bezier(0,0,0,1); + z-index: 99999999; } .modal .prev { left: 0; @@ -113,5 +114,8 @@ } @media all and (max-device-width: 1024px) { - + .modal img { + max-width: 100vw; + max-height: 90vh; + } }
\ No newline at end of file diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index b05cd0a3..77f9a9df 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -77,10 +77,10 @@ class ModalImage extends Component { } return ( <div className={visible ? 'modal visible' : 'modal'}> - <div className='inner'> - <div className='centered'> + <div className='inner' onClick={() => this.close()}> + <div className='centered' onClick={e => e.stopPropagation()}> <img src={img.src} /> - {caption && <div class='caption'>{caption}</div>} + {caption && <div className='caption'>{caption}</div>} </div> </div> <div onClick={() => this.prev()} className='prev' aria-label='Previous image' alt='Previous image'><img src='/assets/img/arrow-left.png' /></div> |