From 04b76feea1fc1971b9cd98a1949e97a81e94f60a Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Wed, 7 Oct 2020 12:12:09 -0400
Subject: [PATCH] work on map responsiveness
---
src/components/world-map/world-map.jsx | 2 +-
src/views/annual-report/annual-report.jsx | 58 +++++++++++++++++++---
src/views/annual-report/annual-report.scss | 26 ++++++++--
3 files changed, 73 insertions(+), 13 deletions(-)
diff --git a/src/components/world-map/world-map.jsx b/src/components/world-map/world-map.jsx
index f4e44f101..a6f54abed 100644
--- a/src/components/world-map/world-map.jsx
+++ b/src/components/world-map/world-map.jsx
@@ -66,7 +66,7 @@ const WorldMap = props => (
pad: 0,
autoexpand: true
},
- autosize: false,
+ //autosize: true,
width: props.mapWidth,
height: props.mapHeight
}
diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 9aecb322c..4a3fb6d35 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -679,6 +679,8 @@ class AnnualReport extends React.Component {
</div>
<img src="/images/annual-report/milestones/community-growth-graph.svg" />
</div>
+ </div>
+ <div className="map-inner">
<div className="reach-map">
<h3>
<FormattedMessage id="annualReport.reachGlobalCommunity" />
@@ -686,15 +688,55 @@ class AnnualReport extends React.Component {
<p>
<FormattedMessage id="annualReport.reachMapBlurb" />
</p>
- <WorldMap
- className="map"
- colorIndex={colorIndex}
- countryData={countryData}
- countryNames={countryNames}
- mapHeight={600}
- mapWidth={1200}
- />
+ <MediaQuery minWidth={frameless.desktop}>
+ <WorldMap
+ className="map"
+ colorIndex={colorIndex}
+ countryData={countryData}
+ countryNames={countryNames}
+ mapHeight={530}
+ 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 className="inner">
<div className="reach-translation">
<div className="reach-translation-intro">
<h3>
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index b80ab1e58..3dc54ae11 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -406,26 +406,44 @@ p {
img {
width: 600px;
}
+
+ @media #{$intermediate-and-smaller} {
+ img {
+ max-width: 100%;
+ }
+ }
}
+ .map-inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
.reach-map {
- //width: 1064px;
+ width: 1064px;
background-color: $ui-white;
border-radius: 6px;
color: $type-gray;
- padding: 48px 0;
+ padding-top: 48px;
margin: 52px 0;
text-align: center;
h3, p {
color: $type-gray;
+ padding: 0 48px;
+ }
+
+ @media #{$intermediate-and-smaller} {
+ width: 100%;
+ border-radius: 0px;
}
}
.reach-translation {
display: flex;
justify-content: space-between;
+ flex-wrap: wrap;
align-items: center;
max-width: 780px;
margin-bottom: 100px;
@@ -445,8 +463,7 @@ p {
.map {
margin-top: 20px;
- margin-left: -40px;
- padding: 40px;
+ margin-left: 0px;
}
}
@@ -546,6 +563,7 @@ p {
.moderation-and-guidelines {
display: flex;
justify-content: space-between;
+ flex-wrap: wrap;
}
.community-moderation {