Merge pull request #767 from technoboy10/mobile-nav-footer

Fix GH-217: Implement responsive nav and footer (woohoo!)

package.json

@@ -74,6 +74,7 @@
     "react-modal": "1.3.0",
     "react-onclickoutside": "4.1.1",
     "react-redux": "4.4.5",
+    "react-responsive": "1.1.4",
     "react-slick": "0.12.2",
     "react-telephone-input": "3.4.5",
     "redux": "3.5.2",

src/components/carousel/carousel.jsx

@@ -5,6 +5,8 @@ var Slider = require('react-slick');
 
 var Thumbnail = require('../thumbnail/thumbnail.jsx');
 
+var frameless = require('../../lib/frameless.js');
+
 require('slick-carousel/slick/slick.scss');
 require('slick-carousel/slick/slick-theme.scss');
 require('./carousel.scss');
@@ -27,12 +29,29 @@ var Carousel = React.createClass({
     render: function () {
         var settings = this.props.settings || {};
         defaults(settings, {
+            centerMode: false,
             dots: false,
             infinite: false,
             lazyLoad: true,
             slidesToShow: 5,
             slidesToScroll: 5,
-            variableWidth: true
+            variableWidth: true,
+            responsive: [
+                {breakpoint: frameless.mobile, settings: {
+                    arrows: true,
+                    slidesToScroll: 1,
+                    slidesToShow: 1,
+                    centerMode: true
+                }},
+                {breakpoint: frameless.tablet, settings: {
+                    slidesToScroll: 2,
+                    slidesToShow: 2
+                }},
+                {breakpoint: frameless.desktop, settings: {
+                    slidesToScroll: 4,
+                    slidesToShow: 4
+                }}
+            ]
         });
         var arrows = this.props.items.length > settings.slidesToShow;
         var classes = classNames(

src/components/footer/www/footer.jsx

@@ -4,6 +4,9 @@ var FormattedMessage = require('react-intl').FormattedMessage;
 var FooterBox = require('../container/footer.jsx');
 var LanguageChooser = require('../../languagechooser/languagechooser.jsx');
 
+var MediaQuery = require('react-responsive');
+var frameless = require('../../../lib/frameless');
+
 require('./footer.scss');
 
 var Footer = React.createClass({
@@ -11,6 +14,45 @@ var Footer = React.createClass({
     render: function () {
         return (
             <FooterBox>
+                <MediaQuery maxWidth={frameless.tablet - 1}>
+                    <div className="lists">
+                        <dl>
+                            <dd>
+                                <a href="/about/">
+                                    <FormattedMessage id='general.aboutScratch' />
+                                </a>
+                            </dd>
+                            <dd>
+                                <a href="/jobs/">
+                                    <FormattedMessage id='general.jobs' />
+                                </a>
+                            </dd>
+                            <dd>
+                                <a href="/contact-us/">
+                                    <FormattedMessage id='general.contactUs' />
+                                </a>
+                            </dd>
+                        </dl>
+                        <dl>
+                            <dd>
+                                <a href="/terms_of_use/">
+                                    <FormattedMessage id='general.termsOfUse' />
+                                </a>
+                            </dd>
+                            <dd>
+                                <a href="/privacy_policy/">
+                                    <FormattedMessage id='general.privacyPolicy' />
+                                </a>
+                            </dd>
+                            <dd>
+                                <a href="/community_guidelines/">
+                                    <FormattedMessage id='general.guidelines' />
+                                </a>
+                            </dd>
+                        </dl>
+                    </div>
+                </MediaQuery>
+                <MediaQuery minWidth={frameless.tablet}>
                     <div className="lists">
                         <dl>
                             <dt>
@@ -52,7 +94,6 @@ var Footer = React.createClass({
                                 </a>
                             </dd>
                         </dl>
-
                         <dl>
                             <dt>
                                 <FormattedMessage id='general.community' />
@@ -162,7 +203,7 @@ var Footer = React.createClass({
                             </dd>
                         </dl>
                     </div>
-
+                </MediaQuery>
                 <LanguageChooser />
 
                 <div className="copyright">

src/components/footer/www/footer.scss

 @import "../../../colors";
+@import "../../../frameless";
 
 #footer {
     .lists {
@@ -6,11 +7,10 @@
         text-align: center;
         flex-direction: row;
         flex-wrap: nowrap;
-        justify-content: space-between;
+        justify-content: space-around;
 
         dl {
             display: inline-block;
-            width: 130pt;
             vertical-align: top;
             text-align: left;
             font-size: .8rem;

src/components/navigation/www/navigation.jsx

@@ -251,7 +251,9 @@ var Navigation = React.createClass({
                                 <a className={dropdownClasses}
                                     href="#" onClick={this.handleAccountNavClick}>
                                     <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
+                                    <span className='profile-name'>
                                         {this.props.session.session.user.username}
+                                    </span>
                                 </a>
                                 <Dropdown
                                         as="ul"

src/components/navigation/www/navigation.scss

 @import "../../../colors";
+@import "../../../frameless";
 
 #navigation {
     &.staging {
@@ -231,3 +232,97 @@
         }
     }
 }
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    #navigation .inner {
+        width: $cols4;
+
+        > ul > li {
+            &.login-item {
+                margin-left: 0;
+            }
+
+            &.account-nav {
+                margin-left: 0;
+
+                > a {
+                    .avatar {
+                        margin-right: 0;
+                    }
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .create,
+        .discuss,
+        .explore,
+        .search,
+        .help,
+        .mystuff,
+        .profile-name {
+            display: none;
+        }
+    }
+}
+
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    #navigation .inner {
+        width: $cols6;
+
+        > ul > li {
+            &.login-item {
+                margin-left: 0;
+            }
+
+            &.account-nav {
+                margin-left: 0;
+
+                > a {
+                    .avatar {
+                        margin-right: 0;
+                    }
+
+                    &:after {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .discuss,
+        .explore,
+        .search,
+        .mystuff,
+        .profile-name {
+            display: none;
+        }
+
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    #navigation .inner {
+        width: $cols8;
+
+        > ul > li {
+            &.login-item,
+            &.account-nav {
+                margin-left: 0;
+            }
+        }
+
+        .explore,
+        .search,
+        .mystuff {
+            display: none;
+        }
+    }
+}

src/lib/frameless.js

+/* This file contains breakpoints from _frameless.scss, to be used in MediaQuery elements.
+ * All units are in px, as per _frameless.scss and the MediaQuery default arguments.
+ */
+
+module.exports = {
+    desktop: 942,
+    tablet: 640,
+    mobile: 480
+};

src/routes.json

@@ -4,7 +4,8 @@
         "pattern": "^/?$",
         "routeAlias": "/?$",
         "view": "splash/splash",
-        "title": "Imagine, Program, Share"
+        "title": "Imagine, Program, Share",
+        "viewportWidth": "device-width"
     },
     {
         "name": "about",

src/views/splash/splash.jsx

@@ -21,6 +21,9 @@ var Page = require('../../components/page/www/page.jsx');
 var TeacherBanner = require('../../components/teacher-banner/teacher-banner.jsx');
 var Welcome = require('../../components/welcome/welcome.jsx');
 
+var MediaQuery = require('react-responsive');
+var frameless = require('../../lib/frameless');
+
 require('./splash.scss');
 
 var Splash = injectIntl(React.createClass({
@@ -393,7 +396,9 @@ var Splash = injectIntl(React.createClass({
                                 <News items={this.state.news} messages={messages} />
                             </div>
                         ] : [
+                            <MediaQuery minWidth={frameless.desktop}>
                                 <Intro projectCount={this.state.projectCount} messages={messages} key="intro"/>
+                            </MediaQuery>
                         ]) : []
                     }
 

src/views/splash/splash.scss

+@import "../../frameless";
+
 .splash {
     .splash-header {
         display: flex;
@@ -39,3 +41,41 @@
         margin-bottom: 20px;
     }
 }
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .splash {
+        .splash-header {
+            flex-wrap: wrap;
+            justify-content: center;
+
+            .box {
+                width: $cols4;
+            }
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .splash {
+        .splash-header {
+            flex-wrap: wrap;
+            justify-content: center;
+
+            .box {
+                width: $cols6;
+            }
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    .splash {
+        .splash-header {
+            margin: 0 auto;
+            width: $cols8;
+        }
+    }
+}