Refs #3542 @1h; Add sticky header

3 files changed, 80 insertions, 10 deletions

diff --git a/app/assets/stylesheets/components/_referential_overview.sass b/app/assets/stylesheets/components/_referential_overview.sass
index 2d903a2d7..77f60a8e7 100644
--- a/app/assets/stylesheets/components/_referential_overview.sass
+++ b/app/assets/stylesheets/components/_referential_overview.sass
@@ -1,4 +1,5 @@
 .referential-overview
+  $left-size: 100px
   margin-top: 50px
   .time-travel, .filters
     background-color: $lightgrey
@@ -42,7 +43,6 @@
     border: 1px solid $grey
     clear: both
     display: flex
-    $left-size: 100px
     .head
       height: $left-size
     .line
@@ -87,13 +87,17 @@
         .number
           border-radius: 100px
           display: inline-block
-          width: 20px
+          min-width: 20px
           height: 20px
           text-align: center
-          padding-top: 1px
+          padding: 1px 4px
           text-decoration: none
           color: black
           border: 1px solid $grey
+          max-width: 100%
+          white-space: nowrap
+          text-overflow: ellipsis
+          overflow: hidden
         .name
           display: inline-block
           width: $left-size - 50px()
@@ -121,14 +125,28 @@
     .right
       flex: 1 1
       overflow: hidden
-      .inner
-        transition: margin 0.5s
+      .inner .lines
+        transition: margin-left 0.5s
       .head
         white-space: nowrap
+        position: relative
+        &:after, &:before
+          opacity: 0
+          transition: opacity 0.5s
+          content: ""
+          position: absolute
+          left: -1000px
+          right: 100%
+          top: 0px
+          bottom: 0
+          background: $darkblue
+          z-index: 11
+          border-top: 1px solid white
         .week
           display: inline-block
           position: relative
           height: 100%
+          transition: margin 0.5s
           .week-span
             left: 5px
             top: 10px
@@ -155,6 +173,9 @@
             width: 1px
             content: ""
 
+          &:last-child:after
+            display: none
+
           .days
             position: relative
             top: 50%
@@ -221,10 +242,41 @@
           bottom: -100%
           position: absolute
           right: -1px
-          z-index: 10
+          z-index: 3
         &.empty
           background: rgb(244, 67, 67)
           background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#e49393 10px,#e49393 20px)
           &.accepted
             background: #f19039
             background: repeating-linear-gradient(-45deg, #f5e1cf,#f5e1cf 10px,#f19039 10px,#f19039 20px)
+
+  &.sticky
+    .time-travel
+      position: fixed
+      bottom: 0
+      z-index: 15
+      right: 35px
+
+    .overview-table .right
+      .lines
+        margin-top: $left-size
+      .head
+        position: fixed
+        top: 80px
+        z-index: 10
+        background: white
+        height: 50px
+        right: 51px
+        left: 51px + $left-size
+        // overflow-x: hidden
+        &:after, &:before
+          opacity: 1
+        &:after
+          left: 100%
+          right: -1000px
+        .week-span, .week-number
+          display: none
+        .days
+          height: 100%
+          top: 0
+          border-top: 1px solid white
diff --git a/app/javascript/referential_overview/index.coffee b/app/javascript/referential_overview/index.coffee
index 6128d7c98..c9a266dea 100644
--- a/app/javascript/referential_overview/index.coffee
+++ b/app/javascript/referential_overview/index.coffee
@@ -38,6 +38,8 @@ class window.ReferentialOverview
     @container = $(selector)
     @timeTravel = new TimeTravel(this)
     @currentOffset = 0
+    $(document).scroll (e)=>
+      @documentScroll(e)
 
   showDay: (date)->
     day = @container.find(".day.#{date}")
@@ -48,6 +50,11 @@ class window.ReferentialOverview
   currentOffset: ->
     @container.find(".right .inner").offset().left
 
+  top: ->
+    @_top ||= @container.find('.days').offset().top - 80
+  bottom: ->
+    @_bottom ||= @top() + @container.height() - 50
+
   prevPage: ->
     @scrollTo @currentOffset + @container.find(".right").width()
 
@@ -62,7 +69,21 @@ class window.ReferentialOverview
     @currentOffset = offset
     @currentOffset = Math.max(@currentOffset, @minOffset())
     @currentOffset = Math.min(@currentOffset, 0)
-    @container.find(".right .inner").css "margin-left": "#{@currentOffset}px"
+    @container.find(".right .inner .lines").css "margin-left": "#{@currentOffset}px"
+    @container.find(".head .week:first-child").css "margin-left", "#{@currentOffset}px"
     @timeTravel.scrolledTo 1 - (@minOffset() - @currentOffset) / @minOffset()
 
+
+  documentScroll: (e)->
+    if @sticky
+      if e.pageY < @top() || e.pageY > @bottom()
+        @container.removeClass "sticky"
+        @sticky = false
+    else
+      if e.pageY > @top() && e.pageY < @bottom()
+        @sticky = true
+        @container.addClass "sticky"
+
+
+
 export default ReferentialOverview
diff --git a/app/views/referentials/_overview.html.slim b/app/views/referentials/_overview.html.slim
index bccd35aae..e9a799764 100644
--- a/app/views/referentials/_overview.html.slim
+++ b/app/views/referentials/_overview.html.slim
@@ -33,9 +33,6 @@
           .line
             a.number style="background-color: #{line.color.present? ? "##{line.color}" : 'whitesmoke'}" title=line.name
               = line.number
-            - unless line.number == line.name
-              a.name title=line.name
-                = line.name
             .company= line.company&.name
             .mode= line.transport_mode
     .right