Merge pull request #6652 from kchadha/conference-page-updates

Add 2022 conference page

src/components/footer/conference/2021/footer.jsx

@@ -2,6 +2,8 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
 const React = require('react');
+const PropTypes = require('prop-types');
+
 
 const FlexRow = require('../../../flex-row/flex-row.jsx');
 const FooterBox = require('../../container/footer.jsx');
@@ -145,14 +147,15 @@ const ConferenceFooter = props => (
             </div>
         </FlexRow>
         <LanguageChooser locale={props.intl.locale} />
-        <div className="conf2021-organized">
+        <div className="organized-by-message">
-            <FormattedMessage id="conference-2021.organizedBy" />
+            <FormattedMessage id={props.organizedByMsgId} />
         </div>
     </FooterBox>
 );
 
 ConferenceFooter.propTypes = {
-    intl: intlShape
+    intl: intlShape,
+    organizedByMsgId: PropTypes.string
 };
 
 module.exports = injectIntl(ConferenceFooter);

src/components/footer/conference/footer.scss

@@ -168,4 +168,12 @@
     .language-chooser {
         text-align: center;
     }
+
+    .organized-by-message {
+        font-size: .875rem;
+        margin: 0 auto;
+        text-align: center;
+        padding: 1rem 0 2.5rem;
+        line-height: 1.5em;
+    }
 }

src/components/page/conference/2021/page.jsx

@@ -15,13 +15,16 @@ const Page = props => (
             {props.children}
         </div>
         <div id="footer">
-            <Footer />
+            <Footer
+                organizedByMsgId={props.footerOrganizedByMsgId}
+            />
         </div>
     </div>
 );
 
 Page.propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    footerOrganizedByMsgId: PropTypes.string
 };
 
 module.exports = Page;

src/routes.json

@@ -40,13 +40,13 @@
     {
         "name": "conference-index",
         "pattern": "^/conference/?(\\?.*)?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
-        "redirect": "/conference/2021"
+        "redirect": "/conference/2022"
     },
     {
         "name": "conference-index-2017",
         "pattern": "^/conference/2017/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2017/index/index",
         "title": "Scratch Conference",
         "viewportWidth": "device-width"
@@ -54,21 +54,21 @@
     {
         "name": "conference-details-2018",
         "pattern": "^/conference/2018/:id/details/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2018/details/details",
         "title": "Event Details"
     },
     {
         "name": "conference-expectations-2018",
         "pattern": "^/conference/2018/expect/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2018/expect/expect",
         "title": "What to Expect"
     },
     {
         "name": "conference-index-2018",
         "pattern": "^/conference/2018/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2018/index/index",
         "title": "Scratch Conference",
         "viewportWidth": "device-width"
@@ -76,21 +76,21 @@
     {
         "name": "conference-plan-2018",
         "pattern": "^/conference/2018/plan/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2018/plan/plan",
         "title": "Plan Your Visit"
     },
     {
         "name": "conference-schedule-2018",
         "pattern": "^/conference/2018/schedule/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2018/schedule/schedule",
         "title": "Conference Schedule"
     },
     {
         "name": "conference-index-2019",
         "pattern": "^/conference/2019/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2019/index/index",
         "title": "Scratch Conferences",
         "viewportWidth": "device-width"
@@ -98,17 +98,25 @@
     {
         "name": "conference-index-2020",
         "pattern": "^/conference/2020/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "redirect": "/conference/2021"
     },
     {
         "name": "conference-index-2021",
         "pattern": "^/conference/2021/?$",
-        "routeAlias": "/conference(?!/201[4-9])",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
         "view": "conference/2021/index/index",
         "title": "Scratch Conferences",
         "viewportWidth": "device-width"
     },
+    {
+        "name": "conference-index-2022",
+        "pattern": "^/conference/2022/?$",
+        "routeAlias": "/conference(?!/20[1-2][0-9])",
+        "view": "conference/2022/index/index",
+        "title": "Scratch Conferences",
+        "viewportWidth": "device-width"
+    },
     {
         "name": "connect",
         "pattern": "^/connect/?$",

src/views/conference/2021/index/index.jsx

@@ -93,4 +93,7 @@ const ConferenceSplash = () => (
     </div>
 );
 
-render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
+render(
+    <Page
+        footerOrganizedByMsgId="conference-2021.organizedBy"
+    ><ConferenceSplash /></Page>, document.getElementById('app'));

src/views/conference/2021/index/index.scss

@@ -8,7 +8,7 @@
 .title-banner-image.mod-2021 {
     opacity: .75;
     margin-bottom: 1.75rem;
-    background-image: url("/images/conference/index/2021/title-banner.jpg");
+    background-image: url("/images/conference/index/shared/title-banner.jpg");
     background-position: center;
     background-size: cover;
     width: 100%;
@@ -76,13 +76,6 @@ td {
     text-align: center;
     color: $type-white;
 }
-.conf2021-organized {
-    font-size: .875rem;
-    margin: 0 auto;
-    text-align: center;
-    padding: 1rem 0 2.5rem;
-    line-height: 1.5em;
-}
 
 @media only screen and (max-width: $mobile - 1) {
     .index.mod-2021 {

src/views/conference/2022/index/index.jsx

@@ -0,0 +1,95 @@
+const FormattedDate = require('react-intl').FormattedDate;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+const render = require('../../../../lib/render.jsx');
+
+// Using the 2021 page on purpose here since the layout of the page is the same
+const Page = require('../../../../components/page/conference/2021/page.jsx');
+const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
+
+require('../../../../components/forms/button.scss');
+require('./index.scss');
+
+const ConferenceSplash = () => (
+    <div className="index mod-2022">
+        <TitleBanner className="mod-conference mod-2022">
+            <div className="title-banner-image mod-2022" />
+            <h1 className="title-banner-h1 mod-2022">
+                <center>
+                    <FormattedMessage id="conference-2022.title" />
+                </center>
+            </h1>
+            <h3 className="title-banner-h3 mod-2022">
+                <FormattedMessage id="conference-2022.dateDesc" />
+            </h3>
+        </TitleBanner>
+        <div className="inner">
+            <section className="conf2022-panel mod-desc">
+                <p className="conf2022-panel-desc">
+                    <FormattedMessage id="conference-2022.desc1" />{' '}
+                    <strong><FormattedMessage id="conference-2022.desc1a" /></strong>
+                    <br />
+                    <br />
+                    <FormattedMessage id="conference-2022.desc3" />
+                </p>
+                <table className="conf2022-panel-details">
+                    <tbody>
+                        <tr className="conf2022-panel-row">
+                            <td className="conf2022-panel-row-icon">
+                                <img
+                                    alt="Calendar Icon"
+                                    className="conf2022-panel-row-icon-image"
+                                    src="/svgs/conference/index/calendar-icon-solid.svg"
+                                />
+                            </td>
+                            <td><FormattedMessage id="conference-2022.date" /></td>
+                            <td>
+                                <FormattedDate
+                                    day="2-digit"
+                                    month="long"
+                                    value={new Date(2022, 6, 22)}
+                                    year="numeric"
+                                />
+                            </td>
+                        </tr>
+                        <tr className="conf2022-panel-row">
+                            <td className="conf2022-panel-row-icon">
+                                <img
+                                    alt="Map Icon"
+                                    className="conf2022-panel-row-icon-image"
+                                    src="/svgs/conference/index/map-icon-solid.svg"
+                                />
+                            </td>
+                            <td><FormattedMessage id="conference-2022.location" /></td>
+                            <td><FormattedMessage id="conference-2022.locationDetails" /></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <center>
+                    <FormattedMessage id="conference-2022.register" />
+                </center>
+
+            </section>
+            <section className="conf2022-panel mod-stay">
+                <p className="conf2022-panel-desc">
+                    <FormattedMessage
+                        id="conference-2022.stayDesc2"
+                        values={{
+                            emailLink: <a href="mailto:conference@scratch.mit.edu">
+                                conference@scratch.mit.edu
+                            </a>
+                        }}
+                    />
+                    <br />
+                    <br />
+                    <FormattedMessage id="conference-2022.organizedBy" />
+                </p>
+            </section>
+        </div>
+    </div>
+);
+
+render(
+    <Page
+        footerOrganizedByMsgId="conference-2022.organizedBy"
+    ><ConferenceSplash /></Page>, document.getElementById('app'));

src/views/conference/2022/index/index.scss

@@ -0,0 +1,170 @@
+@import "../../../../colors";
+@import "../../../../frameless";
+
+.title-banner.mod-conference.mod-2022 {
+    padding-top: 0;
+}
+
+.title-banner-image.mod-2022 {
+    opacity: .75;
+    margin-bottom: 1.75rem;
+    background-image: url("/images/conference/index/shared/title-banner.jpg");
+    background-position: center;
+    background-size: cover;
+    width: 100%;
+    height: 20rem;
+}
+
+.title-banner-h1.mod-2022 {
+    line-height: 1.25em;
+}
+
+.conf2022-panel,
+.title-banner-h3.mod-2022  {
+    width: 48.75rem;
+    margin: auto;
+}
+
+.title-banner-h3.mod-2022 {
+    margin: 2rem auto 0;
+}
+
+.title-banner-h3.mod-2022 {
+    text-align: center;
+    color: $type-white;
+}
+
+.conf2022-panel {
+    border-bottom: 1px solid $ui-border;
+}
+
+.conf2022-panel.mod-last {
+    border-bottom: 0;
+}
+
+.flex-row.conf2022-panel-title {
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.conf2022-panel-desc {
+    margin: 2rem 0;
+}
+
+section  {
+    padding-top: 3rem;
+}
+
+td {
+    padding: .75rem 1.25rem;
+    vertical-align: middle;
+}
+
+.conf2022-panel-row-icon-image {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+.mod-registration .conf2022-panel-desc {
+    margin-bottom: 0;
+}
+.button.mod-2022-panel {
+    display: block;
+    margin: 2rem auto 0;
+    background-color: $ui-orange;
+    padding: 1rem 0;
+    width: 13.75rem;
+    text-align: center;
+    color: $type-white;
+}
+
+@media only screen and (max-width: $mobile - 1) {
+    .index.mod-2022 {
+        text-align: left;
+    }
+
+    .title-banner-image.mod-2022 {
+        height: 10rem;
+    }
+
+    .conf2022-panel,
+    .title-banner-h3.mod-2022 {
+        width: initial;
+    }
+
+    .conf2022-panel {
+        margin: auto .5rem;
+    }
+
+    .title-banner-h3.mod-2022 {
+        margin: 1rem .5rem .5rem;
+        font-size: 1.1rem;
+    }
+
+    .flex-row.conf2022-panel-title {
+        flex-direction: row;
+    }
+
+    .conf2022-panel-title-text {
+        max-width: 14rem;
+    }
+
+    .conf2022-panel-row > td {
+        padding: .75rem .375rem .75rem 0;
+    }
+}
+
+@media only screen and (min-width: $mobile) and (max-width: $tabletPortrait - 1) {
+    .index.mod-2022 {
+        text-align: left;
+    }
+
+    .title-banner-image.mod-2022 {
+        height: 10rem;
+    }
+
+    .conf2022-panel,
+    .title-banner-h3.mod-2022 {
+        margin: auto .5rem ;
+        width: initial;
+    }
+
+    .title-banner-h3.mod-2022 {
+        font-size: 1.1rem;
+    }
+
+    .flex-row.conf2022-panel-title {
+        flex-direction: row;
+    }
+
+    .conf2022-panel-title-text {
+        max-width: 18.75rem;
+    }
+
+    .button.mod-2022-panel {
+        width: 5.75rem;
+    }
+}
+
+@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop - 1) {
+    .index.mod-2022 {
+        text-align: left;
+    }
+
+    .title-banner-image.mod-2022 {
+        height: 15rem;
+    }
+
+    .conf2022-panel,
+    .title-banner-h3.mod-2022 {
+        margin: auto;
+        width: 38.75rem;
+    }
+
+    .title-banner-h3.mod-2022 {
+        font-size: 1.1rem;
+    }
+
+    .button.mod-2022-panel {
+        width: 8.75rem;
+    }
+}

src/views/conference/2022/index/l10n.json

@@ -0,0 +1,18 @@
+{
+    "conference-2022.title": "Scratch Conference 2022",
+    "conference-2022.subtitle": "An Online Conference",
+    "conference-2022.dateDesc": "July 21, 2022",
+    "conference-2022.locationDetails": "Online",
+
+    "conference-2022.date": "When:",
+    "conference-2022.location": "Where:",
+
+    "conference-2022.desc1": "Join us for Scratch Conference 2022, an online gathering for educators interested in creative learning with Scratch! This year's theme will be \"What will you create?\"",
+    "conference-2022.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.",
+    "conference-2022.desc3": "The conference will be free of charge.",
+
+    "conference-2022.register": "Stay tuned for registration information!",
+
+    "conference-2022.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}",
+    "conference-2022.organizedBy": "The Scratch Conference is organized by the Scratch Foundation."
+}