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

React-ify the navbar

Browse source
This commit is contained in:
Jake Howard 2016-01-03 17:51:14 +00:00
parent 703d27f259
commit 1bbb625255
5 changed files with 79 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/src/js/app.js
View file

@ -6,8 +6,13 @@ import React from 'react';
import ProjectImagesTypes from './components/index/project-images-types'; import ProjectImagesTypes from './components/index/project-images-types';
import ProjectImagesMain from './components/index/project-images-main'; import ProjectImagesMain from './components/index/project-images-main';
import NavBar from './components/navbar/navbar';
if ($('body').hasClass('index')) { // Render components on index if ($('body').hasClass('index')) { // Render components on index
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types')); React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
React.render(<ProjectImagesMain />, document.getElementById('project-images-main')); React.render(<ProjectImagesMain />, document.getElementById('project-images-main'));
} }
if ($('#navbar-test')) {
React.render(<NavBar />, document.getElementById('navbar-test'));
}

65
static/src/js/components/navbar/navbar.js Normal file
View file

@ -0,0 +1,65 @@
import React from 'react';
var ReactBootstrap = require('react-bootstrap');
var {
Navbar,
Nav,
MenuItem,
NavItem,
NavDropdown
} = ReactBootstrap;
export default class NavBar extends React.Component {
render() {
return (
<span>
<div id="navbar-anchor" />
<div id="navbar-container" className="align h4">
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand visible-xs"><i className="icon ion-compass"></i> Navigation</a>
</div>
<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>
</ul>
<ul className="nav navbar-nav" id="navigation">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Projects <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul className="dropdown-menu dropup">
<li><a href="#"><i className="icon ion-social-freebsd-devil"></i> Pithos</a></li>
<li><a href=""><i className="icon ion-ios-monitor"></i> BSOD Enabler</a></li>
<li><a href=""><i className="icon ion-chatbox-working"></i> Hipchat Emoticons for All</a></li>
<li><a href=""><i className="icon ion-social-windows"></i> Custom PC</a></li>
<li><a href=""><i className="icon ion-android-more-vertical"></i> All Projects...</a></li>
</ul>
</li>
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Code <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul className="dropdown-menu dropup">
<li><a href="#"><i className="icon ion-code-working"></i> Code Challenges</a></li>
<li><a href=""><i className="icon ion-ios-circle-filled"></i> Morse Code Decoder</a></li>
<li><a href=""><i className="icon ion-ios-game-controller-a"></i> The Wiki Game Solver</a></li>
<li><a href=""><span className="glyphicon glyphicon-print" aria-hidden="true"></span> Printr</a></li>
</ul>
</li>
<NavItem href="#">Link 1</NavItem>
</ul>
</div>
</div>
</nav>
</div>
</span>
);
}
}

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

@ -42,12 +42,20 @@
} }
} }
.navbar {
border-radius: 0;
}
.navbar-nav.nav { .navbar-nav.nav {
margin: 0; margin: 0;
} }
#navbar-container { #navbar-container {
z-index: 0; z-index: 0;
width: 96%;
left: 2%;
margin: 0;
z-index: 10000;
& .container-fluid{ & .container-fluid{
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;

112
templates/about/index.html
View file

@ -42,117 +42,5 @@
</div> </div>
</div> </div>
</div> </div>
<div id='navbar-anchor'></div>
<div id="navbar-container" class="align h4" style="width: 96%; left: 2%; margin: 0; z-index: 10000;">
<nav class="navbar navbar-inverse" style="border-radius: 0;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs"><i class="icon ion-compass"></i> Navigation</a>
</div>
<div class="collapse navbar-collapse" id="navbar" style=" padding-left: 0px;">
<ul class="nav navbar-nav home-button hidden-sm">
<li class="active home"><a href=""><i class="icon ion-home"></i></a></li>
</ul>
<ul class="nav navbar-nav" id="navigation">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Projects <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href="#"><i class="icon ion-social-freebsd-devil"></i> Pithos</a></li>
<li><a href=""><i class="icon ion-ios-monitor"></i> BSOD Enabler</a></li>
<li><a href=""><i class="icon ion-chatbox-working"></i> Hipchat Emoticons for All</a></li>
<li><a href=""><i class="icon ion-social-windows"></i> Custom PC</a></li>
<li><a href=""><i class="icon ion-android-more-vertical"></i> All Projects...</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Code <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href="#"><i class="icon ion-code-working"></i> Code Challenges</a></li>
<li><a href=""><i class="icon ion-ios-circle-filled"></i> Morse Code Decoder</a></li>
<li><a href=""><i class="icon ion-ios-game-controller-a"></i> The Wiki Game Solver</a></li>
<li><a href=""><span class="glyphicon glyphicon-print" aria-hidden="true"></span> Printr</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
College <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href="">Student Robotics</a></li>
<li><a href=""><i class="icon ion-cube"></i> Attack on Blocks Game</a></li>
<li><a href=""><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Student Server</a></li>
<li><a href="#"><i class="icon ion-ios-paper"></i> EPQ</a></li>
<li><a href="#">Wall of Sheep</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setup <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href="">&#128129; Desk</a></li>
<li><a href="#"><i class="icon ion-briefcase"></i> Work</a></li>
<li><a href="#"><i class="icon ion-model-s"></i> On the Go</a></li>
<li><a href="#"><i class="icon ion-android-phone-portrait"></i> Devices</a></li>
<li><a href="#"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Servers</a></li>
<li><a href=""><i class="icon ion-android-more-vertical"></i> All</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Work <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href="#"><i class="icon ion-fork-repo"></i> Projects</a></li>
<li><a href="#"><i class="icon ion-android-desktop"></i> Setup</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Media <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href=""><i class="icon ion-social-youtube"></i> Youtube Channel</a></li>
<li><a href="#"><i class="icon ion-social-rss"></i> Feed</a></li>
<li><a href=""><i class="icon ion-ios-camera"></i> Gallery</a></li>
</ul>
</li>
<li><a href="#">Links</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
About <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li><a href="#"><i class="icon ion-android-person"></i> Me</a></li>
<li><a href=""><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Website</a></li>
<li><a href="#"><i class="icon ion-android-contacts"></i> Contact Me</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Account <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul class="dropdown-menu dropup">
<li class="active hidden-xs"><a><i class="icon ion-ios-body-outline"></i> *username*</a></li>
<li><a href="#"><i class="icon ion-ios-cog-outline"></i> Preferences</a></li>
<li><a href="#"><i class="icon ion-log-in"></i> Login / Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
{% endblock %} {% endblock %}

1
templates/about/me.html
View file

@ -23,5 +23,6 @@
</div> </div>
</div> </div>
<div id="navbar-test"></div>
<script async defer src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script> <script async defer src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
{% endblock %} {% endblock %}