From 58b6aad2d5e948010e865b974158bb19c3bf5274 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sat, 2 Jan 2016 23:29:02 +0000 Subject: [PATCH] The old navbar is backgit status! --- static/src/js/app.js | 1 + static/src/js/events.js | 98 +++++++++++++++++++++++ static/src/less/navbar.less | 153 ++++++++++++++++++++++++++++++++++++ static/src/less/style.less | 1 + templates/about/index.html | 117 ++++++++++++++++++++++++++- 5 files changed, 368 insertions(+), 2 deletions(-) create mode 100644 static/src/less/navbar.less diff --git a/static/src/js/app.js b/static/src/js/app.js index 762c6a9..0968405 100644 --- a/static/src/js/app.js +++ b/static/src/js/app.js @@ -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(, document.getElementById('project-images-types')); React.render(, document.getElementById('project-images-main')); diff --git a/static/src/js/events.js b/static/src/js/events.js index 785ec7b..e6a5551 100644 --- a/static/src/js/events.js +++ b/static/src/js/events.js @@ -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(); +}); diff --git a/static/src/less/navbar.less b/static/src/less/navbar.less new file mode 100644 index 0000000..1bbfc2c --- /dev/null +++ b/static/src/less/navbar.less @@ -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 ++ */ diff --git a/static/src/less/style.less b/static/src/less/style.less index 0c5c40b..132c7dc 100644 --- a/static/src/less/style.less +++ b/static/src/less/style.less @@ -7,6 +7,7 @@ @import (inline) "node_modules/normalize.css/normalize.css"; @import 'homepage'; @import 'variables'; +@import 'navbar'; /* @group Global */ .btn { diff --git a/templates/about/index.html b/templates/about/index.html index afd11ca..4fcf28c 100644 --- a/templates/about/index.html +++ b/templates/about/index.html @@ -21,7 +21,7 @@ Some info about my website.

- More Info + More Info

@@ -35,11 +35,124 @@ Some info about me. Although not very much

- More Info + More Info

+ + +

































































































{% endblock %}