From 8c8052c0523173371c965d93e7d1f6f910d92b81 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@media.mit.edu>
Date: Tue, 20 Oct 2020 23:13:40 -0400
Subject: [PATCH] Fix 4-column (mobile) responsiveness of schools and community
 sub-sections

---
 src/views/annual-report/annual-report.jsx  |  96 ++++++++--
 src/views/annual-report/annual-report.scss | 195 +++++++++++++++------
 2 files changed, 223 insertions(+), 68 deletions(-)

diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 074a43107..8e4399f0c 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -1125,13 +1125,28 @@ class AnnualReport extends React.Component {
                                                 videoWidth="568"
                                             />
                                         </MediaQuery>
-                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
+                                        <MediaQuery
+                                            maxWidth={frameless.tabletPortrait - 1}
+                                            minWidth={frameless.mobile}
+                                        >
                                             <VideoPreview
                                                 buttonMessage={
                                                     this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
                                                 }
                                                 thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
                                                 thumbnailWidth="400"
+                                                videoHeight="320"
+                                                videoId="r2ctnvb0sy"
+                                                videoWidth="568"
+                                            />
+                                        </MediaQuery>
+                                        <MediaQuery maxWidth={frameless.mobile - 1}>
+                                            <VideoPreview
+                                                buttonMessage={
+                                                    this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
+                                                }
+                                                thumbnail="/images/annual-report/initiatives/CN Video Thumbnail.png"
+                                                thumbnailWidth="300"
                                                 videoHeight="216"
                                                 videoId="r2ctnvb0sy"
                                                 videoWidth="380"
@@ -1185,10 +1200,9 @@ class AnnualReport extends React.Component {
                                             <FormattedMessage id="annualReport.communityTeamIntro2" />
                                         </p>
                                     </div>
-                                    <img
-                                        className="hero"
-                                        src="/images/annual-report/initiatives/community-hero.png"
-                                    />
+                                </div>
+                                <div className="community-hero-img" />
+                                <div className="inner">
                                     <div className="moderation-and-guidelines">
                                         <div className="community-moderation">
                                             <h4>
@@ -1449,13 +1463,28 @@ class AnnualReport extends React.Component {
                                                 videoWidth="568"
                                             />
                                         </MediaQuery>
-                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
+                                        <MediaQuery
+                                            maxWidth={frameless.tabletPortrait - 1}
+                                            minWidth={frameless.mobile}
+                                        >
                                             <VideoPreview
                                                 buttonMessage={
                                                     this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
                                                 }
                                                 thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
                                                 thumbnailWidth="400"
+                                                videoHeight="320"
+                                                videoId="r1pmlyylye"
+                                                videoWidth="568"
+                                            />
+                                        </MediaQuery>
+                                        <MediaQuery maxWidth={frameless.mobile - 1}>
+                                            <VideoPreview
+                                                buttonMessage={
+                                                    this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
+                                                }
+                                                thumbnail="/images/annual-report/initiatives/BLM Video Thumbnail.png"
+                                                thumbnailWidth="300"
                                                 videoHeight="216"
                                                 videoId="r1pmlyylye"
                                                 videoWidth="380"
@@ -1510,7 +1539,10 @@ class AnnualReport extends React.Component {
                                                 videoWidth="568"
                                             />
                                         </MediaQuery>
-                                        <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
+                                        <MediaQuery
+                                            maxWidth={frameless.tabletPortrait - 1}
+                                            minWidth={frameless.mobile}
+                                        >
                                             <VideoPreview
                                                 isYouTube
                                                 buttonMessage={
@@ -1523,10 +1555,23 @@ class AnnualReport extends React.Component {
                                                 videoWidth="380"
                                             />
                                         </MediaQuery>
+                                        <MediaQuery maxWidth={frameless.mobile - 1}>
+                                            <VideoPreview
+                                                isYouTube
+                                                buttonMessage={
+                                                    this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
+                                                }
+                                                thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
+                                                thumbnailWidth="300"
+                                                videoHeight="216"
+                                                videoId="9QD9IxOinLg"
+                                                videoWidth="380"
+                                            />
+                                        </MediaQuery>
                                         {/* eslint-enable max-len */}
                                     </div>
                                 </div>
-                                <div className="inner family-nights">
+                                <div className="inner schools">
                                     <h4>
                                         <FormattedMessage id="annualReport.familyCreativeNightsHeader" />
                                     </h4>
@@ -1634,17 +1679,32 @@ class AnnualReport extends React.Component {
                                         <p>
                                             <FormattedMessage id="annualReport.conferencesIntro" />
                                         </p>
-                                        <div className="conferences-hero-and-caption">
-                                            {/* eslint-disable-next-line max-len */}
-                                            <img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
-                                            <FormattedMessage
-                                                id="annualReport.conferencesHeroImageCaption"
-                                                values={{
-                                                    photoCredit: 'Carmelo Presicce'
-                                                }}
-                                            />
-                                        </div>
+                                        <MediaQuery minWidth={frameless.mobile}>
+                                            <div className="conferences-hero-and-caption">
+                                                {/* eslint-disable-next-line max-len */}
+                                                <img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
+                                                <FormattedMessage
+                                                    id="annualReport.conferencesHeroImageCaption"
+                                                    values={{
+                                                        photoCredit: 'Carmelo Presicce'
+                                                    }}
+                                                />
+                                            </div>
+                                        </MediaQuery>
                                     </div>
+                                </div>
+                                <MediaQuery maxWidth={frameless.mobile - 1}>
+                                    <div className="conferences-hero-and-caption">
+                                        <div className="conferences-hero" />
+                                        <FormattedMessage
+                                            id="annualReport.conferencesHeroImageCaption"
+                                            values={{
+                                                photoCredit: 'Carmelo Presicce'
+                                            }}
+                                        />
+                                    </div>
+                                </MediaQuery>
+                                <div className="inner schools-conferences">
                                     <div className="schools-conferences-content">
                                         <div className="schools-conferences-region">
                                             <div className="conference-image-and-caption left">
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index 59191a560..13fd088e3 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -136,7 +136,7 @@ p {
     @media #{$medium-and-intermediate} {
         text-align: left;
         h2 {
-            max-width: 480px;
+            max-width: 460px;
             vertical-align: middle;
         }
     }
@@ -161,14 +161,23 @@ p {
             margin-right: 20px;
         }
 
-        @media #{$small} {
+        @media #{$medium-and-smaller} {
             flex-direction: column;
         }
+
+        @media #{$medium} {
+            max-width: 460px;
+        }
+        
     }
 
     .message-from-team {
         max-width: 620px;
 
+        @media #{$medium} {
+            max-width: 460px;
+        }
+
         @media #{$small} {
             max-width: 300px;
         }
@@ -178,6 +187,11 @@ p {
         margin: 8px 24px 8px 0px;
         vertical-align: middle;
 
+        @media #{$medium} {
+            max-width: 460px;
+            margin-right: 0px;
+        }
+
         @media #{$small} {
             max-width: 300px;
             margin-right: 0px;
@@ -838,16 +852,36 @@ p {
                 font-size: 1.25rem;
                 line-height: 2.5rem;
             }
+
+            @media #{$medium} {
+                max-width: 460px;
+            }
+    
+            @media #{$small} {
+                max-width: 300px;
+            }
         }
     }
 
     .initiatives-subsection-content {
-        .inner {
-            max-width: 1032px;
+        .inner {     
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: 72px;
+            
+            @media #{$big} {
+                max-width: 1032px;
+                padding: 72px;
+            }
+
+            @media #{$medium} {
+                max-width: 460px;
+            }
+
+            @media #{$small} {
+                max-width: 300px;
+                padding-top: 32px;
+            }
 
             &.abhi {
                 padding-top: 0;
@@ -855,29 +889,29 @@ p {
             }
 
             &.schools {
-                max-width: 620px;
                 align-items: flex-start;
                 text-align: left;
 
+                padding-top: 10px;
                 padding-bottom: 0px;
 
                 .subsection-tag {
                     background-color: $ui-purple;
                 }
-            }
 
-            &.family-nights {
-                max-width: 620px;
-                align-items: flex-start;
+                @media #{$big} {
+                    max-width: 620px;
+                }
 
-                padding-top: 0px;
-                padding-bottom: 0px;
-
-                text-align: left;
+                @media #{$small} {
+                    align-items: center;
+                    h2 {
+                        line-height: 2.5rem;
+                    }
+                }
             }
 
             &.four-pictures-container {
-                max-width: 1080px;
                 margin-top: 10px;
                 margin-bottom: 0px;
                 padding-bottom: 0px;
@@ -951,6 +985,20 @@ p {
                 align-items: flex-start;
                 text-align: left;
 
+                @media #{$medium} {
+                    width: 460px;
+                }
+
+                @media #{$small} {
+                    max-width: 300px;
+
+                    align-items: center;
+
+                    h2 {
+                        line-height: 2.5rem;
+                    }
+                }
+
                 .subsection-tag {
                     background-color: $ui-purple;
                     margin-bottom: 24px;
@@ -965,48 +1013,28 @@ p {
                     display: flex;
                     flex-direction: row;
                     align-items: flex-start;
+                    text-align: left;
+    
+                    @media #{$medium-and-smaller} {
+                        flex-direction: column;
+                        align-items: center;
+                    }
                     
                     p {
                         width: 380px;
                         margin-top: 0px;
                         margin-right: 20px;
-                    }
-
-                    @media #{$medium-and-smaller} {
-                        flex-direction: column;
-                    }
-
-                    .conferences-hero-and-caption {
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        width: 540px;
-                        margin-bottom: 24px;
-
+    
                         @media #{$medium-and-smaller} {
+                            margin: 0px 0px 20px 0px;
+                        }
+    
+                        @media #{$medium} {
                             width: 460px;
                         }
-
+    
                         @media #{$small} {
-                            width: 80%;
-                            overflow: hidden;
-
-                            margin: 0px;
-                            padding: 0px;
-                        }
-
-
-                        img {
-                            margin-bottom: 22px;
-
-                            @media #{$small} {
-                                align-items: flex-start;
-                            }
-                        }
-
-                        span {
-                            font-size: 0.875rem;
-                            line-height: 1.25rem;
+                            width: 300px;
                         }
                     }
                 }
@@ -1015,6 +1043,14 @@ p {
                     align-self: center;
                     max-width: 780px;
 
+                    @media #{$medium} {
+                        width: 460px;
+                    }
+
+                    @media #{$small} {
+                        width: 300px;
+                    }
+
                     .schools-conferences-region {
                         display: flex;
                         flex-direction: row;
@@ -1024,6 +1060,7 @@ p {
 
                         @media #{$medium-and-smaller} {
                             flex-direction: column;
+                            align-items: center;
                         }
 
                         .conference-image-and-caption {
@@ -1039,7 +1076,13 @@ p {
                         .conference-title-and-description {
                             display: flex;
                             flex-direction: column;
+                            align-items: flex-start;
                             width: 460px;
+                        
+                            @media #{$small} {
+                                width: 300px;
+                            }
+                            
                         }
 
                         .left {
@@ -1050,10 +1093,44 @@ p {
             }
         }
 
+        .conferences-hero-and-caption {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 540px;
+            margin-bottom: 24px;
+
+            img {
+                margin-bottom: 22px;
+
+                @media #{$medium-and-smaller} {
+                    width: 460px;
+                }
+            }
+
+            span {
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+            }
+
+            .conferences-hero {
+                background-image: url('/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png');
+                overflow: hidden;
+                background-position: center center;
+                height: 320px;
+                width: 100%;
+            }
+        }
+
         .teacher-quote {
             width: 620px;
             text-align: left;
 
+            @media #{$medium} {
+                width: 460px;
+                padding: 0px;
+            }
+
             @media #{$small} {
                 width: 100%;
                 padding: 0px;
@@ -1453,9 +1530,18 @@ p {
     }
 
     .initiatives-community {
-        .hero {
+        .community-hero-img {
             width: 100%;
             margin: 52px 0;
+
+            background-image: url("/images/annual-report/initiatives/community-hero.png");
+            background-size: cover;
+            background-position: center center;
+            overflow: hidden;
+            
+            @media #{$small} {
+                height: 244px;
+            }
         }
 
         .moderation-and-guidelines {
@@ -1575,6 +1661,12 @@ p {
                 max-width: 380px;
                 font-size: .875rem;
                 text-align: center;
+
+                @media #{$small} {
+                    img {
+                        width: 300px;
+                    }
+                }
             }
 
             .blm-projects {
@@ -2219,7 +2311,10 @@ p {
         @media #{$medium-and-smaller} {
             margin-left: 0px;
             text-align: center;
-            width: 75%;
+        }
+
+        @media #{$small} {
+            width: 300px;
         }