From d9ce01f74be9f2d7f0535ca74b23d649711b99c9 Mon Sep 17 00:00:00 2001
From: Sarah Conway <sarah.conway@crunchydata.com>
Date: Wed, 25 Apr 2018 13:55:36 -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.
---
 .../archives/mailarchives/templates/base.html |  1 +
 django/media/css/main.css                     | 66 +++++++++++++------
 django/media/js/main.js                       |  5 ++
 3 files changed, 52 insertions(+), 20 deletions(-)
 create mode 100644 django/media/js/main.js

diff --git a/django/archives/mailarchives/templates/base.html b/django/archives/mailarchives/templates/base.html
index 28bf6e0..9c44853 100644
--- a/django/archives/mailarchives/templates/base.html
+++ b/django/archives/mailarchives/templates/base.html
@@ -94,6 +94,7 @@
     <script src="/media-archives/js/jquery-3.2.1.slim.min.js?{{gitrev}}"></script>
     <script src="/media-archives/js/popper.min.js?{{gitrev}}"></script>
     <script src="/media-archives/js/bootstrap.min.js?{{gitrev}}"></script>
+    <script src="/media-archives/js/main.js?{{gitrev}}"></script>
     <script type="text/javascript">
       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-1345454-1']);
diff --git a/django/media/css/main.css b/django/media/css/main.css
index a9c71bc..86cbb4f 100644
--- a/django/media/css/main.css
+++ b/django/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 {
@@ -35,6 +34,10 @@ dl, ol, ul {
   margin-bottom: 0.5rem;
 }
 
+.table td, .table th {
+  padding: 0.5rem;
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Maven Pro', sans-serif;
     font-weight: 700;
@@ -179,8 +182,8 @@ p, ul, ol, dl, table {
 }
 
 .pgFrontFeature {
-    background: #F5F5F5 url(/media-archives/img/feature/feature_elephant.png) right bottom no-repeat;
-    /* background: #F5F5F5 url(/media-archives/img/feature/feature_gears.png) right bottom no-repeat; */
+    background: #F5F5F5 url(/media/img/feature/feature_elephant.png) right bottom no-repeat;
+    /* background: #F5F5F5 url(/media/img/feature/feature_gears.png) right bottom no-repeat; */
 }
 
 .pgFrontContainer {
@@ -338,7 +341,7 @@ blockquote {
 .feature button.btn.btn-center.btn-primary {
     position: relative;
     bottom: 0;
-    margin: 0 auto;
+    margin: 0.25rem auto;
 }
 
 .text {
@@ -567,6 +570,7 @@ ul.actions {
 
 .navbar {
   box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
+  transition: all 0.3s;
 }
 
 /* #SIDEBAR UL STYLING */
@@ -720,6 +724,7 @@ th.formfieldnamecontainer {
     height: 3.5em;
 }
 
+/** This code is for pgarchives */
 /** Thread Lists */
 .thread-list {
     font-size: 0.8em;
@@ -744,7 +749,7 @@ h3.messages {
 
 .message-header th, .message-header td {
     padding: 0;
-}
+ }
 
 .message-header select {
     height: auto;
@@ -777,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: 1280px) {
+    input#q {
+      display: none;
     }
 }
-@media (max-width: 575px) {
-    /** HOMEPAGE JUMBOTRON */
-    .pg-jumbotron-header {
-        font-size: 1.5rem;
+
+@media (min-width: 992px) {
+    .navbar.compressed {
+      padding: 0 10px;
     }
-}
 
-@media (max-width: 1200px) {
+    .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;
   }
@@ -859,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/django/media/js/main.js b/django/media/js/main.js
new file mode 100644
index 0000000..b994d54
--- /dev/null
+++ b/django/media/js/main.js
@@ -0,0 +1,5 @@
+$(document).ready(function() {
+  $(window).on("scroll", function() {
+    $(".navbar").toggleClass("compressed", $(window).scrollTop() >= 20);
+  });
+});
-- 
2.39.5