Merge pull request #1679 from LLK/hotfix/dec-1

[Master] December 1st Hotfix
This commit is contained in:
Matthew Taylor 2017-11-21 17:11:42 -05:00 committed by GitHub
commit 425f22735a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 544 additions and 2 deletions

View file

@ -92,8 +92,8 @@ source_file = src/views/microworldshomepage/l10n.json
source_lang = en source_lang = en
type = KEYVALUEJSON type = KEYVALUEJSON
[scratch-website.conference-index-l10njson] [scratch-website.conference-index-2017-l10njson]
file_filter = localizations/conference-index/<lang>.json file_filter = localizations/conference-index-2017/<lang>.json
source_file = src/views/conference/2017/index/l10n.json source_file = src/views/conference/2017/index/l10n.json
source_lang = en source_lang = en
type = KEYVALUEJSON type = KEYVALUEJSON
@ -127,3 +127,9 @@ file_filter = localizations/messages/<lang>.json
source_file = src/views/messages/l10n.json source_file = src/views/messages/l10n.json
source_lang = en source_lang = en
type = KEYVALUEJSON type = KEYVALUEJSON
[scratch-website.conference-index-l10njson]
file_filter = localizations/conference-index/<lang>.json
source_file = src/views/conference/2018/index/l10n.json
source_lang = en
type = KEYVALUEJSON

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);

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;

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

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;

View file

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

View file

@ -0,0 +1,146 @@
var FormattedDate = require('react-intl').FormattedDate;
var FormattedMessage = require('react-intl').FormattedMessage;
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>
<FormattedMessage id='conference-2018.title' />
<br />
<FormattedMessage id='conference-2018.subtitle' />
</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'>
<FormattedMessage id='conference-2018.desc1' />
<br />
<br />
<FormattedMessage id='conference-2018.desc2' />
</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'>
<FormattedMessage id='conference-2018.sessionDesc' />
</p>
<p className='conf2018-panel-session'>
<p className='conf2018-panel-session'>
<b>
<FormattedMessage id='conference-2018.sessionItem1Title' />
</b>{' '}
<FormattedMessage id='conference-2018.sessionItem1Desc' />
</p>
<p className='conf2018-panel-session'>
<b>
<FormattedMessage id='conference-2018.sessionItem2Title' />
</b>{' '}
<FormattedMessage id='conference-2018.sessionItem2Desc' />
</p>
<p className='conf2018-panel-session'>
<b>
<FormattedMessage id='conference-2018.sessionItem3Title' />
</b>{' '}
<FormattedMessage id='conference-2018.sessionItem3Desc' />
</p>
<p className='conf2018-panel-session'>
<b>
<FormattedMessage id='conference-2018.sessionItem4Title' />
</b>{' '}
<FormattedMessage id='conference-2018.sessionItem4Desc' />
</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'>
<FormattedMessage
id='conference-2018.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,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;
}
}

View file

@ -0,0 +1,34 @@
{
"conference-2018.title": "Scratch Conference 2018",
"conference-2018.subtitle": "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.desc1": "Join us for the Scratch@MIT conference, a playful gathering of educators, researchers, developers, and other members of the worldwide Scratch community.",
"conference-2018.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-2018.sessionDesc": "Interested in offering a session? We invite four types of proposals:",
"conference-2018.sessionItem1Title": "Poster/demonstration (90 minutes).",
"conference-2018.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-2018.sessionItem2Title": "Hands-on workshop (90 minutes).",
"conference-2018.sessionItem2Desc": "Engage participants in hands-on activities, highlighting new ways of creating and collaborating with Scratch.",
"conference-2018.sessionItem3Title": "Interactive panel (60 minutes).",
"conference-2018.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-2018.sessionItem4Title": "Ignite talk (5 minutes).",
"conference-2018.sessionItem4Desc": "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 {emailLink}"
}

View file

@ -54,6 +54,14 @@ var Jobs = React.createClass({
MIT Media Lab, Cambridge, MA MIT Media Lab, Cambridge, MA
</span> </span>
</li> </li>
<li>
<a href="https://www.media.mit.edu/about/job-opportunities/learning-resources/">
Learning Resource Designer
</a>
<span>
MIT Media Lab, Cambridge, MA
</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>