From 4f14dfcbe392a76575a0de786726ad6cb8c929b1 Mon Sep 17 00:00:00 2001 From: Sheshank Shankar Date: Mon, 20 Nov 2017 06:12:12 -0800 Subject: [PATCH 1/6] Fixes #1633 - Scratch Conference 2018 Website Phase 1 (#1673) * add 2018 conference page (new subdirectory and index page) * Redirect /conference route to 2018, and add new route for /conference/2017 for last year's conferences. * Update mailto link in the footer --- .../footer/conference/2018/footer.jsx | 84 +++++++++ .../navigation/conference/2018/navigation.jsx | 29 ++++ .../conference/2018/navigation.scss | 39 +++++ src/components/page/conference/2018/page.jsx | 27 +++ src/routes.json | 10 +- src/views/conference/2018/index/index.jsx | 123 +++++++++++++ src/views/conference/2018/index/index.scss | 161 ++++++++++++++++++ src/views/conference/2018/index/l10n.json | 28 +++ 8 files changed, 500 insertions(+), 1 deletion(-) create mode 100644 src/components/footer/conference/2018/footer.jsx create mode 100644 src/components/navigation/conference/2018/navigation.jsx create mode 100644 src/components/navigation/conference/2018/navigation.scss create mode 100644 src/components/page/conference/2018/page.jsx create mode 100644 src/views/conference/2018/index/index.jsx create mode 100644 src/views/conference/2018/index/index.scss create mode 100644 src/views/conference/2018/index/l10n.json diff --git a/src/components/footer/conference/2018/footer.jsx b/src/components/footer/conference/2018/footer.jsx new file mode 100644 index 000000000..06daa2e92 --- /dev/null +++ b/src/components/footer/conference/2018/footer.jsx @@ -0,0 +1,84 @@ +var React = require('react'); +var ReactIntl = require('react-intl'); + +var injectIntl = ReactIntl.injectIntl; +var FormattedMessage = ReactIntl.FormattedMessage; + +var FlexRow = require('../../../flex-row/flex-row.jsx'); +var FooterBox = require('../../container/footer.jsx'); +var LanguageChooser = require('../../../languagechooser/languagechooser.jsx'); + +require('../footer.scss'); + +var ConferenceFooter = React.createClass({ + type: 'ConferenceFooter', + render: function () { + return ( + + +
+

+ + +
  • + Scratch +
    • +
  • + ScratchJr +
    • +     + +
  • + Scratch Foundation +
    • +
  • + ScratchEd +
    • +     + +
  • + Scratch Day +
    • +     +     +

    + +

    +
    +
    +
    +

    Contact

    +

    + + Email Us + +

    +
    +
    + +
  • + + scratch twitter + +
    • +
  • + + scratch facebook + +
    • +
  • + + scratch foundation blog + +
    • +     +
    +
    +     + +     + ); + } +}); + +module.exports = injectIntl(ConferenceFooter); diff --git a/src/components/navigation/conference/2018/navigation.jsx b/src/components/navigation/conference/2018/navigation.jsx new file mode 100644 index 000000000..97a820b0b --- /dev/null +++ b/src/components/navigation/conference/2018/navigation.jsx @@ -0,0 +1,29 @@ +var React = require('react'); + +var NavigationBox = require('../../base/navigation.jsx'); + +require('./navigation.scss'); + +var Navigation = React.createClass({ + type: 'Navigation', + render: function () { + return ( + + + + ); + } +}); + +module.exports = Navigation; diff --git a/src/components/navigation/conference/2018/navigation.scss b/src/components/navigation/conference/2018/navigation.scss new file mode 100644 index 000000000..3ea2c1799 --- /dev/null +++ b/src/components/navigation/conference/2018/navigation.scss @@ -0,0 +1,39 @@ +@import "../../../../colors"; +@import "../../../../frameless"; + +#navigation { + .ul.mod-2018 { + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + align-items: center; + list-style-type: none; + } + + .li-left.mod-2018 { + margin-top: 0; + margin-right: 10px; + color: $type-white; + } + + .logo-a { + display: flex; + height: 100%; + align-items: center; + } + + .logo-a-image { + margin-right: 10px; + border-right: 2px solid $active-gray; + padding-right: 10px; + width: 80px; + } + + .logo-a-title { + text-decoration: none; + white-space: nowrap; + color: $type-white; + font-size: .85rem; + font-weight: bold; + } +} diff --git a/src/components/page/conference/2018/page.jsx b/src/components/page/conference/2018/page.jsx new file mode 100644 index 000000000..e8dd6e6f8 --- /dev/null +++ b/src/components/page/conference/2018/page.jsx @@ -0,0 +1,27 @@ +var React = require('react'); + +var Navigation = require('../../../navigation/conference/2018/navigation.jsx'); +var Footer = require('../../../footer/conference/2018/footer.jsx'); + +require('../page.scss'); + +var Page = React.createClass({ + type: 'Page', + render: function () { + return ( +
    + +
    + {this.props.children} +
    + +
    + ); + } +}); + +module.exports = Page; diff --git a/src/routes.json b/src/routes.json index 8a8bdcbb2..b68120d45 100644 --- a/src/routes.json +++ b/src/routes.json @@ -44,7 +44,15 @@ { "name": "conference-index", "pattern": "^/conference/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-7])", + "view": "conference/2018/index/index", + "title": "Scratch Conference", + "viewportWidth": "device-width" + }, + { + "name": "conference-index-2017", + "pattern": "^/conference/2017/?$", + "routeAlias": "/conference(?!/201[4-6])", "view": "conference/2017/index/index", "title": "Scratch Conference", "viewportWidth": "device-width" diff --git a/src/views/conference/2018/index/index.jsx b/src/views/conference/2018/index/index.jsx new file mode 100644 index 000000000..554bcaa9a --- /dev/null +++ b/src/views/conference/2018/index/index.jsx @@ -0,0 +1,123 @@ +var FormattedDate = require('react-intl').FormattedDate; +var FormattedMessage = require('react-intl').FormattedMessage; +var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; +var React = require('react'); +var render = require('../../../../lib/render.jsx'); + +var FlexRow = require('../../../../components/flex-row/flex-row.jsx'); +var Page = require('../../../../components/page/conference/2018/page.jsx'); +var TitleBanner = require('../../../../components/title-banner/title-banner.jsx'); + +require('../../../../components/forms/button.scss'); +require('./index.scss'); + +var ConferenceSplash = React.createClass({ + type: 'ConferenceSplash', + + render: function () { + return ( +
    + +
    +

    +
    + +
    +

    +

    + +

    +     +
    +
    +

    + +

    + + + + + + + + + + + + + +
    + Calendar Icon + + + {' - '} + + +
    + Map Icon +
    +
    +
    +

    + +

    +

    +

    + +

    +

    + +

    +

    + +

    +

    + +

    +

    + + + +
    +
    + +
    +

    +
    +     +

    + +
    + +

    +
    +
    +

    + +

    +
    +
    +
    + ); + } +}); + +render(, document.getElementById('app')); diff --git a/src/views/conference/2018/index/index.scss b/src/views/conference/2018/index/index.scss new file mode 100644 index 000000000..23cfe7b73 --- /dev/null +++ b/src/views/conference/2018/index/index.scss @@ -0,0 +1,161 @@ +@import "../../../../colors"; +@import "../../../../frameless"; + +.title-banner.mod-conference.mod-2018 { + padding-top: 0; +} + +.title-banner-image.mod-2018 { + opacity: .75; + margin-bottom: 1.75rem; + background-image: url("/images/conference/index/2017/title-banner.jpg"); + background-position: center; + background-size: cover; + width: 100%; + height: 20rem; +} + +.conf2018-panel, +.title-banner-h3.mod-2018 { + margin: auto; + width: 48.75rem; +} + +.title-banner-h3.mod-2018 { + text-align: center; + color: $type-white; +} + +.conf2018-panel { + border-bottom: 1px solid $ui-border; +} + +.conf2018-panel.mod-last { + border-bottom: 0; +} + +.flex-row.conf2018-panel-title { + justify-content: flex-start; + align-items: center; +} + +.conf2018-panel-desc { + margin: 2rem 0; +} + +td { + padding: .75rem 1.25rem; + vertical-align: top; +} + +.conf2018-panel-row-icon-image { + margin-top: .125rem; + width: 1rem; + height: 1rem; +} + +.button.mod-2018-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-2018 { + text-align: left; + } + + .title-banner-image.mod-2018 { + height: 10rem; + } + + .title-banner-h1.mod-2018 { + line-height: 1.25em; + } + + .conf2018-panel, + .title-banner-h3.mod-2018 { + width: initial; + } + + .conf2018-panel { + margin: auto .5rem; + } + + .title-banner-h3.mod-2018 { + margin: 1rem .5rem .5rem; + font-size: 1.1rem; + } + + .flex-row.conf2018-panel-title { + flex-direction: row; + } + + .conf2018-panel-title-text { + max-width: 14rem; + } + + .conf2018-panel-row > td { + padding: .75rem .375rem .75rem 0; + } +} + +@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) { + .index.mod-2018 { + text-align: left; + } + + .title-banner-image.mod-2018 { + height: 10rem; + } + + .conf2018-panel, + .title-banner-h3.mod-2018 { + margin: auto .5rem ; + width: initial; + } + + .title-banner-h3.mod-2018 { + font-size: 1.1rem; + } + + .flex-row.conf2018-panel-title { + flex-direction: row; + } + + .conf2018-panel-title-text { + max-width: 18.75rem; + } + + .button.mod-2018-panel { + width: 5.75rem; + } +} + +@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) { + .index.mod-2018 { + text-align: left; + } + + .title-banner-image.mod-2018 { + height: 15rem; + } + + .conf2018-panel, + .title-banner-h3.mod-2018 { + margin: auto; + width: 38.75rem; + } + + .title-banner-h3.mod-2018 { + font-size: 1.1rem; + } + + .button.mod-2018-panel { + width: 8.75rem; + } +} diff --git a/src/views/conference/2018/index/l10n.json b/src/views/conference/2018/index/l10n.json new file mode 100644 index 000000000..fcf03baf8 --- /dev/null +++ b/src/views/conference/2018/index/l10n.json @@ -0,0 +1,28 @@ +{ + "conference-2018.title": "Scratch Conference 2018
    The Next Generation", + "conference-2018.dateDesc": "July 26-28, 2018 | Cambridge, MA, USA", + "conference-2018.dateDescMore": " (with opening reception the evening of July 25)", + "conference-2018.locationDetails": "MIT Media Lab, Cambridge, MA", + "conference-2018.seeBelow": "Learn more about conference dates and locations below.", + + "conference-2018.date": "When:", + "conference-2018.location": "Where:", + + "conference-2018.desc": "Join us for the Scratch@MIT conference, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community.

    We're planning a very participatory conference, with an entire day of hands-on workshops and lots of opportunities for peer-to-peer discussion and collaboration.", + + "conference-2018.sessionDesc": "Interested in offering a session? We invite four types of proposals:", + "conference-2018.sessionItem1": "Poster/demonstration (90 minutes). Show off your project in an exhibition setting, alongside other presenters. You will be provided with display space for a poster and table space for a computer or handouts.", + "conference-2018.sessionItem2": "Hands-on workshop (90 minutes). Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.", + "conference-2018.sessionItem3": "Interactive panel (60 minutes). Discuss a Scratch-related topic in a panel with three or more people. Your proposal should describe how you will engage the audience during the session.", + "conference-2018.sessionItem4": "Ignite talk (5 minutes). Share what you've been doing in a short, lively presentation.", + + "conference-2018.proposal": " Submit Your Proposal", + "conference-2018.proposalDeadline": "Deadline for proposals: February 5", + "conference-2018.proposalAccept": "Notification of acceptance: March 1", + + "conference-2018.registrationTitle": "Registration:", + "conference-2018.registrationEarly": "Early Bird Registration (March 1-May 1): $200", + "conference-2018.registrationStandard": "Standard Registration (after May 1): $300", + + "conference-2018.questions": "Questions? Contact the Scratch Team at conference@scratch.mit.edu" +} From 3283904bb9c9d192dd0c50f49f5046f1438dcf3d Mon Sep 17 00:00:00 2001 From: Sheshank Shankar Date: Mon, 20 Nov 2017 06:13:11 -0800 Subject: [PATCH 2/6] Add Learning Resource designer (#1676) --- src/views/jobs/jobs.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/views/jobs/jobs.jsx b/src/views/jobs/jobs.jsx index 7fa923f88..9a00774f1 100644 --- a/src/views/jobs/jobs.jsx +++ b/src/views/jobs/jobs.jsx @@ -54,6 +54,14 @@ var Jobs = React.createClass({ MIT Media Lab, Cambridge, MA +
  • + + Learning Resource Designer + + + MIT Media Lab, Cambridge, MA + +
    • From 2acf90ba41c2205e07cdbd10f36ddd939ff553b2 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Tue, 21 Nov 2017 09:25:42 -0500 Subject: [PATCH 3/6] Change back routeAlias for conference pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit These are needed to ensure that fastly doesn’t 404 on the 2016 and 2017 sites. --- src/routes.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes.json b/src/routes.json index b68120d45..d7e9ea809 100644 --- a/src/routes.json +++ b/src/routes.json @@ -44,7 +44,7 @@ { "name": "conference-index", "pattern": "^/conference/?$", - "routeAlias": "/conference(?!/201[4-7])", + "routeAlias": "/conference(?!/201[4-5])", "view": "conference/2018/index/index", "title": "Scratch Conference", "viewportWidth": "device-width" @@ -52,7 +52,7 @@ { "name": "conference-index-2017", "pattern": "^/conference/2017/?$", - "routeAlias": "/conference(?!/201[4-6])", + "routeAlias": "/conference(?!/201[4-5])", "view": "conference/2017/index/index", "title": "Scratch Conference", "viewportWidth": "device-width" From d55caf7e9667480293d5b03f54486c006302b3f5 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Tue, 21 Nov 2017 11:17:35 -0500 Subject: [PATCH 4/6] update translations to just use `FormattedMessage` --- src/views/conference/2018/index/index.jsx | 42 +++++++++++++++++------ src/views/conference/2018/index/l10n.json | 20 +++++++---- 2 files changed, 45 insertions(+), 17 deletions(-) diff --git a/src/views/conference/2018/index/index.jsx b/src/views/conference/2018/index/index.jsx index 554bcaa9a..0e7272ac3 100644 --- a/src/views/conference/2018/index/index.jsx +++ b/src/views/conference/2018/index/index.jsx @@ -1,6 +1,5 @@ var FormattedDate = require('react-intl').FormattedDate; var FormattedMessage = require('react-intl').FormattedMessage; -var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; var React = require('react'); var render = require('../../../../lib/render.jsx'); @@ -21,7 +20,9 @@ var ConferenceSplash = React.createClass({

    - + +
    +

    @@ -31,7 +32,10 @@ var ConferenceSplash = React.createClass({

    - + +
    +
    +

    @@ -77,20 +81,31 @@ var ConferenceSplash = React.createClass({

    - +

    - + + + {' '} +

    - + + + {' '} +

    - -

    + + + {' '} +

    - + + + {' '} +

    @@ -111,7 +126,14 @@ var ConferenceSplash = React.createClass({

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

    diff --git a/src/views/conference/2018/index/l10n.json b/src/views/conference/2018/index/l10n.json index fcf03baf8..1b27667b9 100644 --- a/src/views/conference/2018/index/l10n.json +++ b/src/views/conference/2018/index/l10n.json @@ -1,5 +1,6 @@ { - "conference-2018.title": "Scratch Conference 2018
    The Next Generation", + "conference-2018.title": "Scratch Conference 2018", + "conference-2018.subtitle": "The Next Generation", "conference-2018.dateDesc": "July 26-28, 2018 | Cambridge, MA, USA", "conference-2018.dateDescMore": " (with opening reception the evening of July 25)", "conference-2018.locationDetails": "MIT Media Lab, Cambridge, MA", @@ -8,13 +9,18 @@ "conference-2018.date": "When:", "conference-2018.location": "Where:", - "conference-2018.desc": "Join us for the Scratch@MIT conference, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community.

    We're planning a very participatory conference, with an entire day of hands-on workshops and lots of opportunities for peer-to-peer discussion and collaboration.", + "conference-2018.desc1": "Join us for the Scratch@MIT conference, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community.", + "conference-2018.desc2": "We're planning a very participatory conference, with an entire day of hands-on workshops and lots of opportunities for peer-to-peer discussion and collaboration.", "conference-2018.sessionDesc": "Interested in offering a session? We invite four types of proposals:", - "conference-2018.sessionItem1": "Poster/demonstration (90 minutes). Show off your project in an exhibition setting, alongside other presenters. You will be provided with display space for a poster and table space for a computer or handouts.", - "conference-2018.sessionItem2": "Hands-on workshop (90 minutes). Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.", - "conference-2018.sessionItem3": "Interactive panel (60 minutes). Discuss a Scratch-related topic in a panel with three or more people. Your proposal should describe how you will engage the audience during the session.", - "conference-2018.sessionItem4": "Ignite talk (5 minutes). Share what you've been doing in a short, lively presentation.", + "conference-2018.sessionItem1Title": "Poster/demonstration (90 minutes).", + "conference-2018.sessionItem1Desc": "Show off your project in an exhibition setting, alongside other presenters. You will be provided with display space for a poster and table space for a computer or handouts.", + "conference-2018.sessionItem2Title": "Hands-on workshop (90 minutes).", + "conference-2018.sessionItem2Desc": "Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.", + "conference-2018.sessionItem3Title": "Interactive panel (60 minutes).", + "conference-2018.sessionItem3Desc": "Discuss a Scratch-related topic in a panel with three or more people. Your proposal should describe how you will engage the audience during the session.", + "conference-2018.sessionItem4Title": "Ignite talk (5 minutes).", + "conference-2018.sessionItem2Desc": "Share what you've been doing in a short, lively presentation.", "conference-2018.proposal": " Submit Your Proposal", "conference-2018.proposalDeadline": "Deadline for proposals: February 5", @@ -24,5 +30,5 @@ "conference-2018.registrationEarly": "Early Bird Registration (March 1-May 1): $200", "conference-2018.registrationStandard": "Standard Registration (after May 1): $300", - "conference-2018.questions": "Questions? Contact the Scratch Team at conference@scratch.mit.edu" + "conference-2018.questions": "Questions? Contact the Scratch Team at {emailLink}" } From 666a893dad2893cc20421687b51aa0437efd6b33 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Tue, 21 Nov 2017 14:19:18 -0500 Subject: [PATCH 5/6] fix lint whoops! --- src/views/conference/2018/index/index.jsx | 3 ++- src/views/conference/2018/index/l10n.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/conference/2018/index/index.jsx b/src/views/conference/2018/index/index.jsx index 0e7272ac3..78a9e77f7 100644 --- a/src/views/conference/2018/index/index.jsx +++ b/src/views/conference/2018/index/index.jsx @@ -100,7 +100,8 @@ var ConferenceSplash = React.createClass({ {' '} -

    + +

    diff --git a/src/views/conference/2018/index/l10n.json b/src/views/conference/2018/index/l10n.json index 1b27667b9..885294732 100644 --- a/src/views/conference/2018/index/l10n.json +++ b/src/views/conference/2018/index/l10n.json @@ -20,7 +20,7 @@ "conference-2018.sessionItem3Title": "Interactive panel (60 minutes).", "conference-2018.sessionItem3Desc": "Discuss a Scratch-related topic in a panel with three or more people. Your proposal should describe how you will engage the audience during the session.", "conference-2018.sessionItem4Title": "Ignite talk (5 minutes).", - "conference-2018.sessionItem2Desc": "Share what you've been doing in a short, lively presentation.", + "conference-2018.sessionItem4Desc": "Share what you've been doing in a short, lively presentation.", "conference-2018.proposal": " Submit Your Proposal", "conference-2018.proposalDeadline": "Deadline for proposals: February 5", From 8f7bb287eda557c785e795c64a6689e2f6c4ffc3 Mon Sep 17 00:00:00 2001 From: Matthew Taylor Date: Tue, 21 Nov 2017 16:35:05 -0500 Subject: [PATCH 6/6] update transifex config to reflect new conference page --- .tx/config | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/.tx/config b/.tx/config index 082c15703..2e63e88f3 100644 --- a/.tx/config +++ b/.tx/config @@ -92,8 +92,8 @@ source_file = src/views/microworldshomepage/l10n.json source_lang = en type = KEYVALUEJSON -[scratch-website.conference-index-l10njson] -file_filter = localizations/conference-index/.json +[scratch-website.conference-index-2017-l10njson] +file_filter = localizations/conference-index-2017/.json source_file = src/views/conference/2017/index/l10n.json source_lang = en type = KEYVALUEJSON @@ -127,3 +127,9 @@ file_filter = localizations/messages/.json source_file = src/views/messages/l10n.json source_lang = en type = KEYVALUEJSON + +[scratch-website.conference-index-l10njson] +file_filter = localizations/conference-index/.json +source_file = src/views/conference/2018/index/l10n.json +source_lang = en +type = KEYVALUEJSON