mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
Merge pull request #1679 from LLK/hotfix/dec-1
[Master] December 1st Hotfix
This commit is contained in:
Matthew Taylor
GitHub
commit
425f22735a
10 changed files with 544 additions and 2 deletions
10
.tx/config
10
.tx/config
|
|
@ -92,8 +92,8 @@ source_file = src/views/microworldshomepage/l10n.json
|
|||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
|
||||
[scratch-website.conference-index-l10njson]
|
||||
file_filter = localizations/conference-index/<lang>.json
|
||||
[scratch-website.conference-index-2017-l10njson]
|
||||
file_filter = localizations/conference-index-2017/<lang>.json
|
||||
source_file = src/views/conference/2017/index/l10n.json
|
||||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
|
|
@ -127,3 +127,9 @@ file_filter = localizations/messages/<lang>.json
|
|||
source_file = src/views/messages/l10n.json
|
||||
source_lang = en
|
||||
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
|
||||
|
|
|
|||
84
src/components/footer/conference/2018/footer.jsx
Normal file
84
src/components/footer/conference/2018/footer.jsx
Normal 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
29
src/components/navigation/conference/2018/navigation.jsx
Normal 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
39
src/components/navigation/conference/2018/navigation.scss
Normal 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
27
src/components/page/conference/2018/page.jsx
Normal 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;
|
||||
|
|
@ -45,6 +45,14 @@
|
|||
"name": "conference-index",
|
||||
"pattern": "^/conference/?$",
|
||||
"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",
|
||||
"title": "Scratch Conference",
|
||||
"viewportWidth": "device-width"
|
||||
|
|
|
|||
146
src/views/conference/2018/index/index.jsx
Normal file
146
src/views/conference/2018/index/index.jsx
Normal 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'));
|
||||
161
src/views/conference/2018/index/index.scss
Normal file
161
src/views/conference/2018/index/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
34
src/views/conference/2018/index/l10n.json
Normal file
34
src/views/conference/2018/index/l10n.json
Normal 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}"
|
||||
}
|
||||
|
|
@ -54,6 +54,14 @@ var Jobs = React.createClass({
|
|||
MIT Media Lab, Cambridge, MA
|
||||
</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue