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

The old navbar is backgit status!

Browse source
This commit is contained in:
Jake Howard 2016-01-02 23:29:02 +00:00
parent 29c0bc81d7
commit 58b6aad2d5
5 changed files with 368 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@ var React = require('react');
var ProjectImagesTypes = require('./components/index/project-images-types');
var ProjectImagesMain = require('./components/index/project-images-main');
if ($('body').hasClass('index')) { // Render components on index
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
React.render(<ProjectImagesMain />, document.getElementById('project-images-main'));

98
static/src/js/events.js
View file

@ -1,4 +1,90 @@
/* global $ */
var is_navbar_attached = false;
function position_navbar() {
if ($(window).width() < 862) { // @screen-sm
$('.navbar-icon').removeClass('ion-ios-arrow-up').addClass('ion-ios-arrow-down');
return;
}
if ($(window).scrollTop() > $('#navbar-anchor').offset().top) {
if(!is_navbar_attached) {attach_navbar(); is_navbar_attached = true;}
} else if (is_navbar_attached) {
detach_navbar();
is_navbar_attached = false;
}
$('.dropdown-menu').each(function(){
var direction = ($(this).height() + 10 < $('nav').offset().top - $(window).scrollTop()) ? 'up' : 'down';
flip_dropdowns($(this), direction);
});
}
$(window).load(function(){
$(window).trigger('scroll').trigger('resize');
});
function detach_navbar() {
$('#navbar-container').removeClass('stick-top').addClass('align');
$('.dropdown-menu').removeClass('dropdown').addClass('dropup');
}
function set_page_sizes() {
var win_height = $(window).height();
var win_width = $(window).width();
$('.page-height').each(function() {
$(this).height(win_height);
});
$('.page-width').each(function() {
$(this).width(win_width);
});
}
function attach_navbar() {
$('#navbar-container').removeClass('align').addClass('stick-top');
$('.dropdown-menu').removeClass('dropup').addClass('dropdown');
}
function flip_dropdowns(obj, direction) {
if (obj.hasClass('drop'+direction)){ return; }
var reverse = direction == 'up' ? 'down' : 'up';
obj.removeClass('drop' + reverse).addClass('drop' + direction);
obj.prev().children().removeClass('ion-ios-arrow-' + reverse).addClass('ion-ios-arrow-' + direction);
}
function space_navbar() { //This really should be CSS!
if ($(window).width() < 862) {return;} // @screen-sm
var nav_width = $('#navigation').outerWidth(true);
var full_width = $('nav > .container-fluid').outerWidth(true) - $('.home-button').outerWidth(true);
var margin = (full_width - nav_width) / 2;
$('#navigation').css('margin-left', margin);
}
function checkDomain(url) {
if ( url.indexOf('//') === 0 ) { url = location.protocol + url; }
return url.toLowerCase().replace(/([a-z])?:\/\//,'$1').split('/')[0];
}
function isExternal(url) {
return ( ( url.indexOf(':') > -1 || url.indexOf('//') > -1 ) && checkDomain(location.href) !== checkDomain(url) );
}
function is_on_screen(elm) {
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
return ((y < (vpH + st)) && (y > (st - elementHeight)));
}
function navTo(url){
location.href=url;
}
$(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('a[href*=#]:not([href=#])').click(function() {
@ -20,3 +106,15 @@ $('a[href="soon"]').click(function (e) {
e.preventDefault();
alert('Content coming soon, stand by!');
});
$(window).scroll(function() {
position_navbar();
});
$(window).resize(function() {
set_page_sizes();
space_navbar();
});

153
static/src/less/navbar.less Normal file
View file

@ -0,0 +1,153 @@
/* @group Navigation Bar */
.dropdown-menu {
@media (min-width: @screen-sm) {
right: auto;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
.transition(~"ease-in-out .2s all");
}
&.dropup {
bottom: 100%;
top: initial;
}
&.dropdown {
top: 100%;
bottom: initial;
}
.open & {
opacity: 1;
}
}
#navigation {
& 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;
}
}
}
}
.navbar-nav.nav {
margin: 0;
}
#navbar-container {
z-index: 0;
& .container-fluid{
padding-right: 0;
padding-left: 0;
}
&.align {
@media (min-width: @screen-sm) {
position: absolute;
bottom: 0;
height: 52px;
}
@media (max-width: @screen-sm) {
position: fixed;
top: 0;
width: 100%;
}
}
}
#navbar-anchor {
position: absolute;
bottom: 0;
height: 52px;
}
.home-button {
margin-right: 15px !important;
}
#navbar {
margin: 0;
padding: 0;
}
.navbar-brand {
margin-left: 15px;
}
/* @end Navigation Bar */
/* @group Functional ++ */
.stick-top {
position: fixed;
top: 0;
z-index: 10000;
}
.full-width {
width: 100%;
}
.clickable {
cursor: pointer;
}
.no-font {
font-size: 0px;
}
.full-height {
height: 100%;
}
.center-text {
text-align: center;
}
div.fix-image {
background-attachment: fixed;
background-size: cover;
}
.margin-bottom {
margin-bottom: 10px;
}
.black-text {
color: black !important;
}
.white-text {
color: white !important;
}
.drop-shadow {
.box-shadow(0 0.4px 6px 0 rgba(0, 0, 0, 0.9));
}
.mega-icon {
font-size: 110px;
text-align: center;
margin-bottom: 0;
& ~ div.caption {
padding-top: 0;
h3 {
margin: 0;
}
}
}
/* @end Functional ++ */

1
static/src/less/style.less
View file

@ -7,6 +7,7 @@
@import (inline) "node_modules/normalize.css/normalize.css";
@import 'homepage';
@import 'variables';
@import 'navbar';
/* @group Global */
.btn {

117
templates/about/index.html
View file

@ -21,7 +21,7 @@
Some info about my website.
</p>
<p>
<a href="{% url 'pages:about-website' %}" class="btn btn-primary btn-block">More Info</a>
<a href="" class="btn btn-primary btn-block">More Info</a>
</p>
</div>
</div>
@ -35,11 +35,124 @@
Some info about me. Although not very much
</p>
<p>
<a href="{% url 'pages:about-me' %}" class="btn btn-primary btn-block">More Info</a>
<a href="" class="btn btn-primary btn-block">More Info</a>
</p>
</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 %}