mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 09:35:56 -05:00
Merge pull request #6652 from kchadha/conference-page-updates
Add 2022 conference page
This commit is contained in:
Karishma Chadha
GitHub
commit
3037c6a242
10 changed files with 326 additions and 25 deletions
|
|
@ -2,6 +2,8 @@ const FormattedMessage = require('react-intl').FormattedMessage;
|
|||
const injectIntl = require('react-intl').injectIntl;
|
||||
const intlShape = require('react-intl').intlShape;
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
|
||||
|
||||
const FlexRow = require('../../../flex-row/flex-row.jsx');
|
||||
const FooterBox = require('../../container/footer.jsx');
|
||||
|
|
@ -145,14 +147,15 @@ const ConferenceFooter = props => (
|
|||
</div>
|
||||
</FlexRow>
|
||||
<LanguageChooser locale={props.intl.locale} />
|
||||
<div className="conf2021-organized">
|
||||
<FormattedMessage id="conference-2021.organizedBy" />
|
||||
<div className="organized-by-message">
|
||||
<FormattedMessage id={props.organizedByMsgId} />
|
||||
</div>
|
||||
</FooterBox>
|
||||
);
|
||||
|
||||
ConferenceFooter.propTypes = {
|
||||
intl: intlShape
|
||||
intl: intlShape,
|
||||
organizedByMsgId: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = injectIntl(ConferenceFooter);
|
||||
|
|
|
|||
|
|
@ -168,4 +168,12 @@
|
|||
.language-chooser {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.organized-by-message {
|
||||
font-size: .875rem;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 1rem 0 2.5rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,16 @@ const Page = props => (
|
|||
{props.children}
|
||||
</div>
|
||||
<div id="footer">
|
||||
<Footer />
|
||||
<Footer
|
||||
organizedByMsgId={props.footerOrganizedByMsgId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Page.propTypes = {
|
||||
children: PropTypes.node
|
||||
children: PropTypes.node,
|
||||
footerOrganizedByMsgId: PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Page;
|
||||
|
|
|
|||
|
|
@ -40,13 +40,13 @@
|
|||
{
|
||||
"name": "conference-index",
|
||||
"pattern": "^/conference/?(\\?.*)?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"redirect": "/conference/2021"
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"redirect": "/conference/2022"
|
||||
},
|
||||
{
|
||||
"name": "conference-index-2017",
|
||||
"pattern": "^/conference/2017/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2017/index/index",
|
||||
"title": "Scratch Conference",
|
||||
"viewportWidth": "device-width"
|
||||
|
|
@ -54,21 +54,21 @@
|
|||
{
|
||||
"name": "conference-details-2018",
|
||||
"pattern": "^/conference/2018/:id/details/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2018/details/details",
|
||||
"title": "Event Details"
|
||||
},
|
||||
{
|
||||
"name": "conference-expectations-2018",
|
||||
"pattern": "^/conference/2018/expect/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2018/expect/expect",
|
||||
"title": "What to Expect"
|
||||
},
|
||||
{
|
||||
"name": "conference-index-2018",
|
||||
"pattern": "^/conference/2018/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2018/index/index",
|
||||
"title": "Scratch Conference",
|
||||
"viewportWidth": "device-width"
|
||||
|
|
@ -76,21 +76,21 @@
|
|||
{
|
||||
"name": "conference-plan-2018",
|
||||
"pattern": "^/conference/2018/plan/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2018/plan/plan",
|
||||
"title": "Plan Your Visit"
|
||||
},
|
||||
{
|
||||
"name": "conference-schedule-2018",
|
||||
"pattern": "^/conference/2018/schedule/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2018/schedule/schedule",
|
||||
"title": "Conference Schedule"
|
||||
},
|
||||
{
|
||||
"name": "conference-index-2019",
|
||||
"pattern": "^/conference/2019/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2019/index/index",
|
||||
"title": "Scratch Conferences",
|
||||
"viewportWidth": "device-width"
|
||||
|
|
@ -98,17 +98,25 @@
|
|||
{
|
||||
"name": "conference-index-2020",
|
||||
"pattern": "^/conference/2020/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"redirect": "/conference/2021"
|
||||
},
|
||||
{
|
||||
"name": "conference-index-2021",
|
||||
"pattern": "^/conference/2021/?$",
|
||||
"routeAlias": "/conference(?!/201[4-9])",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2021/index/index",
|
||||
"title": "Scratch Conferences",
|
||||
"viewportWidth": "device-width"
|
||||
},
|
||||
{
|
||||
"name": "conference-index-2022",
|
||||
"pattern": "^/conference/2022/?$",
|
||||
"routeAlias": "/conference(?!/20[1-2][0-9])",
|
||||
"view": "conference/2022/index/index",
|
||||
"title": "Scratch Conferences",
|
||||
"viewportWidth": "device-width"
|
||||
},
|
||||
{
|
||||
"name": "connect",
|
||||
"pattern": "^/connect/?$",
|
||||
|
|
|
|||
|
|
@ -93,4 +93,7 @@ const ConferenceSplash = () => (
|
|||
</div>
|
||||
);
|
||||
|
||||
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
|
||||
render(
|
||||
<Page
|
||||
footerOrganizedByMsgId="conference-2021.organizedBy"
|
||||
><ConferenceSplash /></Page>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
.title-banner-image.mod-2021 {
|
||||
opacity: .75;
|
||||
margin-bottom: 1.75rem;
|
||||
background-image: url("/images/conference/index/2021/title-banner.jpg");
|
||||
background-image: url("/images/conference/index/shared/title-banner.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
|
|
@ -76,13 +76,6 @@ td {
|
|||
text-align: center;
|
||||
color: $type-white;
|
||||
}
|
||||
.conf2021-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-2021 {
|
||||
|
|
|
|||
95
src/views/conference/2022/index/index.jsx
Normal file
95
src/views/conference/2022/index/index.jsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
const FormattedDate = require('react-intl').FormattedDate;
|
||||
const FormattedMessage = require('react-intl').FormattedMessage;
|
||||
const React = require('react');
|
||||
const render = require('../../../../lib/render.jsx');
|
||||
|
||||
// Using the 2021 page on purpose here since the layout of the page is the same
|
||||
const Page = require('../../../../components/page/conference/2021/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-2022">
|
||||
<TitleBanner className="mod-conference mod-2022">
|
||||
<div className="title-banner-image mod-2022" />
|
||||
<h1 className="title-banner-h1 mod-2022">
|
||||
<center>
|
||||
<FormattedMessage id="conference-2022.title" />
|
||||
</center>
|
||||
</h1>
|
||||
<h3 className="title-banner-h3 mod-2022">
|
||||
<FormattedMessage id="conference-2022.dateDesc" />
|
||||
</h3>
|
||||
</TitleBanner>
|
||||
<div className="inner">
|
||||
<section className="conf2022-panel mod-desc">
|
||||
<p className="conf2022-panel-desc">
|
||||
<FormattedMessage id="conference-2022.desc1" />{' '}
|
||||
<strong><FormattedMessage id="conference-2022.desc1a" /></strong>
|
||||
<br />
|
||||
<br />
|
||||
<FormattedMessage id="conference-2022.desc3" />
|
||||
</p>
|
||||
<table className="conf2022-panel-details">
|
||||
<tbody>
|
||||
<tr className="conf2022-panel-row">
|
||||
<td className="conf2022-panel-row-icon">
|
||||
<img
|
||||
alt="Calendar Icon"
|
||||
className="conf2022-panel-row-icon-image"
|
||||
src="/svgs/conference/index/calendar-icon-solid.svg"
|
||||
/>
|
||||
</td>
|
||||
<td><FormattedMessage id="conference-2022.date" /></td>
|
||||
<td>
|
||||
<FormattedDate
|
||||
day="2-digit"
|
||||
month="long"
|
||||
value={new Date(2022, 6, 22)}
|
||||
year="numeric"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="conf2022-panel-row">
|
||||
<td className="conf2022-panel-row-icon">
|
||||
<img
|
||||
alt="Map Icon"
|
||||
className="conf2022-panel-row-icon-image"
|
||||
src="/svgs/conference/index/map-icon-solid.svg"
|
||||
/>
|
||||
</td>
|
||||
<td><FormattedMessage id="conference-2022.location" /></td>
|
||||
<td><FormattedMessage id="conference-2022.locationDetails" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<center>
|
||||
<FormattedMessage id="conference-2022.register" />
|
||||
</center>
|
||||
|
||||
</section>
|
||||
<section className="conf2022-panel mod-stay">
|
||||
<p className="conf2022-panel-desc">
|
||||
<FormattedMessage
|
||||
id="conference-2022.stayDesc2"
|
||||
values={{
|
||||
emailLink: <a href="mailto:conference@scratch.mit.edu">
|
||||
conference@scratch.mit.edu
|
||||
</a>
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<FormattedMessage id="conference-2022.organizedBy" />
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
render(
|
||||
<Page
|
||||
footerOrganizedByMsgId="conference-2022.organizedBy"
|
||||
><ConferenceSplash /></Page>, document.getElementById('app'));
|
||||
170
src/views/conference/2022/index/index.scss
Normal file
170
src/views/conference/2022/index/index.scss
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
@import "../../../../colors";
|
||||
@import "../../../../frameless";
|
||||
|
||||
.title-banner.mod-conference.mod-2022 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.title-banner-image.mod-2022 {
|
||||
opacity: .75;
|
||||
margin-bottom: 1.75rem;
|
||||
background-image: url("/images/conference/index/shared/title-banner.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
.title-banner-h1.mod-2022 {
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.conf2022-panel,
|
||||
.title-banner-h3.mod-2022 {
|
||||
width: 48.75rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.title-banner-h3.mod-2022 {
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
|
||||
.title-banner-h3.mod-2022 {
|
||||
text-align: center;
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.conf2022-panel {
|
||||
border-bottom: 1px solid $ui-border;
|
||||
}
|
||||
|
||||
.conf2022-panel.mod-last {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.flex-row.conf2022-panel-title {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.conf2022-panel-desc {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .75rem 1.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.conf2022-panel-row-icon-image {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.mod-registration .conf2022-panel-desc {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.button.mod-2022-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-2022 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title-banner-image.mod-2022 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.conf2022-panel,
|
||||
.title-banner-h3.mod-2022 {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.conf2022-panel {
|
||||
margin: auto .5rem;
|
||||
}
|
||||
|
||||
.title-banner-h3.mod-2022 {
|
||||
margin: 1rem .5rem .5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.flex-row.conf2022-panel-title {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.conf2022-panel-title-text {
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
.conf2022-panel-row > td {
|
||||
padding: .75rem .375rem .75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $mobile) and (max-width: $tabletPortrait - 1) {
|
||||
.index.mod-2022 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title-banner-image.mod-2022 {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.conf2022-panel,
|
||||
.title-banner-h3.mod-2022 {
|
||||
margin: auto .5rem ;
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.title-banner-h3.mod-2022 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.flex-row.conf2022-panel-title {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.conf2022-panel-title-text {
|
||||
max-width: 18.75rem;
|
||||
}
|
||||
|
||||
.button.mod-2022-panel {
|
||||
width: 5.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop - 1) {
|
||||
.index.mod-2022 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title-banner-image.mod-2022 {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.conf2022-panel,
|
||||
.title-banner-h3.mod-2022 {
|
||||
margin: auto;
|
||||
width: 38.75rem;
|
||||
}
|
||||
|
||||
.title-banner-h3.mod-2022 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.button.mod-2022-panel {
|
||||
width: 8.75rem;
|
||||
}
|
||||
}
|
||||
18
src/views/conference/2022/index/l10n.json
Normal file
18
src/views/conference/2022/index/l10n.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"conference-2022.title": "Scratch Conference 2022",
|
||||
"conference-2022.subtitle": "An Online Conference",
|
||||
"conference-2022.dateDesc": "July 21, 2022",
|
||||
"conference-2022.locationDetails": "Online",
|
||||
|
||||
"conference-2022.date": "When:",
|
||||
"conference-2022.location": "Where:",
|
||||
|
||||
"conference-2022.desc1": "Join us for Scratch Conference 2022, an online gathering for educators interested in creative learning with Scratch! This year's theme will be \"What will you create?\"",
|
||||
"conference-2022.desc1a": "Although we are not able to meet in person this year, we are excited to find ways to connect and share with others in the global Scratch educator community.",
|
||||
"conference-2022.desc3": "The conference will be free of charge.",
|
||||
|
||||
"conference-2022.register": "Stay tuned for registration information!",
|
||||
|
||||
"conference-2022.stayDesc2": "For additional questions, contact the Scratch Conference Team at {emailLink}",
|
||||
"conference-2022.organizedBy": "The Scratch Conference is organized by the Scratch Foundation."
|
||||
}
|
||||
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 142 KiB |
Loading…
Reference in a new issue