scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Make the map always 100% width with 2:1 aspect ratio

Browse source
This commit is contained in:
rschamp 2020-10-22 15:19:55 -04:00
parent 964204c77f
commit 59f0f2c093
3 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/world-map/world-map.jsx
View file

@ -69,6 +69,7 @@ const WorldMap = props => (
autosize: true
}
}
style={{position: 'absolute', display: 'block'}}
/>
);
@ -76,8 +77,6 @@ WorldMap.propTypes = {
colorIndex: PropTypes.arrayOf(PropTypes.string),
countryData: PropTypes.arrayOf(PropTypes.string),
countryNames: PropTypes.arrayOf(PropTypes.string)
// mapHeight: PropTypes.number,
// mapWidth: PropTypes.number
};
module.exports = WorldMap;

4
src/views/annual-report/annual-report.jsx
View file

@ -738,7 +738,6 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={471}
/>
</MediaQuery>
<MediaQuery
@ -750,7 +749,6 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={384}
/>
</MediaQuery>
<MediaQuery
@ -762,7 +760,6 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={320}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@ -771,7 +768,6 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={240}
/>
</MediaQuery>
</div>

7
src/views/annual-report/annual-report.scss
View file

@ -577,10 +577,17 @@ p {
.map-wrapper {
width: 100%;
height: 0;
position: relative;
padding-top: 50%;
}
.map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}