scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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}
href="#" onClick={this.handleAccountNavClick}>
<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>
<Dropdown
as="ul"
@ -302,7 +303,7 @@ var Navigation = React.createClass({
isOpen={this.state.registrationOpen}
onRequestClose={this.closeRegistration}
onRegistrationDone={this.completeRegistration} />,
<li className="link login-item" key="login">
<li className="link right login-item" key="login">
<a
href="#"
onClick={this.handleLoginClick}

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

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