scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fixes #1633 - Scratch Conference 2018 Website Phase 1 (#1673)

Browse source 
* add 2018 conference page (new subdirectory and index page)

* Redirect /conference route to 2018, and add new route for /conference/2017 for last year's conferences.

* Update mailto link in the footer
This commit is contained in:
Sheshank Shankar 2017-11-20 06:12:12 -08:00 committed by Matthew Taylor
parent 081e3c5327
commit 4f14dfcbe3
8 changed files with 500 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/components/footer/conference/2018/footer.jsx Normal file
View file

@ -0,0 +1,84 @@
var React = require('react');
var ReactIntl = require('react-intl');
var injectIntl = ReactIntl.injectIntl;
var FormattedMessage = ReactIntl.FormattedMessage;
var FlexRow = require('../../../flex-row/flex-row.jsx');
var FooterBox = require('../../container/footer.jsx');
var LanguageChooser = require('../../../languagechooser/languagechooser.jsx');
require('../footer.scss');
var ConferenceFooter = React.createClass({
type: 'ConferenceFooter',
render: function () {
return (
<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" target="_blank">Scratch</a>
</li>
<li>
<a href="http://www.scratchjr.org/" target="_blank">ScratchJr</a>
</li>
</FlexRow>
<FlexRow as="ul" className="column">
<li>
<a href="http://www.scratchfoundation.org/" target="_blank">Scratch Foundation</a>
</li>
<li>
<a href="http://scratched.gse.harvard.edu/" target="_blank">ScratchEd</a>
</li>
</FlexRow>
<FlexRow as="ul" className="column">
<li>
<a href="http://day.scratch.mit.edu" target="_blank">Scratch Day</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:conference@scratch.mit.edu" target="_blank">
Email Us
</a>
</p>
</div>
<div className="social">
<FlexRow as="ul">
<li>
<a href="//www.twitter.com/scratch" target="_blank">
<img src="/images/conference/footer/twitter.png" alt="scratch twitter" />
</a>
</li>
<li>
<a href="//www.facebook.com/scratchteam" target="_blank">
<img src="/images/conference/footer/facebook.png" alt="scratch facebook" />
</a>
</li>
<li>
<a href="http://medium.com/scratchfoundation-blog" target="_blank">
<img src="/images/conference/footer/medium.png" alt="scratch foundation blog" />
</a>
</li>
</FlexRow>
</div>
</div>
</FlexRow>
<LanguageChooser locale={this.props.intl.locale} />
</FooterBox>
);
}
});
module.exports = injectIntl(ConferenceFooter);

29
src/components/navigation/conference/2018/navigation.jsx Normal file
View file

@ -0,0 +1,29 @@
var React = require('react');
var NavigationBox = require('../../base/navigation.jsx');
require('./navigation.scss');
var Navigation = React.createClass({
type: 'Navigation',
render: function () {
return (
<NavigationBox>
<ul className="ul mod-2018">
<li className="li-left mod-logo mod-2018">
<a href="/conference" className="logo-a">
<img
src="/images/logo_sm.png"
alt="Scratch Logo"
className="logo-a-image"
/>
<p className="logo-a-title">Conferences</p>
</a>
</li>
</ul>
</NavigationBox>
);
}
});
module.exports = Navigation;

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

@ -0,0 +1,39 @@
@import "../../../../colors";
@import "../../../../frameless";
#navigation {
.ul.mod-2018 {
display: flex;
justify-content: space-between;
flex-flow: row nowrap;
align-items: center;
list-style-type: none;
}
.li-left.mod-2018 {
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/2018/page.jsx Normal file
View file

@ -0,0 +1,27 @@
var React = require('react');
var Navigation = require('../../../navigation/conference/2018/navigation.jsx');
var Footer = require('../../../footer/conference/2018/footer.jsx');
require('../page.scss');
var Page = React.createClass({
type: 'Page',
render: function () {
return (
<div className="page mod-conference">
<div id="navigation">
<Navigation />
</div>
<div id="view">
{this.props.children}
</div>
<div id="footer">
<Footer />
</div>
</div>
);
}
});
module.exports = Page;

10
src/routes.json
View file

@ -44,7 +44,15 @@
{
"name": "conference-index",
"pattern": "^/conference/?$",
"routeAlias": "/conference(?!/201[4-5])",
"routeAlias": "/conference(?!/201[4-7])",
"view": "conference/2018/index/index",
"title": "Scratch Conference",
"viewportWidth": "device-width"
},
{
"name": "conference-index-2017",
"pattern": "^/conference/2017/?$",
"routeAlias": "/conference(?!/201[4-6])",
"view": "conference/2017/index/index",
"title": "Scratch Conference",
"viewportWidth": "device-width"

123
src/views/conference/2018/index/index.jsx Normal file
View file

@ -0,0 +1,123 @@
var FormattedDate = require('react-intl').FormattedDate;
var FormattedMessage = require('react-intl').FormattedMessage;
var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
var React = require('react');
var render = require('../../../../lib/render.jsx');
var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
var Page = require('../../../../components/page/conference/2018/page.jsx');
var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('../../../../components/forms/button.scss');
require('./index.scss');
var ConferenceSplash = React.createClass({
type: 'ConferenceSplash',
render: function () {
return (
<div className='index mod-2018'>
<TitleBanner className='mod-conference mod-2018'>
<div className='title-banner-image mod-2018'></div>
<h1 className='title-banner-h1 mod-2018'>
<center>
<FormattedHTMLMessage id='conference-2018.title' />
</center>
</h1>
<h3 className='title-banner-h3 mod-2018'>
<FormattedMessage id='conference-2018.dateDesc' />
</h3>
</TitleBanner>
<div className='inner'>
<section className='conf2018-panel mod-desc'>
<p className='conf2018-panel-desc'>
<FormattedHTMLMessage id='conference-2018.desc' />
</p>
<table className='conf2018-panel-details'>
<tbody>
<tr className='conf2018-panel-row'>
<td className='conf2018-panel-row-icon'>
<img
className='conf2018-panel-row-icon-image'
src='/svgs/conference/index/calendar-icon.svg'
alt='Calendar Icon'
/>
</td>
<td><FormattedMessage id='conference-2018.date' /></td>
<td>
<FormattedDate
value={new Date(2018, 6, 26)}
year='numeric'
month='long'
day='2-digit'
/>
{' - '}
<FormattedDate
value={new Date(2018, 6, 28)}
year='numeric'
month='long'
day='2-digit'
/>
<FormattedMessage id='conference-2018.dateDescMore' />
</td>
</tr>
<tr className='conf2018-panel-row'>
<td className='conf2018-panel-row-icon'>
<img
className='conf2018-panel-row-icon-image'
src='/svgs/conference/index/map-icon.svg'
alt='Map Icon'
/>
</td>
<td><FormattedMessage id='conference-2018.location' /></td>
<td><FormattedMessage id='conference-2018.locationDetails' /></td>
</tr>
</tbody>
</table>
</section>
<section className='conf2018-panel'>
<p className='conf2018-panel-desc'>
<FormattedHTMLMessage id='conference-2018.sessionDesc' />
</p>
<p className='conf2018-panel-session'>
<p className='conf2018-panel-session'>
<FormattedHTMLMessage id='conference-2018.sessionItem1' />
</p>
<p className='conf2018-panel-session'>
<FormattedHTMLMessage id='conference-2018.sessionItem2' />
</p>
<p className='conf2018-panel-session'>
<FormattedHTMLMessage id='conference-2018.sessionItem3' />
</p>
<p className='conf2018-panel-session'>
<FormattedHTMLMessage id='conference-2018.sessionItem4' />
</p>
</p>
<a className='button mod-2018-panel' href='https://docs.google.com/forms/d/e/1FAIpQLSd7SkuQ-dfW-P3aArSQokK9GkKAUKufTVBHod_ElNIiFE9iBQ/viewform?usp=sf_link'>
<FormattedMessage id='conference-2018.proposal' />
</a>
</section>
<section className='conf2018-panel mod-registration'>
<FlexRow className='conf2018-panel-title'>
<div className='conf2018-panel-title-text'>
<h3><FormattedMessage id='conference-2018.registrationTitle' /></h3>
</div>
</FlexRow>
<p className='conf2018-panel-desc'>
<FormattedMessage id='conference-2018.registrationEarly' />
<br/>
<FormattedMessage id='conference-2018.registrationStandard' />
</p>
</section>
<section className='conf2018-panel mod-questions'>
<p className='conf2018-panel-desc'>
<FormattedHTMLMessage id='conference-2018.questions' />
</p>
</section>
</div>
</div>
);
}
});
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));

161
src/views/conference/2018/index/index.scss Normal file
View file

@ -0,0 +1,161 @@
@import "../../../../colors";
@import "../../../../frameless";
.title-banner.mod-conference.mod-2018 {
padding-top: 0;
}
.title-banner-image.mod-2018 {
opacity: .75;
margin-bottom: 1.75rem;
background-image: url("/images/conference/index/2017/title-banner.jpg");
background-position: center;
background-size: cover;
width: 100%;
height: 20rem;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
margin: auto;
width: 48.75rem;
}
.title-banner-h3.mod-2018 {
text-align: center;
color: $type-white;
}
.conf2018-panel {
border-bottom: 1px solid $ui-border;
}
.conf2018-panel.mod-last {
border-bottom: 0;
}
.flex-row.conf2018-panel-title {
justify-content: flex-start;
align-items: center;
}
.conf2018-panel-desc {
margin: 2rem 0;
}
td {
padding: .75rem 1.25rem;
vertical-align: top;
}
.conf2018-panel-row-icon-image {
margin-top: .125rem;
width: 1rem;
height: 1rem;
}
.button.mod-2018-panel {
display: block;
margin: 2rem auto 0;
background-color: $ui-orange;
padding: 1rem 0;
width: 13.75rem;
text-align: center;
color: $type-white;
}
@media only screen and (max-width: $mobile - 1) {
.index.mod-2018 {
text-align: left;
}
.title-banner-image.mod-2018 {
height: 10rem;
}
.title-banner-h1.mod-2018 {
line-height: 1.25em;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
width: initial;
}
.conf2018-panel {
margin: auto .5rem;
}
.title-banner-h3.mod-2018 {
margin: 1rem .5rem .5rem;
font-size: 1.1rem;
}
.flex-row.conf2018-panel-title {
flex-direction: row;
}
.conf2018-panel-title-text {
max-width: 14rem;
}
.conf2018-panel-row > td {
padding: .75rem .375rem .75rem 0;
}
}
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
.index.mod-2018 {
text-align: left;
}
.title-banner-image.mod-2018 {
height: 10rem;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
margin: auto .5rem ;
width: initial;
}
.title-banner-h3.mod-2018 {
font-size: 1.1rem;
}
.flex-row.conf2018-panel-title {
flex-direction: row;
}
.conf2018-panel-title-text {
max-width: 18.75rem;
}
.button.mod-2018-panel {
width: 5.75rem;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
.index.mod-2018 {
text-align: left;
}
.title-banner-image.mod-2018 {
height: 15rem;
}
.conf2018-panel,
.title-banner-h3.mod-2018 {
margin: auto;
width: 38.75rem;
}
.title-banner-h3.mod-2018 {
font-size: 1.1rem;
}
.button.mod-2018-panel {
width: 8.75rem;
}
}

28
src/views/conference/2018/index/l10n.json Normal file
View file

@ -0,0 +1,28 @@
{
"conference-2018.title": "Scratch Conference 2018 <br/> The Next Generation",
"conference-2018.dateDesc": "July 26-28, 2018 | Cambridge, MA, USA",
"conference-2018.dateDescMore": " (with opening reception the evening of July 25)",
"conference-2018.locationDetails": "MIT Media Lab, Cambridge, MA",
"conference-2018.seeBelow": "Learn more about conference dates and locations below.",
"conference-2018.date": "When:",
"conference-2018.location": "Where:",
"conference-2018.desc": "Join us for the Scratch@MIT conference, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community.<br /> <br />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-2018.sessionDesc": "Interested in offering a session? We invite four types of proposals:",
"conference-2018.sessionItem1": "<b>Poster/demonstration (90 minutes)</b>. 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-2018.sessionItem2": "<b>Hands-on workshop (90 minutes)</b>. Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.",
"conference-2018.sessionItem3": "<b>Interactive panel (60 minutes)</b>. 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-2018.sessionItem4": "<b>Ignite talk (5 minutes)</b>. Share what you've been doing in a short, lively presentation.",
"conference-2018.proposal": " Submit Your Proposal",
"conference-2018.proposalDeadline": "Deadline for proposals: February 5",
"conference-2018.proposalAccept": "Notification of acceptance: March 1",
"conference-2018.registrationTitle": "Registration:",
"conference-2018.registrationEarly": "Early Bird Registration (March 1-May 1): $200",
"conference-2018.registrationStandard": "Standard Registration (after May 1): $300",
"conference-2018.questions": "Questions? Contact the Scratch Team at <a href='mailto:conference@scratch.mit.edu'>conference@scratch.mit.edu</a>"
}