scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
Fix GH-217: Implement responsive nav and footer (woohoo!)
This commit is contained in:
Connor Hudson 2016-08-09 15:09:01 -04:00 committed by GitHub
commit f49d6e6a83
10 changed files with 370 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

21
src/components/carousel/carousel.jsx
View file

@ -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(

339
src/components/footer/www/footer.jsx
View file

@ -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,158 +14,196 @@ var Footer = React.createClass({
render: function () {
return (
<FooterBox>
<div className="lists">
<dl>
<dt>
<FormattedMessage id='general.about' />
</dt>
<dd>
<a href="/about/">
<FormattedMessage id='general.aboutScratch' />
</a>
</dd>
<dd>
<a href="/parents/">
<FormattedMessage id='general.forParents' />
</a>
</dd>
<dd>
<a href="/educators/">
<FormattedMessage id='general.forEducators' />
</a>
</dd>
<dd>
<a href="/developers">
<FormattedMessage id='general.forDevelopers' />
</a>
</dd>
<dd>
<a href="/info/credits/">
<FormattedMessage id='general.credits' />
</a>
</dd>
<dd>
<a href="/jobs/">
<FormattedMessage id='general.jobs' />
</a>
</dd>
<dd>
<a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">
<FormattedMessage id='general.press' />
</a>
</dd>
</dl>
<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>
<FormattedMessage id='general.about' />
</dt>
<dd>
<a href="/about/">
<FormattedMessage id='general.aboutScratch' />
</a>
</dd>
<dd>
<a href="/parents/">
<FormattedMessage id='general.forParents' />
</a>
</dd>
<dd>
<a href="/educators/">
<FormattedMessage id='general.forEducators' />
</a>
</dd>
<dd>
<a href="/developers">
<FormattedMessage id='general.forDevelopers' />
</a>
</dd>
<dd>
<a href="/info/credits/">
<FormattedMessage id='general.credits' />
</a>
</dd>
<dd>
<a href="/jobs/">
<FormattedMessage id='general.jobs' />
</a>
</dd>
<dd>
<a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">
<FormattedMessage id='general.press' />
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='general.community' />
</dt>
<dd>
<a href="/community_guidelines/">
<FormattedMessage id='general.guidelines' />
</a>
</dd>
<dd>
<a href="/discuss/">
<FormattedMessage id='footer.discuss' />
</a>
</dd>
<dd>
<a href="https://wiki.scratch.mit.edu/">
<FormattedMessage id='general.wiki' />
</a>
</dd>
<dd>
<a href="/statistics/">
<FormattedMessage id='general.statistics' />
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='general.community' />
</dt>
<dd>
<a href="/community_guidelines/">
<FormattedMessage id='general.guidelines' />
</a>
</dd>
<dd>
<a href="/discuss/">
<FormattedMessage id='footer.discuss' />
</a>
</dd>
<dd>
<a href="https://wiki.scratch.mit.edu/">
<FormattedMessage id='general.wiki' />
</a>
</dd>
<dd>
<a href="/statistics/">
<FormattedMessage id='general.statistics' />
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='general.support' />
</dt>
<dd>
<a href="/help/">
<FormattedMessage id='footer.help' />
</a>
</dd>
<dd>
<a href="/info/faq/">
<FormattedMessage id='general.faq' />
</a>
</dd>
<dd>
<a href="/scratch2download/">
<FormattedMessage id='general.offlineEditor' />
</a>
</dd>
<dd>
<a href="/contact-us/">
<FormattedMessage id='general.contactUs' />
</a>
</dd>
<dd>
<a href="https://secure.donationpay.org/scratchfoundation/">
<FormattedMessage id='general.donate'/>
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='general.support' />
</dt>
<dd>
<a href="/help/">
<FormattedMessage id='footer.help' />
</a>
</dd>
<dd>
<a href="/info/faq/">
<FormattedMessage id='general.faq' />
</a>
</dd>
<dd>
<a href="/scratch2download/">
<FormattedMessage id='general.offlineEditor' />
</a>
</dd>
<dd>
<a href="/contact-us/">
<FormattedMessage id='general.contactUs' />
</a>
</dd>
<dd>
<a href="https://secure.donationpay.org/scratchfoundation/">
<FormattedMessage id='general.donate'/>
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='general.legal'/>
</dt>
<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="/DMCA/">
<FormattedMessage id='general.dmca' />
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='footer.scratchFamily' />
</dt>
<dd>
<a href="http://scratched.gse.harvard.edu/">
<FormattedMessage id='general.scratchEd' />
</a>
</dd>
<dd>
<a href="http://www.scratchjr.org/">
<FormattedMessage id='general.scratchJr' />
</a>
</dd>
<dd>
<a href="http://day.scratch.mit.edu/">
<FormattedMessage id='general.scratchday' />
</a>
</dd>
<dd>
<a href="/conference/">
<FormattedMessage id='general.scratchConference' />
</a>
</dd>
<dd>
<a href="http://www.scratchfoundation.org/">
<FormattedMessage id='general.scratchFoundation' />
</a>
</dd>
</dl>
</div>
<dl>
<dt>
<FormattedMessage id='general.legal'/>
</dt>
<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="/DMCA/">
<FormattedMessage id='general.dmca' />
</a>
</dd>
</dl>
<dl>
<dt>
<FormattedMessage id='footer.scratchFamily' />
</dt>
<dd>
<a href="http://scratched.gse.harvard.edu/">
<FormattedMessage id='general.scratchEd' />
</a>
</dd>
<dd>
<a href="http://www.scratchjr.org/">
<FormattedMessage id='general.scratchJr' />
</a>
</dd>
<dd>
<a href="http://day.scratch.mit.edu/">
<FormattedMessage id='general.scratchday' />
</a>
</dd>
<dd>
<a href="/conference/">
<FormattedMessage id='general.scratchConference' />
</a>
</dd>
<dd>
<a href="http://www.scratchfoundation.org/">
<FormattedMessage id='general.scratchFoundation' />
</a>
</dd>
</dl>
</div>
</MediaQuery>
<LanguageChooser />
<div className="copyright">

4
src/components/footer/www/footer.scss
View file

@ -1,4 +1,5 @@
@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;

4
src/components/navigation/www/navigation.jsx
View file

@ -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"

95
src/components/navigation/www/navigation.scss
View file

@ -1,4 +1,5 @@
@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;
}
}
}

9
src/lib/frameless.js Normal file
View file

@ -0,0 +1,9 @@
/* 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
};

3
src/routes.json
View file

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

7
src/views/splash/splash.jsx
View file

@ -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>
]) : []
}

44
src/views/splash/splash.scss
View file

@ -1,3 +1,5 @@
@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;
}
}
}