From 4878d88cbd9f31d059242028a583e44aa1075534 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Fri, 20 Jun 2014 18:53:12 +0200
Subject: [PATCH] FEATURE: overlay the banner when reading a topic

---
 .../templates/components/discourse-banner.js.handlebars    | 2 +-
 .../javascripts/discourse/templates/topic.js.handlebars    | 2 +-
 app/assets/javascripts/discourse/views/topic_view.js       | 7 ++++++-
 app/assets/stylesheets/common/components/banner.css.scss   | 6 ++++++
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/discourse-banner.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-banner.js.handlebars
index 68677b538a4..40234a4eeee 100644
--- a/app/assets/javascripts/discourse/templates/components/discourse-banner.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/components/discourse-banner.js.handlebars
@@ -1,5 +1,5 @@
 {{#if visible}}
-  <div id="banner">
+  <div id="banner" {{bind-attr class="overlay"}}>
     <div id="banner-content">
       <div class="close" {{action dismiss}}><i class="fa fa-times" title="{{i18n banner.close}}"></i></div>
       {{{banner.html}}}
diff --git a/app/assets/javascripts/discourse/templates/topic.js.handlebars b/app/assets/javascripts/discourse/templates/topic.js.handlebars
index 83fe1c6cd76..a3ae5580272 100644
--- a/app/assets/javascripts/discourse/templates/topic.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/topic.js.handlebars
@@ -1,7 +1,7 @@
 <div class='container'>
   {{custom-html "top"}}
   {{Discourse.globalNotice}}
-  {{discourse-banner user=currentUser banner=Discourse.banner}}
+  {{discourse-banner user=currentUser banner=Discourse.banner overlay=view.hasScrolled}}
 </div>
 
 {{#if postStream.loaded}}
diff --git a/app/assets/javascripts/discourse/views/topic_view.js b/app/assets/javascripts/discourse/views/topic_view.js
index 536a07552b3..593d29a114f 100644
--- a/app/assets/javascripts/discourse/views/topic_view.js
+++ b/app/assets/javascripts/discourse/views/topic_view.js
@@ -115,6 +115,9 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     this.set('docAt', false);
   },
 
+  offset: 0,
+  hasScrolled: Em.computed.gt("offset", 0),
+
   /**
     The user has scrolled the window, or it is finished rendering and ready for processing.
 
@@ -129,6 +132,8 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
       }
     }
 
+    this.set("offset", offset);
+
     var headerController = this.get('controller.controllers.header'),
         topic = this.get('controller.model');
     if (this.get('docAt')) {
@@ -138,7 +143,7 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     }
 
     // Trigger a scrolled event
-    this.appEvents.trigger('topic:scrolled');
+    this.appEvents.trigger('topic:scrolled', offset);
   },
 
   topicTrackingState: function() {
diff --git a/app/assets/stylesheets/common/components/banner.css.scss b/app/assets/stylesheets/common/components/banner.css.scss
index 37b2ca6fd97..70ff223c1ea 100644
--- a/app/assets/stylesheets/common/components/banner.css.scss
+++ b/app/assets/stylesheets/common/components/banner.css.scss
@@ -8,6 +8,12 @@
   border-radius: 5px;
   background: scale-color($tertiary, $lightness: 90%);
   @include box-shadow(0 1px 2px scale-color($tertiary, $lightness: 70%));
+  max-width: 1090px;
+  z-index: 501;
+
+  &.overlay {
+    position: fixed;
+  }
 
   .close {
     font-size: 25px !important;