scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Start on responsive map

Browse source
This commit is contained in:
rschamp 2020-10-21 18:26:22 -04:00 committed by Karishma Chadha
parent d1285b91ee
commit 67ff392776
4 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/_frameless.scss
View file

@ -35,8 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em;
$desktop: 942px;
$mobileIntermediate: 640px;
$tabletPortrait: 768px;
$mobileIntermediate: 640px;
$mobile: 480px;
/* Media Queries */

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

@ -66,9 +66,7 @@ const WorldMap = props => (
pad: 0,
autoexpand: true
},
// autosize: true,
width: props.mapWidth,
height: props.mapHeight
autosize: true
}
}
/>

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

@ -729,14 +729,14 @@ class AnnualReport extends React.Component {
<p>
<FormattedMessage id="annualReport.reachMapBlurb" />
</p>
<div className="map-wrapper">
<MediaQuery minWidth={frameless.desktop}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={530}
mapWidth={1060}
mapHeight={471}
/>
</MediaQuery>
<MediaQuery
@ -748,8 +748,7 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={450}
mapWidth={900}
mapHeight={384}
/>
</MediaQuery>
<MediaQuery
@ -761,8 +760,7 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={400}
mapWidth={800}
mapHeight={320}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@ -771,10 +769,10 @@ class AnnualReport extends React.Component {
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={172}
mapWidth={396}
mapHeight={240}
/>
</MediaQuery>
</div>
</div>
</div>
<div className="inner">

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

@ -551,7 +551,6 @@ p {
}
.reach-map {
width: 1064px;
background-color: $ui-white;
border-radius: 6px;
color: $type-gray;
@ -564,11 +563,20 @@ p {
color: $type-gray;
padding: 0 48px;
}
@media #{$intermediate-and-smaller} {
width: 100%;
border-radius: 0px;
}
.map-wrapper {
width: 100%;
}
.map {
width: 100%;
}
}
.reach-translation {