status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-15 03:56:03 +00:00
Code Issues Projects Releases Wiki Activity

Switch nav design

Browse Source
This commit is contained in:
Ben Alpert 2015-03-26 09:53:27 -07:00
parent 684cfedf17
commit 2d23c2fe1f
2 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
website/core/HeaderLinks.js
View File

@ -12,17 +12,17 @@
var React = require('React'); var React = require('React');
var HeaderLinks = React.createClass({ var HeaderLinks = React.createClass({
links: [ linksInternal: [
{section: 'docs', href: '/react-native/docs/getting-started.html#content', text: 'docs'}, {section: 'docs', href: '/react-native/docs/getting-started.html#content', text: 'Docs'},
{section: 'support', href: '/react-native/support.html', text: 'support'}, {section: 'support', href: '/react-native/support.html', text: 'Support'},
{section: 'react', href: 'http://facebook.github.io/react', text: 'react'}, ],
{section: 'github', href: 'http://github.com/facebook/react-native', text: 'github'}, linksExternal: [
{section: 'github', href: 'http://github.com/facebook/react-native', text: 'GitHub'},
{section: 'react', href: 'http://facebook.github.io/react', text: 'React'},
], ],
render: function() { makeLinks: function(links) {
return ( return links.map(function(link) {
<ul className="nav-site">
{this.links.map(function(link) {
return ( return (
<li key={link.section}> <li key={link.section}>
<a <a
@ -32,8 +32,19 @@ var HeaderLinks = React.createClass({
</a> </a>
</li> </li>
); );
}, this)} }, this)
},
render: function() {
return (
<div className="nav-site-wrapper">
<ul className="nav-site nav-site-internal">
{this.makeLinks(this.linksInternal)}
</ul> </ul>
<ul className="nav-site nav-site-external">
{this.makeLinks(this.linksExternal)}
</ul>
</div>
); );
} }
}); });

24
website/src/react-native/css/react-native.css
View File

@ -249,7 +249,15 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
text-decoration: none; text-decoration: none;
} }
.nav-main .nav-site { .nav-main .nav-site-wrapper {
display: inline;
}
.nav-main .nav-site-internal {
margin: 0 0 0 20px;
}
.nav-main .nav-site-external {
float: right; float: right;
margin: 0; margin: 0;
} }
@ -259,21 +267,20 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
} }
.nav-main .nav-site a { .nav-main .nav-site a {
padding: 0 8px; box-sizing: content-box;
text-transform: uppercase; padding: 0 10px;
letter-spacing: 1px;
line-height: 50px; line-height: 50px;
display: inline-block; display: inline-block;
height: 50px; height: 50px;
color: #aaa; color: #ddd;
} }
.nav-main .nav-site a:hover { .nav-main .nav-site a:hover {
color: #fafafa; color: #fff;
} }
.nav-main .nav-site a.active { .nav-main .nav-site a.active {
color: #fafafa; color: #fff;
border-bottom: 3px solid #05A5D1; border-bottom: 3px solid #05A5D1;
background: #333; background: #333;
} }
@ -294,7 +301,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
} }
.nav-main ul { .nav-main ul {
display: inline; display: inline-block;
vertical-align: top;
} }
.nav-main li { .nav-main li {