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 {