Skip to content

GitLab

S
scratch-www
Unverified Commit 65abf37f authored by picklesrus's avatar picklesrus Committed by GitHub
Browse files
Options

Merge pull request #3597 from LLK/hotfix/conference2020 

[Master] Hotfix/conference2020
parents a5c5f319 8c8bab26
Show whitespace changes
Inline Side-by-side
Showing with 667 additions and 1 deletion
src/components/footer/conference/2020/footer.jsx 0 → 100644
View file @ 65abf37f
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>
<LanguageChooser locale={props.intl.locale} />
<div className="conf2020-organized">
<FormattedMessage id="conference-2020.organizedBy" />
</div>
</FooterBox>
);
ConferenceFooter.propTypes = {
intl: intlShape
};
module.exports = injectIntl(ConferenceFooter);
src/components/navigation/conference/2020/navigation.jsx 0 → 100644
View file @ 65abf37f
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 @ 65abf37f
@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 @ 65abf37f
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 @ 65abf37f
......@@ -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 @ 65abf37f
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-solid.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-solid.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 @ 65abf37f
@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/2020/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 {
width: 48.75rem;
margin: auto;
}
.title-banner-h3.mod-2020 {
margin: 2rem auto 0;
}
.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;
}
section {
padding-top: 3rem;
}
td {
padding: .75rem 1.25rem;
vertical-align: middle;
}
.conf2020-panel-row-icon-image {
width: 1.5rem;
height: 1.5rem;
}
.mod-registration .conf2020-panel-desc {
margin-bottom: 0;
}
.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-organized {
font-size: .875rem;
margin: 0 auto;
text-align: center;
padding: 1rem 0 2.5rem;
line-height: 1.5em;
}
@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 @ 65abf37f
{
"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 support creative learning experiences for young people 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": "Share your project in an exhibition setting, alongside other presenters. For example, show new ways you’ve been using Scratch in your classroom, or new ways to connect Scratch with the physical world. You will be provided with space for a poster and a table 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. For example, tell a story of how young people have been creating with Scratch in your community.",
"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: $250",
"conference-2020.registrationOpen": "Registration will open on March 3.",
"conference-2020.questions": "Questions? Contact the Scratch Conference 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