From 0f12bd2571b8dc14293d9c417d9b8e3bb102dd92 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Fri, 22 Oct 2021 14:22:36 -0700
Subject: [PATCH 1/6] start mobile issues

---
 .../annual-report/2020/annual-report.jsx      | 10 ++--
 .../annual-report/2020/annual-report.scss     | 60 +++++++++++++------
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index a4a0abad6..b36878db5 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -1302,7 +1302,7 @@ class AnnualReport extends React.Component {
                                 </div>
                             </div>
                             <div className="community-quotes">
-                                <div className="community-quote">
+                                <div className="community-quote single">
                                     <div className="quote-person">
                                         <Avatar
                                             alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
@@ -1327,11 +1327,11 @@ class AnnualReport extends React.Component {
                             <div className="initiatives-subsection-content">
                                 {/* eslint-disable max-len */}
                                 <div className="inner">
-                                    <div className="content flex-content">
+                                    <div className="spotlight bubble adaptation">
+                                        <FormattedMessage id="annualReport.2020.spotlightStory" />
+                                    </div>
+                                    <div className="content flex-content aaron">
                                         <div className="text">
-                                            <div className="spotlight bubble adaptation">
-                                                <FormattedMessage id="annualReport.2020.spotlightStory" />
-                                            </div>
                                             <h2>
                                                 <FormattedMessage id="annualReport.2020.adaptationHighlightName" />
                                             </h2>
diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index 97697afe1..89b286e2a 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -643,10 +643,10 @@ a, a:link, a:visited, a:active{
 
         .reach-translation-intro {
             max-width: 300px;
+        }
 
-            h3 {
-                max-width: 280px;
-            }
+        img {
+            max-width: 380px;
         }
 
         .inline{
@@ -655,13 +655,12 @@ a, a:link, a:visited, a:active{
             margin-top: 10px;
             img{
                 margin-right: 6px;
+                @media #{$intermediate-and-smaller} {
+                    max-width: 30px;
+                }
             }
         }
 
-        img {
-            max-width: 380px;
-        }
-
         @media #{$small} {
             margin-bottom: 64px;
         }
@@ -671,21 +670,18 @@ a, a:link, a:visited, a:active{
         .inner {
             max-width: 620px;
         }
-
-        .reach-translation {
-            text-align: left;
+        .inline{
+            justify-content: center;
+        }
+        .reach-translation, .reach-translation-intro {
+            flex-direction: column;
+            justify-content: center;
+            text-align: center;
             img {
                 width: 300px;
             }
         }
     }
-
-    @media #{$medium-and-smaller} {
-        .reach-translation {
-            text-align: center;
-            justify-content: center;
-        }
-    }
 }
 
 .bubble {
@@ -760,6 +756,7 @@ a, a:link, a:visited, a:active{
     }
     &.adaptation{
         background-color: $annual-report-aqua;
+        padding: 10px 13px;
     }
 }
 
@@ -1165,6 +1162,13 @@ img.comment-viz{
             @media #{$intermediate} {
                 margin-left: auto;
             }
+            &.spotlight{
+                margin-left: 50px;
+                margin-bottom: -30px;
+                @media #{$intermediate-and-smaller}{
+                    margin: auto;
+                }
+            }
             &.inverted{
                 border: 2.5px solid $ui-purple-dark;
                 background-color: $ui-white;
@@ -1246,14 +1250,24 @@ img.comment-viz{
                 text-align: left;
                 @media #{$medium-and-smaller} {
                     flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    &.aaron{
+                        flex-direction: column-reverse;
+                    }
                 }
                 &.split{
                     &.content{
                         .text{
-                            max-width: 420px;
+                            width: 420px;
+                            max-width: 100%;
                         }
-                        img{
+                        .images{
                             max-width: 350px;
+                            width: 100%;
+                            img{
+                                width: 100%;
+                            }
                         }
                     }
                 }
@@ -1261,6 +1275,14 @@ img.comment-viz{
                     justify-content: space-between;
                     .text{
                         max-width: 370px;
+                        width: 100%;
+                    }
+                    .images{
+                        max-width: 350px;
+                        width: 100%;
+                        img{
+                            width: 100%;
+                        }
                     }
                 }
                 &.lg{

From 7c65b5fd730b423e6b782e421d893e7e536d1cc7 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Fri, 22 Oct 2021 14:48:48 -0700
Subject: [PATCH 2/6] padding/margin, tweets, other sizing

---
 .../annual-report/2020/annual-report.scss     | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index 89b286e2a..61fde334b 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -1241,6 +1241,13 @@ img.comment-viz{
                     max-width: 480px;
                     width: 100%;
                 }
+                .images{
+                    max-width: 350px;
+                    width: 100%;
+                    img{
+                        width: 100%;
+                    }
+                }
             }
 
             .flex-content{
@@ -1259,8 +1266,8 @@ img.comment-viz{
                 &.split{
                     &.content{
                         .text{
-                            width: 420px;
-                            max-width: 100%;
+                            max-width: 420px;
+                            width: 100%;
                         }
                         .images{
                             max-width: 350px;
@@ -1398,6 +1405,14 @@ img.comment-viz{
         .world{
             max-width: 600px;
             margin: 50px auto;
+            @media #{$intermediate-and-smaller} {
+                width: calc(100% - 30px);
+                padding: 0 15px;
+            }
+            h2{
+                line-height: 1.5;
+                margin-top: 20px;
+            }
         }
         .left-align{
             max-width: 700px;
@@ -1748,6 +1763,9 @@ img.comment-viz{
             margin-top: 0px;
             flex-direction: column;
         }
+        @media #{$small}{
+            background-size: auto;
+        }
         .tweets{
             max-width: 600px;
             width: 100%;
@@ -1757,6 +1775,8 @@ img.comment-viz{
             align-items:flex-start;
             @media #{$small} {
                 flex-direction: column;
+                justify-content: center;
+                align-items: center;
             }
             .twitter-tweet{
                 width: 100%;
@@ -1769,6 +1789,9 @@ img.comment-viz{
     .inner {
         max-width: 940px;
         padding: 80px 0;
+        @media #{$intermediate}{
+            max-width: 740px;
+        }
     }
 
     background-color: $header-gray;

From 3d44e562d3381e35a628869ba5f78bd36307336c Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Fri, 22 Oct 2021 15:25:56 -0700
Subject: [PATCH 3/6] iframe sizing

---
 .../text-and-media-snippet.jsx                |  4 +-
 .../text-and-media-snippet.scss               | 11 ++-
 .../annual-report/2020/annual-report.jsx      | 80 ++++++++++++++-----
 .../annual-report/2020/annual-report.scss     |  6 ++
 4 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.jsx b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
index 590636456..cb20bb069 100644
--- a/src/components/text-and-media-snippet/text-and-media-snippet.jsx
+++ b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
@@ -13,8 +13,8 @@ const TextAndMediaSnippet = props => (
                     <VideoPreview
                         buttonMessage=""
                         thumbnail={props.largeImage}
-                        thumbnailWidth="300"
-                        videoHeight="216"
+                        thumbnailWidth="320"
+                        videoHeight="230"
                         videoId={props.videoId}
                         videoWidth="380"
                         alt={props.alt}
diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.scss b/src/components/text-and-media-snippet/text-and-media-snippet.scss
index 9f34e2397..220622f85 100644
--- a/src/components/text-and-media-snippet/text-and-media-snippet.scss
+++ b/src/components/text-and-media-snippet/text-and-media-snippet.scss
@@ -17,11 +17,20 @@
     }
   }
   .half{
-    max-width: 330px;
+    max-width: 360px;
     width: 100%;
+    @media #{$intermediate-and-smaller} {
+      max-width: 430px;
+      width: 100%;
+      margin-bottom: 20px;
+    }
     img.large{
       max-width: 350px;
       width: 100%;
+      @media #{$intermediate-and-smaller} {
+        max-width: 430px;
+        width: 100%;
+      }
     }
   }
   p{
diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index b36878db5..965721fbb 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -1354,15 +1354,44 @@ class AnnualReport extends React.Component {
                                     <div className="flex-content">
                                         <div className="text-and-media-snippet regular between">
                                             <div className="half">
-                                                <iframe
-                                                    src="https://scratch.mit.edu/projects/389148460/embed"
-                                                    allowTransparency="true"
-                                                    width="375"
-                                                    height="310"
-                                                    frameBorder="0"
-                                                    scrolling="no"
-                                                    allowFullScreen
-                                                />
+                                                <MediaQuery
+                                                    minWidth={frameless.desktop}
+                                                >
+                                                    <iframe
+                                                        src="https://scratch.mit.edu/projects/389148460/embed"
+                                                        allowTransparency="true"
+                                                        width="360"
+                                                        height={((360 * .76) + 45)}
+                                                        frameBorder="0"
+                                                        scrolling="no"
+                                                        allowFullScreen
+                                                    />
+                                                </MediaQuery>
+                                                <MediaQuery
+                                                    maxWidth={frameless.desktop - 1}
+                                                    minWidth={frameless.mobile}
+                                                >
+                                                    <iframe
+                                                        src="https://scratch.mit.edu/projects/389148460/embed"
+                                                        allowTransparency="true"
+                                                        width="430"
+                                                        height={((430 * .76) + 45)}
+                                                        frameBorder="0"
+                                                        scrolling="no"
+                                                        allowFullScreen
+                                                    />
+                                                </MediaQuery>
+                                                <MediaQuery maxWidth={frameless.mobile - 1}>
+                                                    <iframe
+                                                        src="https://scratch.mit.edu/projects/389148460/embed"
+                                                        allowTransparency="true"
+                                                        width="300"
+                                                        height={((300 * .76) + 45)}
+                                                        frameBorder="0"
+                                                        scrolling="no"
+                                                        allowFullScreen
+                                                    />
+                                                </MediaQuery>
                                             </div>
                                             <div className="half">
                                                 <p>
@@ -1594,15 +1623,30 @@ class AnnualReport extends React.Component {
                                         />
                                     </div>
                                     <div className="iframe-holder">
-                                        <iframe
-                                            src="https://scratch.mit.edu/projects/412126066/embed"
-                                            allowTransparency="true"
-                                            width="485"
-                                            height="402"
-                                            frameBorder="0"
-                                            scrolling="no"
-                                            allowFullScreen
-                                        />
+                                        <MediaQuery
+                                            minWidth={frameless.mobile}
+                                        >
+                                            <iframe
+                                                src="https://scratch.mit.edu/projects/412126066/embed"
+                                                allowTransparency="true"
+                                                width="480"
+                                                height={((480 * .76) + 45)}
+                                                frameBorder="0"
+                                                scrolling="no"
+                                                allowFullScreen
+                                            />
+                                        </MediaQuery>
+                                        <MediaQuery maxWidth={frameless.mobile - 1}>
+                                            <iframe
+                                                src="https://scratch.mit.edu/projects/389148460/embed"
+                                                allowTransparency="true"
+                                                width="300"
+                                                height={((300 * .76) + 45)}
+                                                frameBorder="0"
+                                                scrolling="no"
+                                                allowFullScreen
+                                            />
+                                        </MediaQuery>
                                         <p>
                                             <FormattedMessage id="annualReport.2020.projectBy" /> u/STORMPRIMEX
                                         </p>
diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index 61fde334b..ff430787e 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -2385,3 +2385,9 @@ img.comment-viz{
     position: relative;
     top: 58px;
 }
+
+.regular.between{
+    @media #{$medium-and-smaller}{
+        margin-top: 0px;
+    }
+}

From 2e1bdd72cb41f0cd8618e176b74add596238df75 Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Tue, 26 Oct 2021 10:35:59 -0700
Subject: [PATCH 4/6] fix spotight margin bug

---
 src/views/annual-report/2020/annual-report.jsx  |  2 +-
 src/views/annual-report/2020/annual-report.scss | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index 965721fbb..e4f357520 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -918,7 +918,7 @@ class AnnualReport extends React.Component {
                                 <div className="inner">
                                     <div className="content">
                                         <div className="text">
-                                            <div className="spotlight bubble connectivity">
+                                            <div className="spotlight bubble connectivity india">
                                                 <FormattedMessage id="annualReport.2020.spotlightStory" />
                                             </div>
                                             <h2>
diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index ff430787e..99611675e 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -1164,10 +1164,12 @@ img.comment-viz{
             }
             &.spotlight{
                 margin-left: 50px;
-                margin-bottom: -30px;
                 @media #{$intermediate-and-smaller}{
                     margin: auto;
                 }
+                &.india{
+                    margin: 0 auto 20px;
+                }
             }
             &.inverted{
                 border: 2.5px solid $ui-purple-dark;
@@ -1399,8 +1401,14 @@ img.comment-viz{
             left: 0px;
         }
     }
-    
 
+    .world{
+        h2{
+            line-height: 1.5;
+            margin-top: 20px;
+        }
+    }
+    
     .initiatives-adaptation, .initiatives-community {
         .world{
             max-width: 600px;
@@ -1409,10 +1417,6 @@ img.comment-viz{
                 width: calc(100% - 30px);
                 padding: 0 15px;
             }
-            h2{
-                line-height: 1.5;
-                margin-top: 20px;
-            }
         }
         .left-align{
             max-width: 700px;

From 6c1e6458dedd9cb15c8b35dda78dc8bfe3d8dfca Mon Sep 17 00:00:00 2001
From: caseymm <casey@bocoup.com>
Date: Tue, 26 Oct 2021 15:02:58 -0700
Subject: [PATCH 5/6] change max width

---
 src/views/annual-report/2020/annual-report.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index 99611675e..53a3707f1 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -1794,7 +1794,7 @@ img.comment-viz{
         max-width: 940px;
         padding: 80px 0;
         @media #{$intermediate}{
-            max-width: 740px;
+            max-width: 700px;
         }
     }
 

From d35b008fe97cbf868b114ffba188628f85d35275 Mon Sep 17 00:00:00 2001
From: Casey Miller <casey@bocoup.com>
Date: Tue, 26 Oct 2021 15:16:38 -0700
Subject: [PATCH 6/6] Update src/views/annual-report/2020/annual-report.jsx

Co-authored-by: Karishma Chadha <kchadha@scratch.mit.edu>
---
 src/views/annual-report/2020/annual-report.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index e4f357520..5c4a8ab12 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -1638,7 +1638,7 @@ class AnnualReport extends React.Component {
                                         </MediaQuery>
                                         <MediaQuery maxWidth={frameless.mobile - 1}>
                                             <iframe
-                                                src="https://scratch.mit.edu/projects/389148460/embed"
+                                                src="https://scratch.mit.edu/projects/412126066/embed"
                                                 allowTransparency="true"
                                                 width="300"
                                                 height={((300 * .76) + 45)}