scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 10:58:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

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

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

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

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