Initial landing page with info about Scratch conference 2020.

Also switches the /conference redirect to go to conference/2020 instead 
of /2019.
This commit is contained in:
picklesrus 2019-12-09 16:27:47 -05:00
parent a5c5f3194a
commit 166a2dc282
9 changed files with 654 additions and 1 deletions

View file

@ -0,0 +1,158 @@
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);

View file

@ -0,0 +1,38 @@
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;

View file

@ -0,0 +1,78 @@
@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;
}
}
}

View file

@ -0,0 +1,27 @@
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;

View file

@ -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/?$",

View file

@ -0,0 +1,146 @@
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'));

View file

@ -0,0 +1,164 @@
@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;
}
}

View file

@ -0,0 +1,34 @@
{
"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."
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 804 KiB