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.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="" />
-                                    {this.props.session.session.user.username}
+                                    <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>
                         ] : [
-                            <Intro projectCount={this.state.projectCount} messages={messages} key="intro"/>
+                            <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;
@@ -24,7 +26,7 @@
 
         .news {
             width: 40%;
-            
+
             img {
                 flex-shrink: 0;
             }
@@ -38,4 +40,42 @@
     .box {
         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;
+        }
+    }
+}