Skip to content

GitLab

S
scratch-www
Commit 166a2dc2 authored by picklesrus's avatar picklesrus
Browse files
Options

Initial landing page with info about Scratch conference 2020. 

Also switches the /conference redirect to go to conference/2020 instead 
of /2019.
parent a5c5f319
Hide whitespace changes
Inline Side-by-side
Showing with 654 additions and 1 deletion
src/components/footer/conference/2020/footer.jsx 0 → 100644
View file @ 166a2dc2
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
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"
rel="noopener noreferrer"
target="_blank"
>
Scratch
</a>
</li>
<li>
<a
href="https://www.scratchjr.org/"
rel="noopener noreferrer"
target="_blank"
>
ScratchJr
</a>
</li>
</FlexRow>
<FlexRow
as="ul"
className="column"
>
<li>
<a
href="http://www.scratchfoundation.org/"
rel="noopener noreferrer"
target="_blank"
>
Scratch Foundation
</a>
</li>
<li>
<a
href="http://scratched.gse.harvard.edu/"
rel="noopener noreferrer"
target="_blank"
>
ScratchEd
</a>
</li>
</FlexRow>
<FlexRow
as="ul"
className="column"
>
<li>
<a
href="http://day.scratch.mit.edu"
rel="noopener noreferrer"
target="_blank"
>
Scratch Day
</a>
</li>
</FlexRow>
</FlexRow>
</div>
<div className="media">
<div className="contact-us">
<h4>Contact</h4>
<p>
<a
href="mailto:conference@scratch.mit.edu"
rel="noopener noreferrer"
target="_blank"
>
Email Us
</a>
</p>
</div>
<div className="social">
<FlexRow as="ul">
<li>
<a
href="//www.twitter.com/scratch"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="scratch twitter"
src="/images/conference/footer/twitter.png"
/>
</a>
</li>
<li>
<a
href="//www.facebook.com/scratchteam"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="scratch facebook"
src="/images/conference/footer/facebook.png"
/>
</a>
</li>
<li>
<a
href="https://medium.com/scratchteam-blog"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="scratch team blog"
src="/images/conference/footer/medium.png"
/>
</a>
</li>
<li>
<a
href="https://scratch-foundation.myshopify.com/"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="scratch store"
src="/images/conference/footer/shopify-white.svg"
/>
</a>
</li>
</FlexRow>
</div>
</div>
</FlexRow>
<div className="conf2020-organized">
<FormattedMessage id="conference-2020.organizedBy" />
</div>
<LanguageChooser locale={props.intl.locale} />
</FooterBox>
);
ConferenceFooter.propTypes = {
intl: intlShape
};
module.exports = injectIntl(ConferenceFooter);
src/components/navigation/conference/2020/navigation.jsx 0 → 100644
View file @ 166a2dc2
const React = require('react');
const NavigationBox = require('../../base/navigation.jsx');
require('./navigation.scss');
const Navigation = () => (
<NavigationBox>
<ul className="ul mod-2020">
<li className="li-left mod-logo mod-2020">
<ul className="li-left-ul mod-2020">
<li>
<a
className="logo-a"
href="/"
>
<img
alt="Scratch Logo"
className="logo-a-image"
src="/images/logo_sm.png"
/>
</a>
</li>
<li>
<a
className="link-a"
href="/conference"
>
<span className="logo-a-title">Conference</span>
</a>
</li>
</ul>
</li>
</ul>
</NavigationBox>
);
module.exports = Navigation;
src/components/navigation/conference/2020/navigation.scss 0 → 100644
View file @ 166a2dc2
@import "../../../../colors";
@import "../../../../frameless";
#navigation {
.ul.mod-2020,
.li-left-ul.mod-2020 {
display: flex;
justify-content: space-between;
flex-flow: row nowrap;
align-items: center;
list-style-type: none;
}
.li-left-ul.mod-2020 {
padding-left: 0;
}
.li-left,
.link {
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;
}
@media #{$small} {
.link {
margin: 0;
padding: 0;
}
.link-a {
font-size: .75rem;
}
}
@media #{$medium-and-smaller} {
height: 100px;
.ul.mod-2020 {
justify-content: center;
flex-flow: row wrap;
}
.li-left,
.link {
align-self: center;
}
.logo-a {
padding-top: 6px;
}
.logo-a-image {
padding-left: 15px;
}
}
}
src/components/page/conference/2020/page.jsx 0 → 100644
View file @ 166a2dc2
const PropTypes = require('prop-types');
const React = require('react');
const Navigation = require('../../../navigation/conference/2020/navigation.jsx');
const Footer = require('../../../footer/conference/2020/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;
src/routes.json
View file @ 166a2dc2
......@@ -24,7 +24,7 @@
"name": "conference-index",
"pattern": "^/conference/?(\\?.*)?$",
"routeAlias": "/conference(?!/201[4-9])",
"redirect": "/conference/2019"
"redirect": "/conference/2020"
},
{
"name": "conference-index-2017",
......@@ -78,6 +78,14 @@
"title": "Scratch Conferences",
"viewportWidth": "device-width"
},
{
"name": "conference-index-2020",
"pattern": "^/conference/2020/?$",
"routeAlias": "/conference(?!/201[4-9])",
"view": "conference/2020/index/index",
"title": "Scratch Conferences",
"viewportWidth": "device-width"
},
{
"name": "connect",
"pattern": "^/connect/?$",
......
src/views/conference/2020/index/index.jsx 0 → 100644
View file @ 166a2dc2
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/2020/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-2020">
<TitleBanner className="mod-conference mod-2020">
<div className="title-banner-image mod-2020" />
<h1 className="title-banner-h1 mod-2020">
<center>
<FormattedMessage id="conference-2020.title" />
<br />
<FormattedMessage id="conference-2020.subtitle" />
</center>
</h1>
<h3 className="title-banner-h3 mod-2020">
<FormattedMessage id="conference-2020.dateDesc" />
</h3>
</TitleBanner>
<div className="inner">
<section className="conf2020-panel mod-desc">
<p className="conf2020-panel-desc">
<FormattedMessage id="conference-2020.desc1" />
<br />
<br />
<FormattedMessage id="conference-2020.desc2" />
</p>
<table className="conf2020-panel-details">
<tbody>
<tr className="conf2020-panel-row">
<td className="conf2020-panel-row-icon">
<img
alt="Calendar Icon"
className="conf2020-panel-row-icon-image"
src="/svgs/conference/index/calendar-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2020.date" /></td>
<td>
<FormattedDate
day="2-digit"
month="long"
value={new Date(2020, 6, 22)}
year="numeric"
/>
{' - '}
<FormattedDate
day="2-digit"
month="long"
value={new Date(2020, 6, 25)}
year="numeric"
/>
<FormattedMessage id="conference-2020.dateDescMore" />
</td>
</tr>
<tr className="conf2020-panel-row">
<td className="conf2020-panel-row-icon">
<img
alt="Map Icon"
className="conf2020-panel-row-icon-image"
src="/svgs/conference/index/map-icon.svg"
/>
</td>
<td><FormattedMessage id="conference-2020.location" /></td>
<td><FormattedMessage id="conference-2020.locationDetails" /></td>
</tr>
</tbody>
</table>
</section>
<section className="conf2020-panel">
<p className="conf2020-panel-desc">
<FormattedMessage id="conference-2020.sessionDesc" />
</p>
<p className="conf2020-panel-session">
<p className="conf2020-panel-session">
<b>
<FormattedMessage id="conference-2020.sessionItem1Title" />
</b>{' '}
<FormattedMessage id="conference-2020.sessionItem1Desc" />
</p>
<p className="conf2020-panel-session">
<b>
<FormattedMessage id="conference-2020.sessionItem2Title" />
</b>{' '}
<FormattedMessage id="conference-2020.sessionItem2Desc" />
</p>
<p className="conf2020-panel-session">
<b>
<FormattedMessage id="conference-2020.sessionItem3Title" />
</b>{' '}
<FormattedMessage id="conference-2020.sessionItem3Desc" />
</p>
<p className="conf2020-panel-session">
<b>
<FormattedMessage id="conference-2020.sessionItem4Title" />
</b>{' '}
<FormattedMessage id="conference-2020.sessionItem4Desc" />
</p>
<p className="conf2020-panel-deadline">
<FormattedMessage id="conference-2020.proposalDeadline" />
</p>
</p>
<a
className="button mod-2020-panel"
href="https://docs.google.com/forms/d/e/1FAIpQLSdVH_izvaWsAtDsAnKbYauDZinsGo2YpCIhp2c4sly8UHmcyA/viewform"
>
<FormattedMessage id="conference-2020.proposal" />
</a>
</section>
<section className="conf2020-panel mod-registration">
<FlexRow className="conf2020-panel-title">
<div className="conf2020-panel-title-text">
<h3><FormattedMessage id="conference-2020.registrationTitle" /></h3>
</div>
</FlexRow>
<p className="conf2020-panel-desc">
<FormattedMessage id="conference-2020.registrationFee" />
<br />
<FormattedMessage id="conference-2020.registrationOpen" />
</p>
</section>
<section className="conf2020-panel mod-questions">
<p className="conf2020-panel-desc">
<FormattedMessage
id="conference-2020.questions"
values={{
emailLink: <a href="mailto:conference@scratch.mit.edu">
conference@scratch.mit.edu
</a>
}}
/>
</p>
</section>
</div>
</div>
);
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
src/views/conference/2020/index/index.scss 0 → 100644
View file @ 166a2dc2
@import "../../../../colors";
@import "../../../../frameless";
.title-banner.mod-conference.mod-2020 {
padding-top: 0;
}
.title-banner-image.mod-2020 {
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;
}
.title-banner-h1.mod-2020 {
line-height: 1.25em;
}
.conf2020-panel,
.title-banner-h3.mod-2020 {
margin: auto;
width: 48.75rem;
}
.title-banner-h3.mod-2020 {
text-align: center;
color: $type-white;
}
.conf2020-panel {
border-bottom: 1px solid $ui-border;
}
.conf2020-panel.mod-last {
border-bottom: 0;
}
.flex-row.conf2020-panel-title {
justify-content: flex-start;
align-items: center;
}
.conf2020-panel-desc {
margin: 2rem 0;
}
td {
padding: .75rem 1.25rem;
vertical-align: top;
}
.conf2020-panel-row-icon-image {
margin-top: .125rem;
width: 1rem;
height: 1rem;
}
.button.mod-2020-panel {
display: block;
margin: 2rem auto 0;
background-color: $ui-orange;
padding: 1rem 0;
width: 13.75rem;
text-align: center;
color: $type-white;
}
.conf2020-organizedby {
font-size: .8rem;
}
@media only screen and (max-width: $mobile - 1) {
.index.mod-2020 {
text-align: left;
}
.title-banner-image.mod-2020 {
height: 10rem;
}
.conf2020-panel,
.title-banner-h3.mod-2020 {
width: initial;
}
.conf2020-panel {
margin: auto .5rem;
}
.title-banner-h3.mod-2020 {
margin: 1rem .5rem .5rem;
font-size: 1.1rem;
}
.flex-row.conf2020-panel-title {
flex-direction: row;
}
.conf2020-panel-title-text {
max-width: 14rem;
}
.conf2020-panel-row > td {
padding: .75rem .375rem .75rem 0;
}
}
@media only screen and (min-width: $mobile) and (max-width: $tabletPortrait - 1) {
.index.mod-2020 {
text-align: left;
}
.title-banner-image.mod-2020 {
height: 10rem;
}
.conf2020-panel,
.title-banner-h3.mod-2020 {
margin: auto .5rem ;
width: initial;
}
.title-banner-h3.mod-2020 {
font-size: 1.1rem;
}
.flex-row.conf2020-panel-title {
flex-direction: row;
}
.conf2020-panel-title-text {
max-width: 18.75rem;
}
.button.mod-2020-panel {
width: 5.75rem;
}
}
@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop - 1) {
.index.mod-2020 {
text-align: left;
}
.title-banner-image.mod-2020 {
height: 15rem;
}
.conf2020-panel,
.title-banner-h3.mod-2020 {
margin: auto;
width: 38.75rem;
}
.title-banner-h3.mod-2020 {
font-size: 1.1rem;
}
.button.mod-2020-panel {
width: 8.75rem;
}
}
src/views/conference/2020/index/l10n.json 0 → 100644
View file @ 166a2dc2
{
"conference-2020.title": "Scratch Conference 2020:",
"conference-2020.subtitle": "Let's Create Together!",
"conference-2020.dateDesc": "July 22-25, 2020 | Cambridge, MA, USA",
"conference-2020.dateDescMore": " (with opening reception the evening of July 22)",
"conference-2020.locationDetails": "MIT Media Lab, Cambridge, MA",
"conference-2020.seeBelow": "Learn more about conference dates and locations below.",
"conference-2020.date": "When:",
"conference-2020.location": "Where:",
"conference-2020.desc1": "Join us for the Scratch Conference 2020, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community. The conference comes at a time of great opportunity but also great challenge for education and learning—so we're excited to come together to share ideas about how to expand creative learning experiences for children around the world.",
"conference-2020.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-2020.sessionDesc": "Interested in offering a session? We invite four types of proposals:",
"conference-2020.sessionItem1Title": "Poster/demonstration (90 minutes).",
"conference-2020.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-2020.sessionItem2Title": "Hands-on workshop (60 or 90 minutes).",
"conference-2020.sessionItem2Desc": "Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.",
"conference-2020.sessionItem3Title": "Interactive panel (60 minutes).",
"conference-2020.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-2020.sessionItem4Title": "Ignite talk (5 minutes).",
"conference-2020.sessionItem4Desc": "Share what you've been doing in a short, lively presentation.",
"conference-2020.proposal": " Submit Your Proposal",
"conference-2020.proposalDeadline": "The due date for proposals is February 3, 2020.",
"conference-2020.registrationTitle": "Registration:",
"conference-2020.registrationFee": "Registration Fee: $200",
"conference-2020.registrationOpen": "Registration will open on March 3.",
"conference-2020.questions": "Questions? Contact the Scratch Team at {emailLink}",
"conference-2020.organizedBy": "The Scratch Conference is organized by the Lifelong Kindergarten group at the MIT Media Lab in collaboration with the Scratch Foundation."
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment