create 2019 folder

src/routes.json

@@ -9,8 +9,9 @@
     {
         "name": "annual-report",
         "pattern": "^/annual-report/?(\\?.*)?$",
-        "routeAlias": "/annual-report/?$",
-        "view": "annual-report/annual-report",
+        "routeAlias": "/annual-report/2019/?$",
+        "view": "annual-report/2019/index/annual-report",
+        "redirect": "/annual-report/2019",
         "title": "Annual Report",
         "viewportWidth": "device-width"
     },

src/views/annual-report/2019/index/annual-report.jsx

@@ -6,21 +6,21 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
 
-const render = require('../../lib/render.jsx');
-const frameless = require('../../lib/frameless');
+const render = require('../../../../lib/render.jsx');
+const frameless = require('../../../../lib/frameless');
 
-const Avatar = require('../../components/avatar/avatar.jsx');
-const Page = require('../../components/page/www/page.jsx');
-const Grid = require('../../components/grid/grid.jsx');
-const Button = require('../../components/forms/button.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const Comment = require('../../components/comment/comment.jsx');
-const WorldMap = require('../../components/world-map/world-map.jsx');
+const Avatar = require('../../../../components/avatar/avatar.jsx');
+const Page = require('../../../../components/page/www/page.jsx');
+const Grid = require('../../../../components/grid/grid.jsx');
+const Button = require('../../../../components/forms/button.jsx');
+const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+const Comment = require('../../../../components/comment/comment.jsx');
+const WorldMap = require('../../../../components/world-map/world-map.jsx');
 const CountryUsage = require('./country-usage.json');
-const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
+const PeopleGrid = require('../../../../components/people-grid/people-grid.jsx');
 const People = require('./people.json');
 const BLMProjects = require('./blm-projects.json');
-const VideoPreview = require('../../components/video-preview/video-preview.jsx');
+const VideoPreview = require('../../../../components/video-preview/video-preview.jsx');
 const Supporters = require('./supporters.json');
 
 require('./annual-report.scss');

src/views/annual-report/2019/index/annual-report.scss

@@ -1,5 +1,5 @@
-@import "../../colors";
-@import "../../frameless";
+@import "../../../../colors";
+@import "../../../../frameless";
 
 $base-bg: $ui-white;
 

src/views/annual-report/2020/index/annual-report.jsx

@@ -886,7 +886,7 @@ class AnnualReport extends React.Component {
                                         <p className="bold">
                                             <FormattedMessage id="annualReport.connectivityWorldSubtitle" />
                                         </p>
-                                        <a href="https://scratch.wistia.com/medias/rlsjbx0st4">
+                                        <a className="video" href="https://scratch.wistia.com/medias/rlsjbx0st4">
                                             <img src="/images/annual-report/2020/connectivity/Scratch Around the World Video.svg" />
                                         </a>
                                     </div>

src/views/annual-report/2020/index/annual-report.scss

@@ -1180,6 +1180,7 @@ img.comment-viz{
     }
 
     .initiatives-subsection-content.connectivity{
+        overflow: hidden;
         .bold{
             font-weight: bold;
         }
@@ -1271,20 +1272,28 @@ img.comment-viz{
             .bubble{
                 margin-left: auto;
             }
-            img{
+            a.video{
                 width: 100%;
+                overflow: hidden;
                 @media #{$intermediate-and-smaller} {
-                    width: 170%;
-                    overflow: hidden;
+                    // width: 170%;
+                    // overflow: hidden;
                     margin-left: -35%;
                 }
+                img{
+                    width: 100%;
+                    @media #{$intermediate-and-smaller} {
+                        width: 170%;
+                        overflow: hidden;
+                        // margin-left: -35%;
+                    }
+                }
             }
         }
         .inner {
             display: flex;
             flex-direction: column;
             align-items: center;
-
             @media #{$big} {
                 max-width: 940px;
                 padding: 72px 0;