scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-03-23 19:30:34 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions2

initial conference 2019 changes

Browse source
This commit is contained in:
Ben Wheeler 2019-02-15 12:11:14 -05:00
parent e1654458a2
commit 9509e698cb
9 changed files with 763 additions and 3 deletions
src
components
footer/conference/2019
footer.jsx
navigation/conference/2019
navigation.jsxnavigation.scss
page/conference
2019
page.jsx
page.scss
routes.json
views/conference/2019/index
index.jsxindex.scssl10n.json

108
src/components/footer/conference/2019/footer.jsx Normal file
View file

@ -0,0 +1,108 @@
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 => (
<FooterBox>
<FlexRow className="scratch-links">
<div className="family">
<h4><FormattedMessage id="footer.scratchFamily" /></h4>
<FlexRow>
<FlexRow
as="ul"
className="column"
>
<li>
<a href="https://scratch.mit.edu">Scratch</a>
</li>
<li>
<a href="https://www.scratchjr.org/">ScratchJr</a>
</li>
</FlexRow>
<FlexRow
as="ul"
className="column"
>
<li>
<a href="http://www.scratchfoundation.org/">Scratch Foundation</a>
</li>
<li>
<a href="http://scratched.gse.harvard.edu/">ScratchEd</a>
</li>
</FlexRow>
<FlexRow
as="ul"
className="column"
>
<li>
<a href="http://day.scratch.mit.edu">Scratch Day</a>
</li>
</FlexRow>
<FlexRow
as="ul"
className="column"
>
<li>
<a href="http://sip.scratch.mit.edu">Scratch In Practice</a>
</li>
</FlexRow>
</FlexRow>
<p className="legal">
<FormattedMessage id="general.copyright" />
</p>
</div>
<div className="media">
<div className="contact-us">
<h4>Contact</h4>
<p>
<a href="mailto:help@scratch.mit.edu">
Email Us
</a>
</p>
</div>
<div className="social">
<FlexRow as="ul">
<li>
<a href="//www.twitter.com/scratch">
<img
alt="scratch twitter"
src="/images/conference/footer/twitter.png"
/>
</a>
</li>
<li>
<a href="//www.facebook.com/scratchteam">
<img
alt="scratch facebook"
src="/images/conference/footer/facebook.png"
/>
</a>
</li>
<li>
<a href="http://medium.com/scratchfoundation-blog">
<img
alt="scratch foundation blog"
src="/images/conference/footer/medium.png"
/>
</a>
</li>
</FlexRow>
</div>
</div>
</FlexRow>
<LanguageChooser locale={props.intl.locale} />
</FooterBox>
);
ConferenceFooter.propTypes = {
intl: intlShape
};
module.exports = injectIntl(ConferenceFooter);

27
src/components/navigation/conference/2019/navigation.jsx Normal file
View file

@ -0,0 +1,27 @@
const React = require('react');
const NavigationBox = require('../../base/navigation.jsx');
require('./navigation.scss');
const Navigation = () => (
<NavigationBox>
<ul className="ul mod-2019">
<li className="li-left mod-logo mod-2019">
<a
className="logo-a"
href="/conference"
>
<img
alt="Scratch Logo"
className="logo-a-image"
src="/images/logo_sm.png"
/>
<p className="logo-a-title">Conferences</p>
</a>
</li>
</ul>
</NavigationBox>
);
module.exports = Navigation;

39
src/components/navigation/conference/2019/navigation.scss Normal file
View file

@ -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;
}
}

27
src/components/page/conference/2019/page.jsx Normal file
View file

@ -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 => (
<div className="page mod-conference">
<div id="navigation">
<Navigation />
</div>
<div id="view">
{props.children}
</div>
<div id="footer">
<Footer />
</div>
</div>
);
Page.propTypes = {
children: PropTypes.node
};
module.exports = Page;

4
src/components/page/conference/page.scss
View file

@ -75,13 +75,13 @@
font-size: 4.5rem;
}
.title-banner-h1.mod-2017 {
.title-banner-h1.mod-2017, .title-banner-h1.mod-2019 {
font-size: 4rem;
}
@media #{$medium-and-smaller} {
h1,
.title-banner-h1.mod-2017 {
.title-banner-h1.mod-2017, .title-banner-h1.mod-2019 {
font-size: 2.5rem;
}
}

10
src/routes.json
View file

@ -24,7 +24,7 @@
"name": "conference-index",
"pattern": "^/conference/?(\\?.*)?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2018/index/index",
"view": "conference/2019/index/index",
"title": "Scratch Conference",
"viewportWidth": "device-width"
},
@ -72,6 +72,14 @@
"view": "conference/2018/schedule/schedule",
"title": "Conference Schedule"
},
{
"name": "conference-index-2019",
"pattern": "^/conference/2019/?$",
"routeAlias": "/conference(?!/201[4-5])",
"view": "conference/2019/index/index",
"title": "Scratch Conference",
"viewportWidth": "device-width"
},
{
"name": "connect",
"pattern": "^/connect/?$",

319
src/views/conference/2019/index/index.jsx Normal file
View file

@ -0,0 +1,319 @@
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 = () => (
<div className="index mod-2019">
<TitleBanner className="mod-conference mod-2019">
<div className="title-banner-image mod-2019" />
<h1 className="title-banner-h1 mod-2019">
<FormattedMessage id="conference-2019.title" />
</h1>
<h3 className="title-banner-h3 mod-2019 conf2019-description">
<FormattedMessage id="conference-2019.desc" />
</h3>
</TitleBanner>
<h3 className="conf2019-title-band">
<FormattedMessage id="conference-2019.nextMITConference" />
<br />
<FormattedMessage id="conference-2019.seeBelow" />
</h3>
<div className="inner">
<section className="conf2019-panel mod-chile">
<FlexRow className="conf2019-panel-title">
<img
alt="Chile Flag"
className="conf2019-panel-flag"
src="/svgs/conference/flags/cl.svg"
/>
<div className="conf2019-panel-title-text">
<h3><FormattedMessage id="conference-2019.chileTitle" /></h3>
</div>
</FlexRow>
<p className="conf2019-panel-desc">
<FormattedMessage id="conference-2019.chileDesc" />
</p>
<table className="conf2019-panel-details">
<tbody>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Calendar Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/calendar-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.date" /></td>
<td>
<FormattedDate
day="2-digit"
month="long"
value={new Date(2019, 5, 30)}
year="numeric"
/>
{' - '}
<FormattedDate
day="2-digit"
month="long"
value={new Date(2019, 5, 31)}
year="numeric"
/>
</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Map Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/map-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.location" /></td>
<td>{'Santiago, Chile'}</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Audience Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/audience-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.audience" /></td>
<td><FormattedMessage id="conference-2019.chileAudience" /></td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Language Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/language-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.language" /></td>
<td>{'Español (Spanish) - simultaneous translation during plenary sessions'}</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Language Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/language-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.hashtag" /></td>
<td>{'#ScratchalSur'}</td>
</tr>
</tbody>
</table>
<a
className="button mod-2019-panel"
href="http://www.scratchalsur.org"
>
<FormattedMessage id="conference-2019.website" />
</a>
</section>
<section className="conf2019-panel mod-kenya">
<FlexRow className="conf2019-panel-title">
<img
alt="Kenya Flag"
className="conf2019-panel-flag"
src="/svgs/conference/flags/hu.svg"
/>
<div className="conf2019-panel-title-text">
<h3><FormattedMessage id="conference-2019.kenyaTitle" /></h3>
<h4><FormattedMessage id="conference-2019.kenyaSubTitle" /></h4>
</div>
</FlexRow>
<p className="conf2019-panel-desc">
<FormattedMessage id="conference-2019.kenyaDesc" />
</p>
<table className="conf2019-panel-details">
<tbody>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Calendar Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/calendar-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.date" /></td>
<td>
<FormattedDate
day="2-digit"
month="long"
value={new Date(2019, 7, 8)}
year="numeric"
/>
{' - '}
<FormattedDate
day="2-digit"
month="long"
value={new Date(2019, 7, 13)}
year="numeric"
/>
</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Map Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/map-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.location" /></td>
<td>{'Nairobi, Kenya'}</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Audience Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/audience-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.audience" /></td>
<td><FormattedMessage id="conference-2019.kenyaAudience" /></td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Language Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/language-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.language" /></td>
<td>{'English'}</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Language Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/language-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.hashtag" /></td>
<td>{'#scratch2019afr'}</td>
</tr>
</tbody>
</table>
<a
className="button mod-2019-panel"
href="https://www.scratchafrica.com"
>
<FormattedMessage id="conference-2019.website" />
</a>
</section>
<section className="conf2019-panel mod-uk">
<FlexRow className="conf2019-panel-title">
<img
alt="EU Flag"
className="conf2019-panel-flag"
src="/svgs/conference/flags/fr.svg"
/>
<div className="conf2019-panel-title-text">
<h3><FormattedMessage id="conference-2019.ukTitle" /></h3>
</div>
</FlexRow>
<p className="conf2019-panel-desc">
<FormattedMessage id="conference-2019.ukDesc" />
</p>
<table className="conf2019-panel-details">
<tbody>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Calendar Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/calendar-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.date" /></td>
<td>
<FormattedDate
day="2-digit"
month="long"
value={new Date(2019, 6, 18)}
year="numeric"
/>
{' - '}
<FormattedDate
day="2-digit"
month="long"
value={new Date(2019, 6, 21)}
year="numeric"
/>
</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Map Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/map-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.location" /></td>
<td>{'Cambridge, United Kingdom'}</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Audience Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/audience-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.audience" /></td>
<td><FormattedMessage id="conference-2019.ukAudience" /></td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Language Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/language-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.language" /></td>
<td>{'English'}</td>
</tr>
<tr className="conf2019-panel-row">
<td className="conf2019-panel-row-icon">
<img
alt="Language Icon"
className="conf2019-panel-row-icon-image"
src="/svgs/conference/index/language-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2019.hashtag" /></td>
<td>{'#scratchconference'}</td>
</tr>
</tbody>
</table>
</section>
<p>
<FormattedMessage
id="conference-2019.joinMailingList"
values={{joinMailingListLink: (
<a href="/?????????????"><FormattedMessage id="conference-2019.joinMailingListLinkText" /></a>
)}}
/>
</p>
</div>
</div>
);
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));

191
src/views/conference/2019/index/index.scss Normal file
View file

@ -0,0 +1,191 @@
@import "../../../../colors";
@import "../../../../frameless";
.title-banner.mod-conference.mod-2019 {
padding-top: 0;
}
.title-banner-image.mod-2019 {
opacity: .75;
margin-bottom: 1.75rem;
background-image: url("/images/conference/index/2019/title-banner.jpg");
background-position: center;
background-size: cover;
width: 100%;
height: 20rem;
}
.conf2019-panel,
.title-banner-h3.mod-2019 {
margin: auto;
width: 48.75rem;
}
.title-banner-h3.mod-2019 {
text-align: left;
color: $type-white;
}
.conf2019-title-band {
background-color: $ui-blue-dark;
padding: 1.5rem;
text-align: center;
color: $type-white;
}
.conf2019-description {
line-height: 2rem;
font-style: italic;
width: 60%;
font-weight: normal;
}
.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;
}
td {
padding: .75rem 1.25rem;
vertical-align: top;
}
.conf2019-panel-row-icon-image {
margin-top: .125rem;
width: 1rem;
height: 1rem;
}
.button.mod-2019-panel {
display: block;
margin: 2rem auto 0;
background-color: $ui-orange;
padding: 1rem 0;
width: 13.75rem;
text-align: center;
color: $type-white;
}
@media #{$small} {
.index.mod-2019 {
text-align: left;
}
.title-banner-image.mod-2019 {
height: 10rem;
}
.title-banner-h1.mod-2019 {
line-height: 1.25em;
}
.conf2019-panel,
.title-banner-h3.mod-2019 {
width: initial;
}
.conf2019-panel {
margin: auto .5rem;
}
.title-banner-h3.mod-2019 {
margin: 1rem .5rem .5rem;
font-size: 1.1rem;
}
.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;
}
}
@media #{$medium} {
.index.mod-2019 {
text-align: left;
}
.title-banner-image.mod-2019 {
height: 10rem;
}
.conf2019-panel,
.title-banner-h3.mod-2019 {
margin: auto .5rem ;
width: initial;
}
.title-banner-h3.mod-2019 {
font-size: 1.1rem;
}
.flex-row.conf2019-panel-title {
flex-direction: row;
}
.conf2019-panel-flag {
margin-right: 5rem;
}
.conf2019-panel-title-text {
max-width: 18.75rem;
}
.button.mod-2019-panel {
width: 5.75rem;
}
}
@media #{$intermediate} {
.index.mod-2019 {
text-align: left;
}
.title-banner-image.mod-2019 {
height: 15rem;
}
.conf2019-panel,
.title-banner-h3.mod-2019 {
margin: auto;
width: 38.75rem;
}
.title-banner-h3.mod-2019 {
font-size: 1.1rem;
}
.button.mod-2019-panel {
width: 8.75rem;
}
}

41
src/views/conference/2019/index/l10n.json Normal file
View file

@ -0,0 +1,41 @@
{
"conference-2019.title": "Scratch Conferences 2019",
"conference-2019.desc": "Scratch conferences are playful gatherings of educators, researchers, developers, and other members of the worldwide Scratch community. These events, held in various locations around the world, provide opportunities for people of diverse backgrounds and practices to discuss and share the ways they use Scratch, to connect and collaborate with one another, and to bring creative learning back to their own communities.",
"conference-2019.nextMITConference": "The next Scratch@MIT conference will be held in Cambridge, Massachusetts, in 2020.",
"conference-2019.seeBelow": "Learn more about 2019 conference dates and locations below.",
"conference-2019.joinMailingListLinkText": "join our 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, {joinMailingListLink}.",
"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": "The 2019 Scratch Conference Europe will take place in Cambridge, UK, from Friday 23 August to Sunday 25 August. We are putting together a full and exciting schedule of participatory activities led by members of the Scratch community, so you can look forward to workshops, talks and keynotes across a range of topics, including the new Scratch 3, as well as plenty of informal opportunities to chat and connect!",
"conference-2019.ukAudience": "All education professionals and volunteers",
"conference-2019.brasilTitle": "Conferência Scratch Brasil 2019",
"conference-2019.brasilDesc": "The Scratch Brazil Conference 2019 will be a meeting point for Brazilian educators, researchers, developers and makers who are interested in creating, sharing and learning with Scratch. The conference will foster discussions about the use of Scratch in and out of the classroom, creative computing, Scratch extensions, and other important themes related to Scratch's adoption in Brazil. We are planning something very participatory, with lots of hands-on workshops, poster sessions and opportunities for collaboration.",
"conference-2019.brasilAudience": "Educators, researchers, developers, and makers",
"conference-2019.kenyaTitle": "Scratch2019NBO",
"conference-2019.kenyaSubTitle": "Waves of Innovation",
"conference-2019.kenyaDesc": "In recognition of Africa's technological contributions and the potential of the youth of Africa, Scratch2019NBO will be 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.chileTitle": "Conferencia Scratch al Sur",
"conference-2019.chileDesc": "Scratch al Sur is an opportunity 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.chinaTitle": "Scratch Conference: China*Love",
"conference-2019.chinaDesc": "Join us for a gathering to support creative expression with Scratch in China. Share ways to promote learning with passion for programming, animation, community, and life.",
"conference-2019.chinaAudience": "Educators, parents, developers, makers",
"conference-2019.costaricaTitle": "Scratch Conference Costa Rica",
"conference-2019.costaricaSubTitle": "People, Projects, and Places",
"conference-2019.costaricaDesc": "Scratch Conference Costa Rica is a global event taking place at a community level that unites teachers, students, businesses, and leaders, so that coding and design is part of every child's education, starting with Scratch.",
"conference-2019.costaricaAudience": "Scratch users, teachers, college professors, potential Scratchers, university students (future teachers and software developers) in Costa Rica and Spanish-speaking Latin America"
}