scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

navbar mobile

Browse source
This commit is contained in:
Technoboy10 2016-07-22 14:55:56 -04:00
parent a9def9c1ae
commit 5b9cef8dd6
2 changed files with 76 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -248,7 +248,8 @@ var Navigation = React.createClass({
<a className={dropdownClasses} <a className={dropdownClasses}
href="#" onClick={this.handleAccountNavClick}> href="#" onClick={this.handleAccountNavClick}>
<Avatar src={this.props.session.session.user.thumbnailUrl} alt="" /> <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
{this.props.session.session.user.username} {this.props.layout == 'COLS8' || this.props.layout == 'COLS12' ?
this.props.session.session.user.username : ''}
</a> </a>
<Dropdown <Dropdown
as="ul" as="ul"
@ -302,7 +303,7 @@ var Navigation = React.createClass({
isOpen={this.state.registrationOpen} isOpen={this.state.registrationOpen}
onRequestClose={this.closeRegistration} onRequestClose={this.closeRegistration}
onRegistrationDone={this.completeRegistration} />, onRegistrationDone={this.completeRegistration} />,
<li className="link login-item" key="login"> <li className="link right login-item" key="login">
<a <a
href="#" href="#"
onClick={this.handleLoginClick} onClick={this.handleLoginClick}

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

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