Merge pull request #525 from mewtaylor/issue/conference-tweaks

For GH-497: conference tweaks for fallout from schedule/typography

src/components/footer/conference/footer.jsx

@@ -71,7 +71,7 @@ var ConferenceFooter = React.createClass({
                                 </li>
                             </FlexRow>
                         </FlexRow>
-                        <p>
+                        <p className="legal">
                             Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab.
                         </p>
                     </div>

src/components/footer/conference/footer.scss

@@ -50,7 +50,7 @@
                 }
 
                 li {
-                    margin-bottom: .5rem;
+                    margin: 0;
                 }
             }
         }

src/components/navigation/conference/navigation.scss

@@ -41,6 +41,20 @@
         }
     }
 
+    @media only screen and (max-width: $mobile - 1) {
+        .inner {
+            > ul {
+                li {
+                    &.right {
+                        ul {
+                            flex-flow: row nowrap;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     @media only screen and (max-width: $tablet - 1) {
         height: 100px;
 

src/components/thumbnail/thumbnail.scss

@@ -14,14 +14,11 @@
 
     .thumbnail-title,
     #{$extras} {
-        line-height: normal;
-        word-wrap: break-word;
-
-        a {
         overflow: hidden;
         text-overflow: ellipsis;
+        line-height: normal;
         white-space: nowrap;
-        }
+        word-wrap: break-word;
     }
 
     .thumbnail-title {

src/views/conference/details/details.jsx

@@ -46,25 +46,29 @@ var ConferenceDetails = React.createClass({
                 ] : [
                     <h2>{this.props.conferenceDetails.Title}</h2>,
                     <ul className="logistics">
+                        {this.props.conferenceDetails.fetching ? [] : [
                             <li>
                                 <img src="/svgs/conference/schedule/presenter-icon.svg" alt="presenter icon" />
                                 {this.props.conferenceDetails.Presenter}
-                        </li>
+                            </li>,
                             <li>
                                 <img src="/svgs/conference/schedule/time-icon.svg" alt="time icon" />
                                 {this.props.conferenceDetails.Start} &ndash; {this.props.conferenceDetails.End}
-                        </li>
+                            </li>,
                             <li>
                                 <img src="/svgs/conference/schedule/event-icon.svg" alt="event icon" />
                                 {this.props.conferenceDetails.Type}
-                        </li>
+                            </li>,
                             <li>
                                 <img src="/svgs/conference/schedule/location-icon.svg" alt="location icon" />
                                 {this.props.conferenceDetails.Location}
                             </li>
+                        ]}
                     </ul>,
                     <div className="description">
+                        <p>
                             {this.props.conferenceDetails.Description}
+                        </p>
                     </div>,
                     <div className="back">
                     {this.props.conferenceDetails.fetching ? [] : [

src/views/conference/details/details.scss

@@ -1,12 +1,18 @@
 @import "../../../frameless";
 
 #view {
+    @media only screen and (max-width: $tablet - 1) {
+        margin-top: 100px;
+    } 
+
     @media only screen and (max-width: $desktop - 1) {
         text-align: left;
     }   
 }
 
 .details {
+    width: $cols8;
+
     &.inner {
         margin-top: 2rem;
 
@@ -41,3 +47,10 @@
         margin: 2rem 0;
     }
 }
+
+//8 columns
+@media only screen and (max-width: $desktop - 1) {
+    .details {
+        width: 100%;
+    }
+}

src/views/conference/index/index.jsx

@@ -19,15 +19,20 @@ var ConferenceSplash = React.createClass({
                         Many Paths, Many Styles
                     </h1>
                     <h3>
-                        Scratch Conference 2016 | Cambridge, MA, USA
+                        August 4 - 6, 2016 | Cambridge, MA, USA
                     </h3>
                     <p>
-                        <a href="//scratchconference2016.eventbrite.com">
+                        <a href="/conference/schedule">
                             <Button>
-                                Register Now
+                                See the Schedule
                             </Button>
                         </a>
                     </p>
+                    <p className="sub-button">
+                        <b>
+                            We're sold out! <a href="//scratchconference2016.eventbrite.com">Join the Waitlist</a>
+                        </b>
+                    </p>
                 </TitleBanner>
                 <section className="inner">
                     <FlexRow>

src/views/conference/index/index.scss

@@ -25,6 +25,19 @@
         p {
             margin-top: 3rem;
 
+            &.sub-button {
+                margin-top: 1rem;
+            }
+
+            b {
+                margin-top: 2rem;
+
+                a {
+                    text-decoration: underline;
+                    color: $type-white;
+                }
+            }
+
             a {
 
                 button {

src/views/conference/plan/plan.jsx

@@ -262,6 +262,17 @@ var ConferencePlan = React.createClass({
                             <div className="long">
                                 <h2>FAQ</h2>
                                 <dl>
+                                    <dt>
+                                        The conference is sold out. What can I do?
+                                    </dt>
+                                    <dd>
+                                        Scratch@MIT is sold out and at capacity. However, you can{' '}
+                                        <a href="//scratchconference2016.eventbrite.com">
+                                            join the waitlist
+                                        </a>. People on the waitlist will be notified of openings on{' '}
+                                        a first come, first served basis.
+                                    </dd>
+                                    
                                     <dt>
                                         Who is this conference for?
                                     </dt>
@@ -279,18 +290,6 @@ var ConferencePlan = React.createClass({
                                         Proposal submissions are now closed.
                                     </dd>
 
-                                    <dt>
-                                        How much does it cost to register?
-                                    </dt>
-                                    <dd>
-                                        Through May 1, registration is $150 per ticket (Early Bird rate).{' '}
-                                        After May 1, registration increases to $250 per ticket. You can register{' '}
-                                        for the conference through the{' '}
-                                        <a href="https://www.eventbrite.com/e/scratchmit-2016-registration-21793477879">
-                                            registration form
-                                        </a>.
-                                    </dd>
-
                                     <dt>
                                         I can only attend one day of the conference. Do you offer single-day{' '}
                                         registration?

src/views/conference/schedule/schedule.scss

@@ -102,6 +102,28 @@
         }
     }
 
+    @media only screen and (max-width: $mobile - 1) {
+        .sub-nav {
+            flex-wrap: nowrap;
+        }
+
+        .inner {
+            h2 {
+                &.breaking-title {
+                    margin: 2rem 0 2rem;
+                    height: 100%;
+                    font-size: 1.5rem;
+                }
+            }
+
+            .agenda-item {
+                h3 {
+                    font-size: 1.2rem;
+                }
+            }
+        }
+    }
+
     @media only screen and (max-width: $tablet - 1) {
         .inner {
             h2 {