From 1648ad25d81545eb7136e11cc77bbd8d95394eb8 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Tue, 13 Oct 2020 10:04:49 -0400
Subject: [PATCH] continued work on initiatives

---
 src/views/annual-report/annual-report.jsx  | 28 ++++++++++++++--------
 src/views/annual-report/annual-report.scss | 15 +++++++++++-
 src/views/annual-report/l10n.json          |  6 +++++
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 44735d34d..eb00a6f8b 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -879,24 +879,24 @@ class AnnualReport extends React.Component {
                                             <div className="guidelines-list">
                                                 <ul>
                                                     <li>
-                                                        <FormattedMessage id="guidelines.respectheader" />
+                                                        <FormattedMessage id="annualReport.communityGuidelinesRespect" />
                                                     </li>
                                                     <li>
-                                                        <FormattedMessage id="guidelines.shareheader" />
+                                                        <FormattedMessage id="annualReport.communityGuidelinesShare" />
                                                     </li>
                                                     <li>
-                                                        <FormattedMessage id="guidelines.honestheader" />
+                                                        <FormattedMessage id="annualReport.communityGuidelinesHonest" />
                                                     </li>
                                                 </ul>
                                                 <ul>
                                                     <li>
-                                                        <FormattedMessage id="guidelines.constructiveheader" />
+                                                        <FormattedMessage id="annualReport.communityGuidelinesConstructive" />
                                                     </li>
                                                     <li>
-                                                        <FormattedMessage id="guidelines.privacyheader" />
+                                                        <FormattedMessage id="annualReport.communityGuidelinesPrivacy" />
                                                     </li>
                                                     <li>
-                                                        <FormattedMessage id="guidelines.friendlyheader" />
+                                                        <FormattedMessage id="annualReport.communityGuidelinesFriendly" />
                                                     </li>
                                                 </ul>
                                             </div>
@@ -1010,7 +1010,9 @@ class AnnualReport extends React.Component {
                                                 <div>qood</div>
                                             </div>
                                             <Comment
-                                                comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote3'})}
+                                                comment={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.communityQuote3'}
+                                                )}
                                             />
                                         </div>
                                         <div className="community-quote">
@@ -1022,7 +1024,9 @@ class AnnualReport extends React.Component {
                                                 <div>Mechanical_pencil</div>
                                             </div>
                                             <Comment
-                                                comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote4'})}
+                                                comment={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.communityQuote4'}
+                                                )}
                                             />
                                         </div>
                                     </div>
@@ -1038,7 +1042,9 @@ class AnnualReport extends React.Component {
                                                     values={{
                                                         BLMStudioLink: (
                                                             <a href="studio/26964367">
-                                                                Black Lives Matter <FormattedMessage id="annualReport.studio" />
+                                                                Black Lives Matter <FormattedMessage
+                                                                    id="annualReport.studio"
+                                                                />
                                                             </a>
                                                         )
                                                     }}
@@ -1069,7 +1075,9 @@ class AnnualReport extends React.Component {
                                             </p>
                                         </div>
                                     </div>
-                                    <div className="video-container blm">
+                                </div>
+                                <div className="video-container">
+                                    <div className="video-background blm">
                                         <VideoPreview
                                             buttonMessage={
                                                 this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index 0065cd258..ac67d5cc8 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -719,10 +719,19 @@ p {
     }
 
     .video-container {
+        width: 100%;
+        overflow: hidden;
+
+        display: flex;
+        justify-content: center;
+    }
+
+    .video-background {
         width: 1020px;
         height: 500px;
+        overflow: hidden;
 
-        background-size: 100% auto;
+        background-size: cover;
         background-repeat: no-repeat;
         background-position: 50% 50%;
 
@@ -730,6 +739,10 @@ p {
         align-items: center;
         justify-content: center;
 
+        @media #{$big} {
+              
+        }
+
         &.blm {
             background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg");
         }
diff --git a/src/views/annual-report/l10n.json b/src/views/annual-report/l10n.json
index 07a5ba244..5e5d4ad54 100644
--- a/src/views/annual-report/l10n.json
+++ b/src/views/annual-report/l10n.json
@@ -79,6 +79,12 @@
     "annualReport.communityModerationInfo": "When young people join the Scratch community, they agree to follow a set of Community Guidelines, which are designed to keep Scratch a safe and supportive place for young people from all backgrounds. Our Community Team uses a wide variety of tools and strategies to encourage good digital citizenship and maintain a positive environment for Scratchers to create in. Automated filters prevent private information from being shared or inappropriate content from being posted, and we allow anyone to report content they feel violates the Community Guidelines.",
     "annualReport.communityGuidelinesTitle": "Community Guidelines",
     "annualReport.communityGuidelinesInfo": "Scratch welcomes people of all ages, races, ethnicities, religions, abilities, sexual orientations, and gender identities.",
+    "annualReport.communityGuidelinesRespect": "Be respectful.",
+    "annualReport.communityGuidelinesShare": "Share.",
+    "annualReport.communityGuidelinesHonest": "Be honest.",
+    "annualReport.communityGuidelinesConstructive": "Be constructive.",
+    "annualReport.communityGuidelinesPrivacy": "Keep personal info private.",
+    "annualReport.communityGuidelinesFriendly": "Help keep the site friendly.",
     "annualReport.communityEngagementTitle": "Community Engagement",
     "annualReport.storySwap": "Story Swap",
     "annualReport.communityEngagementInfo": "Another major role of the Community Team is to highlight and develop opportunities for young people to express their ideas and become engaged in positive ways. The team features projects and studios from community members to serve as inspiration, and it regularly posts Scratch Design Studios to encourage creative activity. Each summer, the team organizes an online Scratch Camp: the theme in 2019 was {storySwapLink}, with Scratchers building on one another’s stories.",