From 7f3e4de83615cc1097f115ffd17f2a5cc33f3b41 Mon Sep 17 00:00:00 2001
From: Brad Rydzewski <brad.rydzewski@gmail.com>
Date: Thu, 1 Oct 2015 15:54:39 -0700
Subject: [PATCH] added position sticky to page

---
 static/styles/pages/build.sass | 9 +++++++++
 static/styles_gen/style.css    | 4 ++++
 template/amber/base.amber      | 1 +
 template/amber/build.amber     | 3 ++-
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/static/styles/pages/build.sass b/static/styles/pages/build.sass
index 13b7ea5e3..85368b130 100644
--- a/static/styles/pages/build.sass
+++ b/static/styles/pages/build.sass
@@ -154,3 +154,12 @@
 	color:rgba(255,255,255,0.5);
 	line-height:38px;
 	display:inline-block;
+
+@supports (position:sticky)
+	.sticky
+		position: sticky;
+		top: 20px;
+
+@supports not (position:sticky)
+	.sticky
+		top: 0px;
diff --git a/static/styles_gen/style.css b/static/styles_gen/style.css
index eaf066cad..f1cc91d19 100644
--- a/static/styles_gen/style.css
+++ b/static/styles_gen/style.css
@@ -176,6 +176,10 @@ input[type=range]:focus::-ms-fill-upper { background: #367ebd; }
 
 .tail i { color: rgba(255, 255, 255, 0.5); line-height: 38px; display: inline-block; }
 
+@supports (position: sticky) { .sticky { position: sticky; top: 20px; } }
+
+@supports not (position: sticky) { .sticky { top: 0px; } }
+
 .user-row .col-sm-4 { width: 100%; }
 
 .user-row .col-sm-4:last-child .card { border-bottom: none; }
diff --git a/template/amber/base.amber b/template/amber/base.amber
index 7e644df21..4784f80b7 100644
--- a/template/amber/base.amber
+++ b/template/amber/base.amber
@@ -52,4 +52,5 @@ html
             script[type="text/javascript"][src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"]
             script[type="text/javascript"][src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"]
             script[type="text/javascript"][src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"]
+            script[text="text/javascript"][src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.2/stickyfill.js"]
             script[type="text/javascript"][src="/static/scripts_gen/drone.min.js"]
diff --git a/template/amber/build.amber b/template/amber/build.amber
index 50622938f..be74d03a1 100644
--- a/template/amber/build.amber
+++ b/template/amber/build.amber
@@ -17,7 +17,7 @@ block header
 block content
     div.container-fluid
         div.row
-            div.col-md-4
+            div.col-md-4.sticky
                 div.build-summary
                     div
                         div[class=Build.Status][style="display:none"] #{Build.Status}
@@ -73,6 +73,7 @@ block content
 
 block append scripts
     script
+        $('.sticky').Stickyfill();
         var repo = #{json(Repo.FullName)};
         var build = #{json(Build.Number)};
         var job = #{json(Job.Number)};