Skip to content

GitLab

S
scratch-www
Unverified Commit aff3c338 authored by chrisgarrity's avatar chrisgarrity Committed by GitHub
Browse files
Options

Merge pull request #1796 from chrisgarrity/hotfix/conf2018-feb5 

[DEVELOP] Hotfix Conference page to close session proposals
parents 15982b56 a5f2121f
Hide whitespace changes
Inline Side-by-side
Showing with 454 additions and 159 deletions
src/components/navigation/conference/2018/navigation.jsx
View file @ aff3c338
...@@ -8,17 +8,48 @@ const Navigation = () => ( ...@@ -8,17 +8,48 @@ const Navigation = () => (
<NavigationBox> <NavigationBox>
<ul className="ul mod-2018"> <ul className="ul mod-2018">
<li className="li-left mod-logo mod-2018"> <li className="li-left mod-logo mod-2018">
<a <ul className="li-left-ul mod-2018">
className="logo-a" <li>
href="/" <a
> className="logo-a"
<img href="/"
alt="Scratch Logo" >
className="logo-a-image" <img
src="/images/logo_sm.png" alt="Scratch Logo"
/> className="logo-a-image"
<p className="logo-a-title">Conferences</p> src="/images/logo_sm.png"
</a> />
</a>
</li>
<li>
<a
className="link-a"
href="/conference"
>
<span className="logo-a-title">Conference</span>
</a>
</li>
</ul>
</li>
<li className="li-right mod-2018">
<ul className="li-right-ul mod-2018">
<li className="link info">
<a
className="link-a"
href="#info"
>
Registration Info
</a>
</li>
<li className="link questions">
<a
className="link-a"
href="#questions"
>
Questions
</a>
</li>
</ul>
</li> </li>
</ul> </ul>
</NavigationBox> </NavigationBox>
......
src/components/navigation/conference/2018/navigation.scss
View file @ aff3c338
...@@ -2,15 +2,23 @@ ...@@ -2,15 +2,23 @@
@import "../../../../frameless"; @import "../../../../frameless";
#navigation { #navigation {
.ul.mod-2018 { .ul.mod-2018,
.li-right-ul.mod-2018,
.li-left-ul.mod-2018 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
} }
.li-left-ul.mod-2018 {
padding-left: 0;
}
.li-left.mod-2018 { .li-left,
.li-right,
.link {
margin-top: 0; margin-top: 0;
margin-right: 10px; margin-right: 10px;
color: $type-white; color: $type-white;
...@@ -36,4 +44,47 @@ ...@@ -36,4 +44,47 @@
font-size: .85rem; font-size: .85rem;
font-weight: bold; font-weight: bold;
} }
@media only screen and (max-width: $mobile - 1) {
.li-right-ul.mod-2018 {
flex-flow: row nowrap;
}
.link {
margin: 0;
padding: 0;
}
.link-a {
font-size: .75rem;
}
}
@media only screen and (max-width: $tablet - 1) {
height: 100px;
.ul.mod-2018 {
justify-content: center;
flex-flow: row wrap;
}
.li-left,
.li-right,
.link {
align-self: center;
}
.li-right {
margin-left: 0;
align-self: center;
}
.logo-a {
padding-top: 6px;
}
.logo-a-image {
padding-left: 15px;
}
}
} }
src/views/conference/2018/index/index.jsx
View file @ aff3c338
...@@ -12,137 +12,236 @@ require('./index.scss'); ...@@ -12,137 +12,236 @@ require('./index.scss');
const ConferenceSplash = () => ( const ConferenceSplash = () => (
<div className="index mod-2018"> <div className="index mod-2018">
<TitleBanner className="mod-conference mod-2018"> <TitleBanner className="mod-conference">
<div className="title-banner-image mod-2018" /> <h1>
<h1 className="title-banner-h1 mod-2018"> <FormattedMessage id="conference-2018.subtitle" />
<center>
<FormattedMessage id="conference-2018.title" />
<br />
<FormattedMessage id="conference-2018.subtitle" />
</center>
</h1> </h1>
<h3 className="title-banner-h3 mod-2018"> <h3>
<FormattedMessage id="conference-2018.dateDesc" /> <FormattedMessage id="conference-2018.dateDesc" />
</h3> </h3>
<h3>
<FormattedMessage id="conference-2018.registrationDate" />
</h3>
</TitleBanner> </TitleBanner>
<div className="inner"> <div className="inner">
<section className="conf2018-panel mod-desc"> <section className="info">
<p className="conf2018-panel-desc"> <FlexRow className="uneven">
<FormattedMessage id="conference-2018.desc1" /> <div className="long">
<br /> <p>
<br /> <FormattedMessage id="conference-2018.desc1" />
<FormattedMessage id="conference-2018.desc2" /> </p>
</p>
<table className="conf2018-panel-details"> <p>
<tbody> <FormattedMessage id="conference-2018.desc2" />
<tr className="conf2018-panel-row"> </p>
<td className="conf2018-panel-row-icon"> </div>
<img <div className="short">
alt="Calendar Icon" <p>
className="conf2018-panel-row-icon-image" <b><FormattedMessage id="conference-2018.date" /></b>{' '}
src="/svgs/conference/index/calendar-icon.svg" {/* eslint-disable react/jsx-sort-props */}
<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"
/>
{/* eslint-enable react/jsx-sort-props */}
<br />
<FormattedMessage id="conference-2018.dateDescMore" />
<br />
<b><FormattedMessage id="conference-2018.location" /></b>{' '}
<FormattedMessage id="conference-2018.locationDetails" />
</p>
</div>
</FlexRow>
<FlexRow className="uneven">
<div className="long">
<h3 id="info"><FormattedMessage id="conference-2018.registrationTitle" /></h3>
<p className="conf2018-panel-desc">
<b><FormattedMessage id="conference-2018.registrationEarly" /></b>
<br />
<b><FormattedMessage id="conference-2018.registrationStandard" /></b>
</p>
<p><FormattedMessage id="conference-2018.registrationDate" /></p>
<h3 id="questions"><FormattedMessage id="conference-2018.questionsTitle" /></h3>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.submissionQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.submissionAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.regQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.regAns" />
</p>
</div>
<div>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.accommodationsQ" />
</p>
<p className="conf2018-answer">
<FormattedMessage
id="conference-2018.accommodationsAns1"
values={{
marriottLink: (
<a href="http://www.marriott.com/hotels/travel/boscb-boston-marriott-cambridge/">
Boston Marriott Cambridge
</a>
),
holidayinnLink: (
<a href="http://www.hiexpress.com/hotels/us/en/reservation/searchresult?qAdlt=1&qBrs=6c.hi.ex.rs.ic.cp.in.sb.cw.cv.ul.vn&qChld=0&qDest=CAMBRIDGE%2CMA%2CUnited+States&qFRA=1&qGRM=0&qIta=99504425&qPSt=0&qRRSrt=rt&qRef=df&qRms=1&qRpn=1&qRpp=12&qSHp=1&qSmP=3&qSrt=sBR&qWch=0&srb_u=1&icdv=99504425&dp=true">
Holiday Inn Express and Suites
</a>
),
residenceinnLink: (
<a href="http://www.marriott.com/hotels/travel/boscm-residence-inn-boston-cambridge/">
Residence Inn
</a>
),
lemeridienLink: (
<a href="http://www.starwoodhotels.com/lemeridien/property/overview/index.html?propertyID=3253&language=en_US">
Le Meridien
</a>
)
}}
/> />
</td> </p>
<td><FormattedMessage id="conference-2018.date" /></td> <p className="conf2018-answer">
<td> <FormattedMessage
<FormattedDate id="conference-2018.accommodationsAns2"
day="2-digit" values={{
month="long" acLink: (
value={new Date(2018, 6, 26)} <a href="http://www.marriott.com/meeting-event-hotels/group-corporate-travel/groupCorp.mi?resLinkData=Scratch%20Conference%5EBOSAR%60sccscca%7Csccsccb%60229%60USD%60false%604%607/25/18%607/28/18%607/4/18&app=resvlink&stop_mobi=yes">
year="numeric" AC Hotel Boston Cambridge
</a>
),
hotelbostonLink: (
<a href="https://www.hotelboston.com/">
Hotel Boston
</a>
),
mitLink: (
<a href="http://www.media.mit.edu/contact/accommodations">
<FormattedMessage id="conference-2018.here" />
</a>
)
}}
/> />
{' - '} </p>
<FormattedDate <p className="conf2018-answer">
day="2-digit" <FormattedMessage
month="long" id="conference-2018.accommodationsAns3"
value={new Date(2018, 6, 28)} values={{
year="numeric" neuLink: (
<a href="http://www.northeastern.edu/">
Northeastern University
</a>
)
}}
/> />
<FormattedMessage id="conference-2018.dateDescMore" /> </p>
</td> <p className="conf2018-question">
</tr> <FormattedMessage id="conference-2018.apartment" />
<tr className="conf2018-panel-row"> </p>
<td className="conf2018-panel-row-icon"> <p className="conf2018-answer">
<img <FormattedMessage id="conference-2018.single" />
alt="Map Icon" {' - $90.00'}
className="conf2018-panel-row-icon-image" <FormattedMessage id="conference-2018.pp" />
src="/svgs/conference/index/map-icon.svg" <br />
<FormattedMessage id="conference-2018.double" />
{' - $65.00'}
<FormattedMessage id="conference-2018.pp" />
</p>
<p className="conf2018-question">
<FormattedMessage id="conference-2018.suite" />
</p>
<p className="conf2018-answer">
<FormattedMessage id="conference-2018.single" />
{' - $80.00'}
<FormattedMessage id="conference-2018.pp" />
<br />
<FormattedMessage id="conference-2018.double" />
{' - $65.00'}
<FormattedMessage id="conference-2018.pp" />
</p>
<p className="conf2018-answer">
<FormattedMessage
id="conference-2018.accommodationsAns4"
values={{
emailLink: (
<a href="mailto:conference@scratch.mit.edu">
conference@scratch.mit.edu
</a>
)
}}
/> />
</td> </p>
<td><FormattedMessage id="conference-2018.location" /></td> </div>
<td><FormattedMessage id="conference-2018.locationDetails" /></td> <div>
</tr> <p className="conf2018-question">
</tbody> <FormattedMessage id="conference-2018.letterQ" />
</table> </p>
<p> <p className="conf2018-answer">
<FormattedMessage id="conference-2018.registrationDate" /> <FormattedMessage
</p> id="conference-2018.letterAns"
</section> values={{
<section className="conf2018-panel"> emailLink: (
<p className="conf2018-panel-desc"> <a href="mailto:conference@scratch.mit.edu">
<FormattedMessage id="conference-2018.sessionDesc" /> conference@scratch.mit.edu
</p> </a>
<p className="conf2018-panel-session"> )
<p className="conf2018-panel-session"> }}
<b> />
<FormattedMessage id="conference-2018.sessionItem1Title" /> </p>
</b>{' '} </div>
<FormattedMessage id="conference-2018.sessionItem1Desc" /> <div>
</p> <p className="conf2018-question">
<p className="conf2018-panel-session"> <FormattedMessage id="conference-2018.preConfQ" />
<b> </p>
<FormattedMessage id="conference-2018.sessionItem2Title" /> <p className="conf2018-answer">
</b>{' '} <FormattedMessage id="conference-2018.preConfAns" />
<FormattedMessage id="conference-2018.sessionItem2Desc" /> </p>
</p> </div>
<p className="conf2018-panel-session"> <div>
<b> <p className="conf2018-question">
<FormattedMessage id="conference-2018.sessionItem3Title" /> <FormattedMessage id="conference-2018.bringQ" />
</b>{' '} </p>
<FormattedMessage id="conference-2018.sessionItem3Desc" /> <p className="conf2018-answer">
</p> <FormattedMessage id="conference-2018.bringAns" />
<p className="conf2018-panel-session"> </p>
<b> </div>
<FormattedMessage id="conference-2018.sessionItem4Title" /> <div>
</b>{' '} <p className="conf2018-question">
<FormattedMessage id="conference-2018.sessionItem4Desc" /> <FormattedMessage id="conference-2018.moreQ" />
</p> </p>
<p className="conf2018-panel-deadline"> <p className="conf2018-answer">
<FormattedMessage id="conference-2018.deadline" /> <FormattedMessage
</p> id="conference-2018.moreAns"
</p> values={{
<a emailLink: (
className="button mod-2018-panel" <a href="mailto:conference@scratch.mit.edu">
href="https://docs.google.com/forms/d/e/1FAIpQLSd7SkuQ-dfW-P3aArSQokK9GkKAUKufTVBHod_ElNIiFE9iBQ/viewform?usp=sf_link" conference@scratch.mit.edu
> </a>
<FormattedMessage id="conference-2018.proposal" /> )
</a> }}
</section> />
<section className="conf2018-panel mod-registration"> </p>
<FlexRow className="conf2018-panel-title"> </div>
<div className="conf2018-panel-title-text">
<h3><FormattedMessage id="conference-2018.registrationTitle" /></h3>
</div> </div>
</FlexRow> </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> </section>
</div> </div>
</div> </div>
......
src/views/conference/2018/index/index.scss
View file @ aff3c338
@import "../../../../colors"; @import "../../../../colors";
@import "../../../../frameless"; @import "../../../../frameless";
.title-banner.mod-conference.mod-2018 { .index {
padding-top: 0; .title-banner {
} margin-bottom: 0;
background-image: url("/images/conference/index/2018/title-banner.jpg");
.title-banner-image.mod-2018 { background-position: top;
opacity: .75; padding: 48px 0;
margin-bottom: 1.75rem;
background-image: url("/images/conference/index/2018/title-banner.jpg"); h1,
background-position: center; h3,
background-size: cover; h4,
width: 100%; p {
height: 20rem; margin: 0 auto;
} padding: 5px 0;
text-align: center;
.title-banner-h1.mod-2018 { color: $type-white;
line-height: 1.25em; }
}
p {
.conf2018-panel, margin-top: 3rem;
.title-banner-h3.mod-2018 {
margin: auto; &.sub-button {
width: 48.75rem; margin-top: 1rem;
}
b {
margin-top: 2rem;
a {
text-decoration: underline;
color: $type-white;
}
}
a {
button {
background-color: $ui-white;
color: $ui-blue;
font-size: 1rem;
}
}
}
@media only screen and (max-width: $mobile - 1) {
h3 {
display: none;
margin-top: 0;
}
p {
margin-top: .25rem;
}
}
@media only screen and (max-width: $desktop - 1) {
h1 {
font-size: 2.5rem;
}
p {
margin-top: 1.5rem;
}
}
}
.flex-row {
align-items: flex-start;
justify-content: space-between;
&.uneven {
img {
width: 100%;
}
@media only screen and (max-width: $tablet - 1) {
img {
width: 30%;
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
img {
width: 70%;
}
}
}
}
.info {
text-align: left;
.conf2018-question {
margin-bottom: 0;
font-weight: 500;
}
.conf2018-answer {
margin-top: 0;
}
@media only screen and (max-width: $desktop - 1) {
.uneven {
.short {
width: 70%;
}
}
}
}
} }
.title-banner-h3.mod-2018 { @media only screen and (max-width: $tablet - 1) {
text-align: center; .index {
color: $type-white; .flex-row {
align-items: center;
}
}
} }
.conf2018-panel { .conf2018-panel {
......
src/views/conference/2018/index/l10n.json
View file @ aff3c338
...@@ -32,5 +32,29 @@ ...@@ -32,5 +32,29 @@
"conference-2018.registrationEarly": "Early Bird Registration (March 1-May 1): $200", "conference-2018.registrationEarly": "Early Bird Registration (March 1-May 1): $200",
"conference-2018.registrationStandard": "Standard Registration (after May 1): $300", "conference-2018.registrationStandard": "Standard Registration (after May 1): $300",
"conference-2018.questions": "Questions? Contact the Scratch Team at {emailLink}" "conference-2018.questions": "Questions? Contact the Scratch Team at {emailLink}",
"conference-2018.questionsTitle": "Questions:",
"conference-2018.submissionQ": "I missed the submission deadline. Can I still submit a proposal for the conference?",
"conference-2018.submissionAns": "We are no longer accepting proposal submissions. We will send out proposal acceptance notifications on February 28.",
"conference-2018.regQ": "I can only attend one day of the conference. Do you offer single-day registration?",
"conference-2018.regAns": "Sorry, we are not offering single-day tickets.",
"conference-2018.accommodationsQ": "I want to plan my visit. Do you have suggestions for accommodations?",
"conference-2018.accommodationsAns1": "Yes, MIT partners with several hotels in the area who offer discounts to participants attending MIT events, including: {marriottLink} (0.4 miles from the MIT Media Lab), {holidayinnLink} (1.6 miles), {residenceinnLink} (0.3 miles), and {lemeridienLink} (0.9 miles). To reserve a room at one of these hotels, call the hotel and request the MIT discount. Advance booking is strongly recommended, as summer is a busy time in Boston. All MIT rates are subject to availability.",
"conference-2018.accommodationsAns2": "If you are looking for lower-cost accommodations, we also recommend the {acLink} (7.1 miles). You might also consider home-share options such as Airbnb. Find an extended list of accommodations {mitLink}.",
"conference-2018.here": "here",
"conference-2018.accommodationsAns3": "Limited lodging is available in {neuLink} dorms rooms at the following rates:",
"conference-2018.apartment": "Apartment",
"conference-2018.suite": "Suite",
"conference-2018.single": "Single",
"conference-2018.double": "Double",
"conference-2018.pp": "/person/night",
"conference-2018.accommodationsAns4": "To request a dorm room, please email us at {emailLink} with the subject line “Dorm room.” Please note that Northeastern is located in Boston, two miles from the conference site at MIT. It is a half-hour commute via public transportation, accessible by subway via the Green Line (the Northeastern stop on the E line) or the Orange Line (Ruggles Station stop).",
"conference-2018.letterQ": "Can I get a visa letter?",
"conference-2018.letterAns": "Yes. Contact us at {emailLink}, and we can email you a letter.",
"conference-2018.preConfQ": "In previous years, there was an event on Wednesday evening before the conference. Will you be hosting something similar this year?",
"conference-2018.preConfAns": "There will be an informal, optional reception the evening of Wednesday, July 25. Participants may register early at this time as well.",
"conference-2018.bringQ": "What should I bring?",
"conference-2018.bringAns": "Plan to bring your personal device (laptops are preferred) and power cord. Presenters should plan to bring all additional presentation materials (we will provide projectors and screens). Snacks and beverages will be available throughout the day.",
"conference-2018.moreQ": "Have additional questions?",
"conference-2018.moreAns": "Contact the Scratch Team at {emailLink}."
} }
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