From 287b144bcfcef28873dfb4908f8655d5c5413599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Wed, 18 Jan 2017 16:42:51 +0100
Subject: [PATCH] Make draft index fixed on scroll

---
 app/assets/stylesheets/legislation_process.scss    |  6 ++++++
 app/views/legislation/draft_versions/show.html.erb | 14 ++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 48b18db8e..dc837a619 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -614,6 +614,12 @@ $epigraph-line-height: rem-calc(22);
         border-right: 1px solid $border;
       }
     }
+    
+    .border-left {
+      @include breakpoint(medium) {
+        border-left: 1px solid $border;
+      }
+    }
 
     .draft-panel {
       text-transform: uppercase;
diff --git a/app/views/legislation/draft_versions/show.html.erb b/app/views/legislation/draft_versions/show.html.erb
index fc3dadaaf..df3d49047 100644
--- a/app/views/legislation/draft_versions/show.html.erb
+++ b/app/views/legislation/draft_versions/show.html.erb
@@ -28,7 +28,7 @@
     </div>
 
     <div class="row draft-allegation medium-collapse">
-      <div class="small-12 calc-index column border-right <%= "js-toggle-allegations" unless @draft_version.final_version? %>">
+      <div class="small-12 calc-index column <%= "js-toggle-allegations" unless @draft_version.final_version? %>">
         <div class="draft-panel">
           <div>
             <span class="icon-banner" aria-hidden="true"></span> <span class="panel-title"><%= t('.text_toc') %></span>
@@ -38,16 +38,18 @@
         <div class="draft-index-rotated center">
           <span class="panel-title"><%= t('.text_toc') %></span>
         </div>
-
-        <div class="draft-index">
-          <%= @draft_version.toc_html.html_safe %>
+        
+        <div data-sticky-container>
+          <div data-sticky data-anchor="sticky-panel" class="draft-index sticky">
+            <%= @draft_version.toc_html.html_safe %>
+          </div>
         </div>
       </div>
-      <div class="small-12 calc-text column border-right">
+      <div class="small-12 calc-text column border-right border-left">
         <div class="draft-panel">
           <div><span class="panel-title"><%= t('.text_body') %></span></div>
         </div>
-        <div class="draft-text">
+        <div id="sticky-panel" class="draft-text">
           <% if @draft_version.final_version? %>
           <section>
           <% else %>