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.

diff --git a/django/archives/mailarchives/templates/base.html b/django/archives/mailarchives/templates/base.html
index 28bf6e057934bf11add8f88e843e8c1e8be79b9e..9c44853aec577fad8480b5139a494c46400002e8 100644 (file)
--- 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 a9c71bca51d9a36fc49c309cfc8769de9ca8197c..86cbb4f174ce1eba281da85babdc30ebee88c52d 100644 (file)
--- 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 (file)
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);
+  });
+});