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

work on map responsiveness

Browse source
This commit is contained in:
seotts 2020-10-07 12:12:09 -04:00 committed by Karishma Chadha
parent 971f19b352
commit 04b76feea1
3 changed files with 73 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -679,6 +679,8 @@ class AnnualReport extends React.Component {
</div> </div>
<img src="/images/annual-report/milestones/community-growth-graph.svg" /> <img src="/images/annual-report/milestones/community-growth-graph.svg" />
</div> </div>
</div>
<div className="map-inner">
<div className="reach-map"> <div className="reach-map">
<h3> <h3>
<FormattedMessage id="annualReport.reachGlobalCommunity" /> <FormattedMessage id="annualReport.reachGlobalCommunity" />
@ -686,15 +688,55 @@ class AnnualReport extends React.Component {
<p> <p>
<FormattedMessage id="annualReport.reachMapBlurb" /> <FormattedMessage id="annualReport.reachMapBlurb" />
</p> </p>
<MediaQuery minWidth={frameless.desktop}>
<WorldMap <WorldMap
className="map" className="map"
colorIndex={colorIndex} colorIndex={colorIndex}
countryData={countryData} countryData={countryData}
countryNames={countryNames} countryNames={countryNames}
mapHeight={600} mapHeight={530}
mapWidth={1200} mapWidth={1060}
/> />
</MediaQuery>
<MediaQuery
maxWidth={frameless.desktop - 1}
minWidth={frameless.tabletPortrait}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={450}
mapWidth={900}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobileIntermediate}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={400}
mapWidth={800}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
mapHeight={172}
mapWidth={396}
/>
</MediaQuery>
</div> </div>
</div>
<div className="inner">
<div className="reach-translation"> <div className="reach-translation">
<div className="reach-translation-intro"> <div className="reach-translation-intro">
<h3> <h3>

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

@ -406,26 +406,44 @@ p {
img { img {
width: 600px; width: 600px;
} }
@media #{$intermediate-and-smaller} {
img {
max-width: 100%;
}
}
} }
.map-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.reach-map { .reach-map {
//width: 1064px; width: 1064px;
background-color: $ui-white; background-color: $ui-white;
border-radius: 6px; border-radius: 6px;
color: $type-gray; color: $type-gray;
padding: 48px 0; padding-top: 48px;
margin: 52px 0; margin: 52px 0;
text-align: center; text-align: center;
h3, p { h3, p {
color: $type-gray; color: $type-gray;
padding: 0 48px;
}
@media #{$intermediate-and-smaller} {
width: 100%;
border-radius: 0px;
} }
} }
.reach-translation { .reach-translation {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
align-items: center; align-items: center;
max-width: 780px; max-width: 780px;
margin-bottom: 100px; margin-bottom: 100px;
@ -445,8 +463,7 @@ p {
.map { .map {
margin-top: 20px; margin-top: 20px;
margin-left: -40px; margin-left: 0px;
padding: 40px;
} }
} }
@ -546,6 +563,7 @@ p {
.moderation-and-guidelines { .moderation-and-guidelines {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.community-moderation { .community-moderation {