archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Make navbar look better on mobile

Browse source
This commit is contained in:
Jake Howard 2016-01-08 19:05:50 +00:00
parent cb691cbea0
commit a67915b611
3 changed files with 44 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/src/js/components/navbar/item.js
View file

@ -9,7 +9,7 @@ export default class Item extends React.Component {
);
}
return (
<li><a href={this.props.href}>{icon} {this.props.children}</a></li>
<li><a href={this.props.href}>{icon}{this.props.children}</a></li>
);
}
}

2
static/src/js/components/navbar/navbar.js
View file

@ -14,7 +14,7 @@ export default class NavBar extends React.Component {
<Header />
<div className="collapse navbar-collapse" id="navbar">
<ul className="nav navbar-nav home-button hidden-sm">
<li className="active home"><a href=""><i className="icon ion-home"></i></a></li>
<Item href="" icon="ion-home" />
</ul>
<ul className="nav navbar-nav" id="navigation">
<Dropdown title="Projects">

70
static/src/less/navbar.less
View file

@ -1,4 +1,26 @@
.dropdown-menu {
#navigation {
@media (min-width: @screen-xs-max) {
.flexbox();
justify-content: center;
float: none;
}
& a {
.transition(~"ease-in-out .3s color");
}
& > li {
@media (min-width: @screen-md-min) {
margin-right: 23px;
}
& > a {
@media (min-width: @screen-md-min) {
padding: 15px 10px;
}
@media (max-width: @screen-xs-max) {
padding: 15px 15px;
}
}
}
.dropdown-menu {
@media (min-width: @screen-sm) {
right: auto;
left: 50%;
@ -17,50 +39,37 @@
.open & {
opacity: 1;
}
}
#navigation {
@media (min-width: @screen-xs-max) {
.flexbox();
justify-content: center;
float: none;
}
& a {
.transition(~"ease-in-out .3s color");
}
& > li {
@media (min-width: @screen-md-min) {
margin-right: 23px;
}
@media (max-width: @screen-sm-max) {
margin-right: 10px;
margin-left: 11px;
}
& > a {
@media (min-width: @screen-md-min) {
padding: 15px 10px;
}
@media (max-width: @screen-sm-max) {
padding: 15px 3px;
}
a {
padding-left: 20px;
}
}
}
.navbar {
border-radius: 0;
.home-button a {
.transition(~"ease-in-out .3s color");
}
}
.navbar-nav.nav {
margin: 0;
}
.navbar-toggle {
right: 10px;
}
#navbar-container {
z-index: 0;
width: 96%;
left: 2%;
margin: 0;
z-index: 10000;
i + * {
margin-right: 5px;
}
& .container-fluid{
padding-right: 0;
padding-left: 0;
@ -73,7 +82,8 @@
@media (max-width: @screen-sm) {
position: fixed;
top: 0;
width: 100%;
width: 95%;
}
}
}
@ -83,8 +93,10 @@
height: 52px;
}
.home-button {
@media (min-width: @screen-xs-max) {
.home-button {
margin-right: 15px !important;
}
}
#navbar {