From 1e84557d40896109d1537cb4dc95bf248158a548 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <jonathan.katz@excoventures.com>
Date: Wed, 25 Apr 2018 14:01:04 -0700
Subject: [PATCH] Refactor the navigation bar for desktop, tablet, and mobile.

Specifically, the navigation bar now shrinks in height on scroll
and when on devices smaller than 768px. Additionally, the search
box disappears at the 1280px break point to avoid text wrapping.
A JavaScript file was added (main.js) to apply the "compressed"
class when scrolling, which is what provides the menu shrinking.
---
 media/css/main.css       | 55 +++++++++++++++++++++++++++-------------
 media/js/main.js         |  5 ++++
 templates/base/base.html |  1 +
 3 files changed, 44 insertions(+), 17 deletions(-)
 create mode 100644 media/js/main.js

diff --git a/media/css/main.css b/media/css/main.css
index 2a255027..86cbb4f1 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -24,7 +24,6 @@ body {
     font-weight: 400;
     color: #515151;
     font-size: 11.5pt;
-    padding-top: 54px; /** this is to account for the fixed navbar blocking content */
 }
 
 p {
@@ -571,6 +570,7 @@ ul.actions {
 
 .navbar {
   box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
+  transition: all 0.3s;
 }
 
 /* #SIDEBAR UL STYLING */
@@ -782,33 +782,40 @@ h1.subject {
 
 /** ALL RESPONSIVE QUERIES HERE */
 /* Small devices (landscape phones, 576px and up)*/
-@media (min-width: 576px) {
-    /** NAVBAR */
-    .nav-item > a {
-        font-size: 0.95rem;
-        font-weight: 600;
-    }
-}
-@media (max-width: 575px) {
-    /** HOMEPAGE JUMBOTRON */
-    .pg-jumbotron-header {
-        font-size: 1.5rem;
+
+@media (max-width: 1280px) {
+    input#q {
+      display: none;
     }
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 992px) {
+    .navbar.compressed {
+      padding: 0 10px;
+    }
+
+    .pg-shout-box {
+      padding-top: 3.7rem;
+    }
 }
 
 @media (max-width: 992px) {
+    .navbar {
+      padding: 5px 10px;
+    }
 
+    .navbar-toggler-icon {
+      width: 1rem;
+      height: 1.5rem;
+    }
+
+    .pg-shout-box {
+      padding-top: 2.8rem;
+    }
 }
 
 @media (max-width: 768px) {
 
-  body {
-    padding-top: 55px;
-  }
-
   .jumbotron.jumbotron-fluid.pg-jumbotron {
     padding: 4em;
   }
@@ -864,3 +871,17 @@ h1.subject {
   }
 
 }
+
+@media (min-width: 576px) {
+    /** NAVBAR */
+    .nav-item > a {
+        font-size: 0.95rem;
+        font-weight: 600;
+    }
+}
+@media (max-width: 575px) {
+    /** HOMEPAGE JUMBOTRON */
+    .pg-jumbotron-header {
+        font-size: 1.5rem;
+    }
+}
diff --git a/media/js/main.js b/media/js/main.js
new file mode 100644
index 00000000..b994d54e
--- /dev/null
+++ b/media/js/main.js
@@ -0,0 +1,5 @@
+$(document).ready(function() {
+  $(window).on("scroll", function() {
+    $(".navbar").toggleClass("compressed", $(window).scrollTop() >= 20);
+  });
+});
diff --git a/templates/base/base.html b/templates/base/base.html
index 600bef18..c78d000b 100644
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -87,6 +87,7 @@
     <script src="/media/js/jquery-3.2.1.slim.min.js?{{gitrev}}"></script>
     <script src="/media/js/popper.min.js?{{gitrev}}"></script>
     <script src="/media/js/bootstrap.min.js?{{gitrev}}"></script>
+    <script src="/media/js/main.js?{{gitrev}}"></script>
     <script type="text/javascript">
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-1345454-1']);