diff --git a/package.json b/package.json index faa986552..337d8ee7f 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "react-responsive": "3.0.0", "react-slick": "0.16.0", "react-string-replace": "0.4.1", - "scratch-gui": "0.1.0-prerelease.20190215143519", + "scratch-gui": "0.1.0-prerelease.20190228140239", "react-telephone-input": "4.3.4", "redux": "3.5.2", "redux-thunk": "2.0.1", diff --git a/src/components/footer/conference/2019/footer.jsx b/src/components/footer/conference/2019/footer.jsx new file mode 100644 index 000000000..82447b071 --- /dev/null +++ b/src/components/footer/conference/2019/footer.jsx @@ -0,0 +1,121 @@ +const injectIntl = require('react-intl').injectIntl; +const intlShape = require('react-intl').intlShape; +const FormattedMessage = require('react-intl').FormattedMessage; +const React = require('react'); + +const FlexRow = require('../../../flex-row/flex-row.jsx'); +const FooterBox = require('../../container/footer.jsx'); +const LanguageChooser = require('../../../languagechooser/languagechooser.jsx'); + +require('../footer.scss'); + +const ConferenceFooter = props => ( + + +
+

+ + +
  • + Scratch +
    • +
  • + ScratchJr +
    • +     + +
  • + Scratch Foundation +
    • +
  • + ScratchEd +
    • +     + +
  • + Scratch Day +
    • +
  • + Scratch In Practice +
    • +     +     +

    + +

    +
    +
    +
    +

    + +

    +

    + + + +

    +
    +
    + +
  • + + scratch twitter + +
    • +
  • + + scratch facebook + +
    • +
  • + + scratch foundation blog + +
    • +
  • + + scratch instagram + +
    • +
  • + + scratch shopify + +
    • +     +
    +
    +     + +     +); + +ConferenceFooter.propTypes = { + intl: intlShape +}; + +module.exports = injectIntl(ConferenceFooter); diff --git a/src/components/footer/conference/footer.scss b/src/components/footer/conference/footer.scss index 3eafcc4cb..01d8c1b52 100644 --- a/src/components/footer/conference/footer.scss +++ b/src/components/footer/conference/footer.scss @@ -57,7 +57,7 @@ } .family { - width: $cols8; + width: $cols6; .flex-row { justify-content: space-between; @@ -74,7 +74,7 @@ } .media { - width: $cols3; + width: $cols4; text-align: center; .contact-us { diff --git a/src/components/navigation/conference/2019/navigation.jsx b/src/components/navigation/conference/2019/navigation.jsx new file mode 100644 index 000000000..07480c94f --- /dev/null +++ b/src/components/navigation/conference/2019/navigation.jsx @@ -0,0 +1,38 @@ +const injectIntl = require('react-intl').injectIntl; +const React = require('react'); +const FormattedMessage = require('react-intl').FormattedMessage; + +const NavigationBox = require('../../base/navigation.jsx'); + +require('./navigation.scss'); + +const Navigation = () => ( + + + +); + +module.exports = injectIntl(Navigation); diff --git a/src/components/navigation/conference/2019/navigation.scss b/src/components/navigation/conference/2019/navigation.scss new file mode 100644 index 000000000..5036df57a --- /dev/null +++ b/src/components/navigation/conference/2019/navigation.scss @@ -0,0 +1,39 @@ +@import "../../../../colors"; +@import "../../../../frameless"; + +#navigation { + .ul.2019 { + display: flex; + justify-content: space-between; + flex-flow: row nowrap; + align-items: center; + list-style-type: none; + } + + .li-left.2019 { + 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/2019/page.jsx b/src/components/page/conference/2019/page.jsx new file mode 100644 index 000000000..c8649cbcf --- /dev/null +++ b/src/components/page/conference/2019/page.jsx @@ -0,0 +1,27 @@ +const PropTypes = require('prop-types'); +const React = require('react'); + +const Navigation = require('../../../navigation/conference/2019/navigation.jsx'); +const Footer = require('../../../footer/conference/2019/footer.jsx'); + +require('../page.scss'); + +const Page = props => ( +
    + +
    + {props.children} +
    + +
    +); + +Page.propTypes = { + children: PropTypes.node +}; + +module.exports = Page; diff --git a/src/l10n.json b/src/l10n.json index 90eaeba70..cd3e528d4 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -11,12 +11,17 @@ "general.community": "Community", "general.confirmEmail": "Confirm Email", "general.contactUs": "Contact Us", + "general.contact": "Contact", + "general.emailUs": "Email Us", + "general.conferences": "Conferences", "general.copyright": "Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab", + "general.copyrightDraft": "Scratch is a project of the Scratch Foundation in collaboration with the Lifelong Kindergarten Group at the MIT Media Lab.", "general.country": "Country", "general.create": "Create", "general.credits": "Credits", "general.dmca": "DMCA", "general.emailAddress": "Email Address", + "general.english": "English", "general.error": "Oops! Something went wrong", "general.errorIdentifier": "Your error was logged with id {errorId}", "general.explore": "Explore", diff --git a/src/redux/preview.js b/src/redux/preview.js index 12a06ba7b..0a3eb2a5d 100644 --- a/src/redux/preview.js +++ b/src/redux/preview.js @@ -954,9 +954,8 @@ module.exports.shareProject = (projectId, token) => (dispatch => { module.exports.reportProject = (id, jsonData, token) => (dispatch => { dispatch(module.exports.setFetchStatus('report', module.exports.Status.FETCHING)); - // scratchr2 will fail if no thumbnail base64 string provided. We don't yet have - // a way to get the actual project thumbnail in www/gui, so for now just submit - // a minimal base64 png string. + // scratchr2 will fail if no thumbnail base64 string provided. If there is not one + // included for any reason, include this minimal blank image. defaults(jsonData, { thumbnail: 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC' + '0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=' diff --git a/src/routes.json b/src/routes.json index e49c134cd..d9dc446eb 100644 --- a/src/routes.json +++ b/src/routes.json @@ -23,15 +23,13 @@ { "name": "conference-index", "pattern": "^/conference/?(\\?.*)?$", - "routeAlias": "/conference(?!/201[4-5])", - "view": "conference/2018/index/index", - "title": "Scratch Conference", - "viewportWidth": "device-width" + "routeAlias": "/conference(?!/201[4-9])", + "redirect": "/conference/2019" }, { "name": "conference-index-2017", "pattern": "^/conference/2017/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-9])", "view": "conference/2017/index/index", "title": "Scratch Conference", "viewportWidth": "device-width" @@ -39,21 +37,21 @@ { "name": "conference-details-2018", "pattern": "^/conference/2018/:id/details/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-9])", "view": "conference/2018/details/details", "title": "Event Details" }, { "name": "conference-expectations-2018", "pattern": "^/conference/2018/expect/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-9])", "view": "conference/2018/expect/expect", "title": "What to Expect" }, { "name": "conference-index-2018", "pattern": "^/conference/2018/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-9])", "view": "conference/2018/index/index", "title": "Scratch Conference", "viewportWidth": "device-width" @@ -61,17 +59,25 @@ { "name": "conference-plan-2018", "pattern": "^/conference/2018/plan/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-9])", "view": "conference/2018/plan/plan", "title": "Plan Your Visit" }, { "name": "conference-schedule-2018", "pattern": "^/conference/2018/schedule/?$", - "routeAlias": "/conference(?!/201[4-5])", + "routeAlias": "/conference(?!/201[4-9])", "view": "conference/2018/schedule/schedule", "title": "Conference Schedule" }, + { + "name": "conference-index-2019", + "pattern": "^/conference/2019/?$", + "routeAlias": "/conference(?!/201[4-9])", + "view": "conference/2019/index/index", + "title": "Scratch Conferences", + "viewportWidth": "device-width" + }, { "name": "connect", "pattern": "^/connect/?$", diff --git a/src/views/conference/2019/index/index.jsx b/src/views/conference/2019/index/index.jsx new file mode 100644 index 000000000..999c5a02e --- /dev/null +++ b/src/views/conference/2019/index/index.jsx @@ -0,0 +1,359 @@ +const FormattedDate = require('react-intl').FormattedDate; +const FormattedMessage = require('react-intl').FormattedMessage; +const React = require('react'); +const render = require('../../../../lib/render.jsx'); + +const FlexRow = require('../../../../components/flex-row/flex-row.jsx'); +const Page = require('../../../../components/page/conference/2019/page.jsx'); +const TitleBanner = require('../../../../components/title-banner/title-banner.jsx'); + +require('../../../../components/forms/button.scss'); +require('./index.scss'); + +const ConferenceSplash = () => ( +
    + +
    +

    + +

    +
    +
    + +
    +

    + +

    +

    + +

    +

    + +

    +

    + +

    +
    +
    + Envelope Icon +

    + +

    +
    +
    +
    + + Chile Flag +
    +

    Conferencia Scratch al Sur

    +
    +     +

    + +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Calendar Icon + + + {' - '} + +
    + Map Icon + {'Santiago, Chile'}
    + Audience Icon +
    + Language Icon +
    + Language Icon + {'#ScratchalSur'}
    + + + +
    +
    + + Kenya Flag +
    +

    +

    +
    +     +

    + +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Calendar Icon + + + {' - '} + +
    + Map Icon + {'Nairobi, Kenya'}
    + Audience Icon +
    + Language Icon +
    + Language Icon + {'#Scratch2019AFR'}
    + + + +
    +
    + + EU Flag +
    +

    +
    +     +

    + +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Calendar Icon + + + {' - '} + +
    + Map Icon + {'Cambridge, United Kingdom'}
    + Audience Icon +
    + Language Icon +
    + Language Icon + {'#ScratchEurope'}
    + + + +
    +
    +
    + Envelope Icon +

    + +

    + + + +
    +
    +); + +render(, document.getElementById('app')); diff --git a/src/views/conference/2019/index/index.scss b/src/views/conference/2019/index/index.scss new file mode 100644 index 000000000..300d342d1 --- /dev/null +++ b/src/views/conference/2019/index/index.scss @@ -0,0 +1,350 @@ +@import "../../../../colors"; +@import "../../../../frameless"; + +h1.title-banner-h1.mod-2019 { + position: absolute; + z-index: 1; + text-align: center; + left: 0; + right: 0; + padding-top: 5rem; + font-size: 3rem; +} + +.title-banner.mod-conference.mod-2019 { + padding-top: 0; + padding-bottom: 0; + margin-bottom: 2.5rem; +} + +.title-banner-image.mod-2019 { + position: relative; + z-index: 0; + margin-bottom: 1.75rem; + width: 100%; + height: 17rem; + background-image: url("/images/conference/index/2019/title-banner-3.jpg"); + background-position: center; + background-size: cover; + opacity: .4; +} + +.conf2019-panel { + margin: auto 5rem; +} + +.conf2019-panel, +.title-banner-h3.mod-2019 { +} + +.title-banner-h3.mod-2019 { + text-align: left; + font-size: 1rem; +} + +.conf2019-title-band { + background-color: $ui-blue; + text-align: center; +} + +.conf2019-title-band.conf2019-schedule-band { + padding-top: 1rem; + padding-bottom: 2rem; + margin-top: 2rem; +} + +.conf2019-title-band.conf2019-mailing-list { + padding-top: 2.25rem; + padding-bottom: 3rem; + margin-top: 2rem; +} + +.conf2019-title-band>h3 { + width: 48.75rem; + color: $type-white; + margin: auto; +} + +.conf2019-title-band>h3.conf2019-schedule { + font-weight: bold; + font-size: 1.6rem; +} + +.conf2019-title-band>h3.conf2019-mailing-list { + font-weight: normal; + font-size: 1.15rem; +} + +.conf2019-panel-title-text>h3 { + line-height: 1.7rem; +} + +.conf2019-description.conf2019-band { + margin-bottom: 2.5rem; + width: 48.75rem; +} + +.conf2019-description { + line-height: 1.9rem; + // width: 60%; + font-weight: normal; + font-size: 1rem; + color: $type-gray; + margin: 0 auto 1.6rem; +} + +.conf2019-panel { + border-bottom: 1px solid $ui-border; +} + +.conf2019-panel.mod-last { + border-bottom: 0; +} + +.flex-row.conf2019-panel-title { + justify-content: flex-start; + align-items: center; +} + +.conf2019-panel-flag { + margin-right: 6.25rem; + border: 1px solid $ui-border; + border-radius: 1px; + background-color: $ui-border; + width: 3.75rem; +} + +.conf2019-panel-desc { + margin: 2rem 0; +} + +.conf2019-mailing-list { + font-weight: normal; +} + +td { + padding: .75rem 1.25rem; + vertical-align: top; +} + +.conf2019-panel-row-icon-image { + margin-top: .125rem; + height: 1rem; +} + +.conf2019-large-icon-image { + height: 2.5rem; + margin: 1rem; +} + +.button.mod-2019-conf { + display: block; + margin: 2rem auto 0; + padding: 1rem 0; + width: 13.75rem; + text-align: center; + font-size: .9rem; +} + +.button.mod-2019-conf-website-button { + background-color: $ui-orange; + color: $type-white; +} + +.button.mod-2019-conf-maillist-button { + background-color: $ui-white; + color: $ui-blue-dark; +} + +@media #{$small} { + .index.mod-2019 { + text-align: left; + } + + h1.title-banner-h1.mod-2019 { + padding-top: 3.25rem; + font-size: 1.75rem; + } + + .title-banner.mod-conference.mod-2019 { + } + + .title-banner-image.mod-2019 { + height: 10rem; + } + + .conf2019-title-band>h3 { + width: initial; + margin: 0 1rem; + } + + .conf2019-panel { + margin: auto 1rem; + } + + .title-banner-h3.mod-2019 { + margin: 1rem .5rem .5rem; + font-size: 1rem; + line-height: 1.6rem; + } + + .conf2019-title-band>h3.conf2019-schedule { + font-size: 1.6rem; + } + + .conf2019-title-band>h3.conf2019-mailing-list { + font-size: 1.15rem; + } + + .conf2019-description.conf2019-band { + width: initial; + margin: 0 .5rem; + } + + .conf2019-description { + line-height: 1.9rem; + font-size: 1rem; + margin: 0 .5rem 1.6rem; + } + + .flex-row.conf2019-panel-title { + flex-direction: row; + } + + .conf2019-panel-flag { + margin-right: 1.25rem; + } + + .conf2019-panel-title-text { + max-width: 14rem; + } + + .conf2019-panel-row > td { + padding: .75rem .375rem .75rem 0; + } + + .conf2019-large-icon-image { + height: 2.5rem; + margin: 1rem; + } +} + +@media #{$medium} { + .index.mod-2019 { + text-align: left; + } + + h1.title-banner-h1.mod-2019 { + padding-top: 2.75rem; + font-size: 2.25rem; + } + + .title-banner.mod-conference.mod-2019 { + } + + .title-banner-image.mod-2019 { + height: 10rem; + } + + .conf2019-title-band>h3 { + margin: auto .5rem ; + width: initial; + } + + .conf2019-title-band>h3.conf2019-schedule { + font-size: 1.6rem; + } + + .conf2019-title-band>h3.conf2019-mailing-list { + font-size: 1.15rem; + } + + .conf2019-description.conf2019-band { + width: 464px; + margin: auto; + } + + .conf2019-description { + line-height: 1.9rem; + font-size: 1rem; + margin: 0 auto 1.6rem; + } + + .flex-row.conf2019-panel-title { + flex-direction: row; + } + + .conf2019-panel { + margin: auto .5rem; + } + + .conf2019-panel-flag { + margin-right: 2rem; + } + + .conf2019-panel-title-text { + max-width: 18.75rem; + } + + .button.mod-2019-panel { + width: 5.75rem; + } + + .conf2019-large-icon-image { + height: 2.5rem; + margin: 1rem; + } +} + +@media #{$intermediate} { + .index.mod-2019 { + text-align: left; + } + + h1.title-banner-h1.mod-2019 { + padding-top: 4.75rem; + font-size: 2.75rem; + } + + .title-banner.mod-conference.mod-2019 { + } + + .title-banner-image.mod-2019 { + height: 15rem; + } + + .conf2019-title-band>h3 { + width: 38.75rem; + } + + .conf2019-panel { + margin: auto 4.5rem; + } + + .conf2019-title-band>h3.conf2019-schedule { + font-size: 1.6rem; + } + + .conf2019-title-band>h3.conf2019-mailing-list { + font-size: 1.15rem; + } + + .conf2019-description.conf2019-band { + width: 38.75rem; + } + + .conf2019-description { + line-height: 1.9rem; + font-size: 1rem; + margin: 0 auto 1.6rem; + } + + .button.mod-2019-panel { + width: 8.75rem; + } + + .conf2019-large-icon-image { + height: 2.5rem; + margin: 1rem; + } +} diff --git a/src/views/conference/2019/index/l10n.json b/src/views/conference/2019/index/l10n.json new file mode 100644 index 000000000..e2bf39d61 --- /dev/null +++ b/src/views/conference/2019/index/l10n.json @@ -0,0 +1,31 @@ +{ + "conference-2019.title": "Scratch Conferences 2019", + "conference-2019.descA": "Scratch conferences are playful gatherings of educators, researchers, developers, and other members of the worldwide Scratch community.", + "conference-2019.descB": "These events, held in various locations around the world, provide opportunities for people of diverse backgrounds and practices to discuss how they support children using Scratch, to collaborate and share ideas with one another, and to bring new creative-learning strategies and activities back to their own communities.", + "conference-2019.descC": "The first Scratch conference was held at MIT in 2008, and the Scratch Team has continued to organize a Scratch conference every other year. The next Scratch@MIT conference will be held in the summer of 2020 (in Cambridge, Massachusetts, USA).", + "conference-2019.descD": "In 2019, there will be several Scratch conferences held in other locations around the world (see below).", + + "conference-2019.seeBelow": "Schedule & Locations", + "conference-2019.joinMailingListButtonText": "Join Mailing List", + "conference-2019.joinMailingList": "To learn more about 2020’s Scratch@MIT conference in Cambridge, Massachusetts, and to receive updates about regional conferences around the world, join our mailing list.", + + "conference-2019.date": "Date", + "conference-2019.location": "Location", + "conference-2019.audience": "Audience", + "conference-2019.language": "Language", + "conference-2019.hashtag": "Hashtag", + "conference-2019.website": "Visit Website", + + "conference-2019.ukTitle": "Scratch Conference Europe", + "conference-2019.ukDesc": "Hosted by Raspberry Pi, the 2019 Scratch Conference Europe will take place in Cambridge, UK, from Friday 23 August to Sunday 25 August. The schedule is full of exciting participatory activities led by members of the Scratch community. Participants can look forward to workshops, talks, and keynotes across a range of topics, including the new Scratch 3.0, as well as plenty of informal opportunities to chat and connect!", + "conference-2019.ukAudience": "Education professionals and volunteers", + + "conference-2019.kenyaTitle": "Scratch2019NBO", + "conference-2019.kenyaSubTitle": "Waves of Innovation", + "conference-2019.kenyaDesc": "In recognition of Africa's technological contributions to the world and the potential of the youth of Africa, Scratch2019NBO will be held in Nairobi, Kenya. Join educators from around the world to share lessons, empower young people, and celebrate accomplishments in creative coding.", + "conference-2019.kenyaAudience": "Educators, students, and enthusiasts", + + "conference-2019.chileDesc": "Scratch al Sur is a gathering for teachers and policy makers to learn about the importance of introducing programming languages in schools. All lectures and workshops will provide an opportunity to share different experiences, from higher levels to those who are beginning to participate in Scratch's global community.", + "conference-2019.chileAudience": "Teachers and policy makers", + "conference-2019.spanishWithSimultaneous": "Spanish - simultaneous translation into English during plenary sessions" +} diff --git a/src/views/faq/faq.jsx b/src/views/faq/faq.jsx index a7fb6b9f3..557969351 100644 --- a/src/views/faq/faq.jsx +++ b/src/views/faq/faq.jsx @@ -147,7 +147,14 @@ const Faq = injectIntl(props => ( />
    -
    +
    + + )}} + /> +