[incubator-daffodil-site] 02/02: Fix the navigation bar on smaller screens

[sl...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

slawrence pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-daffodil-site.git

commit b246f8cb16bda9922ed845631d943103269d77df
Author: Steve Lawrence <sl...@tresys.com>
AuthorDate: Mon Oct 15 07:42:40 2018 -0400

    Fix the navigation bar on smaller screens
    
    The navigation bar was completely broken on smaller screens like on
    tablets and phones. Part of the issue was due to the fixed and collapsed
    capabilities of the nav bar. Those don't provide much value, so just
    remove them completely. The navbar now scrolls along with the page, and
    on small screen the nav bar just wraps to the next line and becomes
    centered.
---
 site/_includes/themes/apache/_navigation.html | 11 +----
 site/assets/themes/apache/css/style.css       | 61 ++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/site/_includes/themes/apache/_navigation.html b/site/_includes/themes/apache/_navigation.html
index 4c4d573..c713022 100644
--- a/site/_includes/themes/apache/_navigation.html
+++ b/site/_includes/themes/apache/_navigation.html
@@ -1,18 +1,11 @@
-    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+    <div class="navbar navbar-inverse" role="navigation">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <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" href="/">
-              <!--<img src="/assets/themes/apache/img/logo.png" width="50">-->
               Apache Daffodil (incubating)
           </a>
         </div>
-        <nav class="navbar-collapse collapse" role="navigation">
+        <nav role="navigation">
           <ul class="nav navbar-nav navbar-right">
             <li><a href="/releases">Releases</a></li>
             <li id="documentation">
diff --git a/site/assets/themes/apache/css/style.css b/site/assets/themes/apache/css/style.css
index ce9be6e..fba72d1 100644
--- a/site/assets/themes/apache/css/style.css
+++ b/site/assets/themes/apache/css/style.css
@@ -2,22 +2,11 @@
 @import url(//fonts.googleapis.com/css?family=Patua+One);
 
 body {
-  padding-top: 50px;
   padding-bottom: 20px;
   font-family: 'Carlito', 'FreeSans', 'Liberation Sans', 'Arial', 'Helvetica', sans-serif;
   font-size: 16px;
 }
 
-/* this makes it so anchors are slightly below the navbar so they
- * aren't covered up when linked */
-*[id]:before {
-	display:block;
-	content: " ";
-	margin-top: -75px;
-	height: 75px;
-	visibility: hidden;
-}
-
 h1,
 h2,
 h3,
@@ -50,6 +39,11 @@ h6,
   }
 }
 
+.container > .navbar-header {
+  margin:auto;
+  text-align: center;
+}
+
 .navbar-brand {
   padding: 12px 12px;
   padding-top: 15px;
@@ -60,13 +54,46 @@ h6,
   background-color:#fad400;
   color: #000000;
   border-color: #e0c52d;
-  max-height: 51px;
+  margin-bottom: 0px;
+  border-radius: 0px;
+}
+
+.navbar-nav {
+  text-align: center;
+  margin: auto;
+}
+
+.nav > li {
+  float: none;
+  display: inline-block;
+}
+
+.navbar-nav .open .dropdown-menu {
+  position: absolute;
+  border-radius: 4px;
+  border: solid 1px rgba(0,0,0,.15);
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
+  background-color: #ffffff;
+  right: 0;
+  left: auto;
+}
+
+.dropdown-menu > li > a {
+  text-align: left;
+}
+
+@media (max-width: 1023px) {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
+    color: #000000;
+    background-color: #f5f5f5;
+  }
 }
 
 .navbar-inverse .navbar-nav > li > a {
   color: #000000;
   background-color:#fad400;
   font-size: .9em;
+  display: inline-block;
 }
 
 .navbar-inverse .navbar-nav > li > a:hover, 
@@ -90,7 +117,9 @@ h6,
 }
 
 .navbar-brand {
-  font-size: 20px;
+  font-size: 26px;
+  display: inline-block;
+  float: none;
 }
 
 @media (min-width: 520px) {
@@ -392,8 +421,10 @@ hr {
 }
 
 @media only screen and (max-width : 768px) {
-  .navbar .navbar-brand {
-      padding-bottom: 0;
+  .navbar .navbar-brand a {
+    line-height: 40px;
+    padding-top: 5px;
+    padding-bottom: 5px;
   }
 }