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" +}