From 90a9075dbf8ea08c13170e62355a9f87871ee340 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Tue, 15 Mar 2022 18:22:40 -0400 Subject: [PATCH 1/2] Add 2022 conference page. Refactor a bit of 2021 conference code so we don't have to create duplicate componenets --- .../footer/conference/2021/footer.jsx | 9 +- src/components/footer/conference/footer.scss | 8 + src/components/page/conference/2021/page.jsx | 7 +- src/routes.json | 30 ++-- src/views/conference/2021/index/index.jsx | 5 +- src/views/conference/2021/index/index.scss | 7 - src/views/conference/2022/index/index.jsx | 95 ++++++++++ src/views/conference/2022/index/index.scss | 170 ++++++++++++++++++ src/views/conference/2022/index/l10n.json | 18 ++ 9 files changed, 325 insertions(+), 24 deletions(-) create mode 100644 src/views/conference/2022/index/index.jsx create mode 100644 src/views/conference/2022/index/index.scss create mode 100644 src/views/conference/2022/index/l10n.json diff --git a/src/components/footer/conference/2021/footer.jsx b/src/components/footer/conference/2021/footer.jsx index 3e10e4a15..d1431c9f2 100644 --- a/src/components/footer/conference/2021/footer.jsx +++ b/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 => ( -
- +
+
); ConferenceFooter.propTypes = { - intl: intlShape + intl: intlShape, + organizedByMsgId: PropTypes.string }; module.exports = injectIntl(ConferenceFooter); diff --git a/src/components/footer/conference/footer.scss b/src/components/footer/conference/footer.scss index 01d8c1b52..b246fe3ef 100644 --- a/src/components/footer/conference/footer.scss +++ b/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; + } } diff --git a/src/components/page/conference/2021/page.jsx b/src/components/page/conference/2021/page.jsx index faa039eb1..fd3083601 100644 --- a/src/components/page/conference/2021/page.jsx +++ b/src/components/page/conference/2021/page.jsx @@ -15,13 +15,16 @@ const Page = props => ( {props.children}
); Page.propTypes = { - children: PropTypes.node + children: PropTypes.node, + footerOrganizedByMsgId: PropTypes.string }; module.exports = Page; diff --git a/src/routes.json b/src/routes.json index 51b67f68c..a29daadfe 100644 --- a/src/routes.json +++ b/src/routes.json @@ -40,13 +40,13 @@ { "name": "conference-index", "pattern": "^/conference/?(\\?.*)?$", - "routeAlias": "/conference(?!/201[4-9])", - "redirect": "/conference/2021" + "routeAlias": "/conference(?!/20[1-2][0-9])", + "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/?$", diff --git a/src/views/conference/2021/index/index.jsx b/src/views/conference/2021/index/index.jsx index 8f46f79a9..ab0a0fcf4 100644 --- a/src/views/conference/2021/index/index.jsx +++ b/src/views/conference/2021/index/index.jsx @@ -93,4 +93,7 @@ const ConferenceSplash = () => ( ); -render(, document.getElementById('app')); +render( + , document.getElementById('app')); diff --git a/src/views/conference/2021/index/index.scss b/src/views/conference/2021/index/index.scss index 9d7980309..d1871eeb2 100644 --- a/src/views/conference/2021/index/index.scss +++ b/src/views/conference/2021/index/index.scss @@ -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 { diff --git a/src/views/conference/2022/index/index.jsx b/src/views/conference/2022/index/index.jsx new file mode 100644 index 000000000..76b8dcc0c --- /dev/null +++ b/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 = () => ( +
+ +
+

+
+ +
+

+

+ +

+ +
+
+

+ {' '} + +
+
+ +

+ + + + + + + + + + + + + +
+ Calendar Icon + + +
+ Map Icon +
+
+ +
+ +
+
+

+ + conference@scratch.mit.edu + + }} + /> +
+
+ +

+
+
+
+); + +render( + , document.getElementById('app')); diff --git a/src/views/conference/2022/index/index.scss b/src/views/conference/2022/index/index.scss new file mode 100644 index 000000000..60f01d15c --- /dev/null +++ b/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/2021/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; + } +} diff --git a/src/views/conference/2022/index/l10n.json b/src/views/conference/2022/index/l10n.json new file mode 100644 index 000000000..32717db3c --- /dev/null +++ b/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." +} From 96f2ba67d5734e6900fd95423fbab8be2c82fa51 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Wed, 16 Mar 2022 10:43:57 -0400 Subject: [PATCH 2/2] Move shared image to a shared folder --- src/views/conference/2021/index/index.scss | 2 +- src/views/conference/2022/index/index.scss | 2 +- .../index/{2021 => shared}/title-banner.jpg | Bin 3 files changed, 2 insertions(+), 2 deletions(-) rename static/images/conference/index/{2021 => shared}/title-banner.jpg (100%) diff --git a/src/views/conference/2021/index/index.scss b/src/views/conference/2021/index/index.scss index d1871eeb2..31d448ed3 100644 --- a/src/views/conference/2021/index/index.scss +++ b/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%; diff --git a/src/views/conference/2022/index/index.scss b/src/views/conference/2022/index/index.scss index 60f01d15c..202d63bac 100644 --- a/src/views/conference/2022/index/index.scss +++ b/src/views/conference/2022/index/index.scss @@ -8,7 +8,7 @@ .title-banner-image.mod-2022 { 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%; diff --git a/static/images/conference/index/2021/title-banner.jpg b/static/images/conference/index/shared/title-banner.jpg similarity index 100% rename from static/images/conference/index/2021/title-banner.jpg rename to static/images/conference/index/shared/title-banner.jpg