Refs #2482: adding sticky behavior for main top nav

6 files changed, 133 insertions, 28 deletions

diff --git a/app/assets/javascripts/main_menu.coffee b/app/assets/javascripts/main_menu.coffee
index 91b714fcf..cdc1654c5 100644
--- a/app/assets/javascripts/main_menu.coffee
+++ b/app/assets/javascripts/main_menu.coffee
@@ -1,10 +1,36 @@
 @mainmenu = ->
   $('#main_nav').each ->
+    # Opening/closing left-side menu
     $(this).on 'click', '.openMenu', (e) ->
       $(this).parent().addClass 'open'
 
     $(this).on 'click', '.closeMenu', (e) ->
-      console.log('pouet')
       $(this).closest('.nav-menu').removeClass 'open'
 
+    # Sticky behavior
+    toStick = $('.page_header')
+    limit = toStick.outerHeight() - 33
+
+    console.log limit
+
+    stickyContent = '<div class="sticky-content">'
+    stickyContent += '<div class="sticky-ptitle">' + $(".page-title").html() + '</div>'
+    stickyContent += '<div class="sticky-paction">' + $(".page-action").html() + '</div>'
+    stickyContent += '</div>'
+
+    $(document).on 'scroll', ->
+      if $(window).scrollTop() >= limit
+        $('body').addClass 'has-sticky'
+        $('#main_nav').addClass 'sticky'
+
+        if $('#menu_top').find('.sticky-content').length == 0
+          $('#menu_top').children('.menu-content').after(stickyContent)
+
+      else
+        $('body').removeClass 'has-sticky'
+        $('#main_nav').removeClass 'sticky'
+
+        if $('#menu_top').find('.sticky-content').length > 0
+          $('.sticky-content').remove()
+
 $(document).on 'ready turbolinks:load', mainmenu
diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
index 0a5006333..e2e355e4e 100644
--- a/app/assets/stylesheets/_layout.sass
+++ b/app/assets/stylesheets/_layout.sass
@@ -16,6 +16,9 @@ body
   color: $darkgrey
   background-color: #fff
 
+  &.has-sticky
+    padding-top: 80px
+
 .page_header
   padding: 40px 35px 0 35px
 
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index 32f0def24..28f1c996b 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -13,10 +13,3 @@
       background-color: darken($darkblue, 2.5%)
       border-color: darken($darkblue, 2.5%)
       color: #fff
-
-.btn-helper-txt
-  font-size: 0.85em
-  margin: 5px 0 0 0
-
-  &:first-child
-    margin: 0 0 5px 0
diff --git a/app/assets/stylesheets/components/_main_nav.sass b/app/assets/stylesheets/components/_main_nav.sass
index c4dbc95e4..9f04a5979 100644
--- a/app/assets/stylesheets/components/_main_nav.sass
+++ b/app/assets/stylesheets/components/_main_nav.sass
@@ -4,6 +4,7 @@ $menuW: 300px
 #main_nav
   display: block
   height: $menuH
+  transition: 0.3s
   position: fixed
   top: 0
   left: 0
@@ -43,6 +44,9 @@ $menuW: 300px
         content: '\f0c9'
         line-height: $menuH
 
+    .openMenu
+      transition: 0.3s
+
     .closeMenu
       &:before
         content: '\f00d'
@@ -199,16 +203,19 @@ $menuW: 300px
     text-rendering: optimizespeed
     font-weight: 400
     height: $menuH
+    transition: 0.3s
     padding-left: $menuH
     background-color: $blue
     color: #fff
 
-    > .brandname, > .menu-content
-      display: inline-block
+    > *
       letter-spacing: normal
       word-spacing: normal
       text-rendering: auto
       vertical-align: top
+
+    > .brandname, > .menu-content
+      display: inline-block
       overflow: hidden
 
       &.brandname
@@ -304,3 +311,41 @@ $menuW: 300px
 
     .panel-body
       padding: 15px 20px
+
+  // Sticky behavior
+  &.sticky
+    &, #menu_left .openMenu, #menu_top
+      height: $menuH * 2
+      transition: 0.3s
+
+    #menu_top > .menu-content > .menu-item-group
+      display: none
+
+    .sticky-content
+      padding: 0 50px 0 75px
+      margin-top: -4px
+
+      > *
+        display: inline-block
+
+        &.sticky-ptitle
+          width: 60%
+
+          h1
+            margin: 0
+
+            .small.fa
+              color: #fff
+              margin-left: 0.5em
+
+        &.sticky-paction
+          width: 40%
+          text-align: right
+          vertical-align: top
+
+          > *
+            display: inline-block
+            vertical-align: middle
+
+            + .btn
+              margin-left: 10px
diff --git a/app/assets/stylesheets/components/_page_header.sass b/app/assets/stylesheets/components/_page_header.sass
index 85fff908f..4fb4b02c3 100644
--- a/app/assets/stylesheets/components/_page_header.sass
+++ b/app/assets/stylesheets/components/_page_header.sass
@@ -2,9 +2,38 @@
   background-color: $blue
   color: #fff
 
-  h1
-    margin: 0
+  .page-icon
+    display: inline-block
+    vertical-align: middle
+    width: 45px
+    height: 45px
+    background-color: rgba(#fff, 0.2)
+    line-height: 45px
+    text-align: center
 
-    .small.fa
-      color: #fff
-      margin-left: 0.5em
+    margin-right: 20px
+
+  .page-title
+    display: inline-block
+    vertical-align: middle
+
+    h1
+      margin: 0
+
+      .small.fa
+        color: #fff
+        margin-left: 0.5em
+
+  .page-action
+    line-height: 42px
+    height: 45px
+    margin-bottom: 10px
+    text-align: right
+
+    > *
+      display: inline-block
+      vertical-align: middle
+      line-height: $line-height
+
+      + .btn
+        margin-left: 10px
diff --git a/app/views/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index 7ae3e5b2c..20e12e2d0 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -1,13 +1,23 @@
 .page_header
   .container-fluid
     .row
-      .col-lg-9.col-md-8.col-sm-8
-        h1
-          |Jeux de données
-          span.small.fa.fa-info-circle title='Description'
+      .col-lg-9.col-md-8.col-sm-8.col-xs-7
+        .page-icon
+          span.fa.fa-map-marker
+        .page-title
+          h1
+            |Jeux de données
+            span.small.fa.fa-info-circle title='Description'
       
-      .col-lg-3.col-md-4.col-sm-4.text-right
-        .btn-helper-txt = 'Dernière mise à jour le 12/12/2016 par Prenom NOM'
+      .col-lg-3.col-md-4.col-sm-4.col-xs-5.text-right
+        .page-action
+          .small
+            = "Dernière mise à jour "
+            br
+            = "le #{l @workbench.updated_at, format: '%d/%m/%Y'} par Prenom NOM"
+
+    .row
+      .col-lg-12.col-md-12.col-sm-12.col-xs-12.text-right
         = link_to t('referentials.actions.new'), new_referential_path(workbench_id: @workbench), class: 'btn btn-default btn-primary'
 
 .page_content
@@ -15,13 +25,12 @@
     .row
       .col-lg-12
         .referentials.paginated_content
-          h4 = "Liste des jeux de données#{' (tous)' if params[:show_all]}"
-          
-          h5
-            - if params[:show_all]
-              = link_to t('referentials.show.from_this_workbench'), workbench_path(@workbench.id), class: 'button', disabled: params[:archived]
-            - else
-              = link_to t('referentials.show.show_all_referentials'), workbench_path(@workbench.id, show_all: true), class: 'btn btn-default'
+          / h4 = "Liste des jeux de données#{' (tous)' if params[:show_all]}"
+          / h5
+          /   - if params[:show_all]
+          /     = link_to t('referentials.show.from_this_workbench'), workbench_path(@workbench.id), class: 'button', disabled: params[:archived]
+          /   - else
+          /     = link_to t('referentials.show.show_all_referentials'), workbench_path(@workbench.id, show_all: true), class: 'btn btn-default'
 
           table.table.table-bordered.table-hover
             thead