Sticky navigation

Gruntfile.js

@@ -130,7 +130,9 @@ module.exports = function(grunt) {
           'bower_components/tinymce/plugins/code/plugin.js',
           // Leaflet
           'bower_components/leaflet/dist/leaflet.js', 'bower_components/leaflet-locationfilter/src/locationfilter.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
-          'bower_components/jquery-ui/jquery-ui.js', 'bower_components/jquery-ui/ui/autocomplete.js' ],
+          'bower_components/jquery-ui/jquery-ui.js', 'bower_components/jquery-ui/ui/autocomplete.js',
+          //
+          'bower_components/dyn-css/lib/dyncss.js' ],
         dest : '<%= app.dist %>/js/libraries.js',
       },
       app : {

bower.json

@@ -12,6 +12,7 @@
     "tinymce": "~4.1.9",
     "jquery.tinymce": "*",
     "bootstrap-sass": "~3.3.4",
-    "jquery-ui": "~1.11.4"
+    "jquery-ui": "~1.11.4",
+    "dyn-css": "~0.8.1"
   }
 }

src/main/sourceapp/js/crophub.js

@@ -588,18 +588,18 @@ $('.mobile-menu-show').click(function() {
   $('.mobile-header .header-top .mobile-menu-show').css('display', 'none');
   $('.mobile-header .header-top .mobile-menu-hide').css('display', 'inline-block');
   $('.logo-container').css('display', 'none');
-  $('.mobile-header #search').show('slow');
-  $('#left-col').show('slow');
-  $('#nav-main').show('slow');
+  $('.mobile-header #search').show();
+  $('#left-col').show();
+  $('#nav-main').show();
 });
 
 $('.mobile-menu-hide').click(function() {
   $('.mobile-header .header-top .mobile-menu-show').css('display', 'inline-block');
   $('.mobile-header .header-top .mobile-menu-hide').css('display', 'none');
   $('.logo-container').css('display', 'block');
-  $('.mobile-header #search').hide('slow');
-  $('#left-col').hide('slow');
-  $('#nav-main').hide('slow');
+  $('.mobile-header #search').hide();
+  $('#left-col').hide();
+  $('#nav-main').hide();
 });
 
 // CSRF protection

src/main/sourceapp/styles/genesys.scss

+$header-height: 70;
+
 /* Sticky Footer */
 html, body {
   height: 100%;
@@ -22,7 +24,7 @@ html, body {
 /* Header */
 #header {
   background: #4d4c46;
-  height: 70px;
+  height: #{$header-height}px;
 }
 
 #search {
@@ -213,7 +215,24 @@ html[dir="rtl"] #header .nav .dropdown-menu .checkbox {
   border-radius: 0;
   border-bottom: 5px solid #fff;
   margin-bottom: 0;
-  min-height: inherit;
+  height: 46px;
+  min-height: 46px;
+}
+
+.site-wrapper {
+  /* could not use #{$header-height} because it changes ' to " and makes dyncss unhappy */
+  -dyn-set-state-attached: '@if(@win-width>992 && @win-scrollTop>70, true, false)';
+  
+  &.attached #content {
+    margin-top: 46px;
+  }
+
+  &.attached .genesys-navbar {
+    position: fixed;
+    top: 0;
+    z-index: 1000000;
+    width: 100%;
+  }
 }
 
 .navbar#nav-main ul li a {
@@ -2018,6 +2037,8 @@ table.terms-table td {
     display: block;
   }
   #nav-main.navbar {
+    min-height: inherit;
+    height: inherit;
     background: #4d4c46;
   }
   #search {
@@ -2100,6 +2121,8 @@ table.terms-table td {
   #nav-main.navbar {
     border-bottom: none;
     margin: 0;
+    min-height: inherit;
+    height: inherit;
   }
   .navbar-nav {
     margin: 0;

src/main/webapp/WEB-INF/decorator/css.jsp

@@ -2,19 +2,19 @@
 
 <c:choose>
   <c:when test="${requestContext.theme.name eq 'one'}">
-    <link href="<c:url value="/html/styles/all.min.css" />" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/all.min.css" />" type="text/css" rel="stylesheet" />
   </c:when>
   <c:when test="${requestContext.theme.name eq 'all'}">
-    <link href="<c:url value="/html/styles/bootstrap.min.css" />" rel="stylesheet" />
-    <link href="<c:url value="/html/styles/other.min.css" />" rel="stylesheet" />
-    <link href="<c:url value="/html/styles/genesys.css" />" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/bootstrap.min.css" />" type="text/css" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/other.min.css" />" type="text/css" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/genesys.css" />" type="text/css" rel="stylesheet" />
   </c:when>
   <c:otherwise>
-    <link href="<c:url value="/html/styles/bootstrap.css" />" rel="stylesheet" />
-    <link href="<c:url value="/html/styles/jquery-ui.css" />" rel="stylesheet" />
-    <link href="<c:url value="/html/styles/forza.css" />" rel="stylesheet" />
-    <link href="<c:url value="/html/styles/leaflet.css" />" rel="stylesheet" />
-    <link href="<c:url value="/html/styles/genesys.css" />" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/bootstrap.css" />" type="text/css" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/jquery-ui.css" />" type="text/css" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/forza.css" />" type="text/css" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/leaflet.css" />" type="text/css" rel="stylesheet" />
+    <link href="<c:url value="/html/styles/genesys.css" />" type="text/css" rel="stylesheet" />
   </c:otherwise>
 </c:choose>
 

src/main/webapp/WEB-INF/decorator/footer.jsp

@@ -34,10 +34,10 @@
   </div>
 </div>
 
-<div style="display: none" id="session_expired_popup" title="<spring:message code="session.expiry-warning-title" />" >
+<%-- <div style="display: none" id="session_expired_popup" title="<spring:message code="session.expiry-warning-title" />" >
     <div style="margin-bottom: 1em;"><spring:message code="session.expiry-warning" /></div>
     <a class="btn btn-primary" href="<c:url value="/" />"><spring:message code="session.expiry-extend" /></a>
-</div>
+</div> --%>
 
 <%-- Placed at the end of the document so the pages load faster --%>
 <c:choose>
@@ -58,5 +58,6 @@
 
 <script type="text/javascript">
 	L.Icon.Default.imagePath='<c:url value="/html/styles/images" />';
+  <%--dynCss.config.debug=true;--%>
 	//enableSessionWarning(${pageContext.session.maxInactiveInterval});
 </script>

src/main/webapp/WEB-INF/decorator/menu.jsp

 <%@include file="/WEB-INF/jsp/init.jsp"%>
 
-<div class="navbar" role="navigation" id="nav-main">
+<div class="navbar genesys-navbar" role="navigation" id="nav-main">
   <div class="container">
     <div class="navbar-collapse">
       <ul class="nav navbar-nav">