From 7525a896df2bc40d333ca93d6673fd5959cce3f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Wed, 29 Oct 2014 00:46:05 +0100
Subject: [PATCH] UX: make the blue notification float over the column headers
 on desktop

---
 .../controllers/discovery/topics.js.es6       |  1 -
 .../discourse/templates/discovery/topics.hbs  | 71 +++++++++----------
 .../templates/mobile/discovery/topics.hbs     |  2 +-
 .../stylesheets/common/base/_topic-list.scss  |  6 ++
 .../stylesheets/common/base/discourse.scss    |  3 +
 5 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/discovery/topics.js.es6 b/app/assets/javascripts/discourse/controllers/discovery/topics.js.es6
index a25502d663..eb1f7afc2d 100644
--- a/app/assets/javascripts/discourse/controllers/discovery/topics.js.es6
+++ b/app/assets/javascripts/discourse/controllers/discovery/topics.js.es6
@@ -121,7 +121,6 @@ var controllerOpts = {
 
   canBulkSelect: Em.computed.alias('currentUser.staff'),
   hasTopics: Em.computed.gt('topics.length', 0),
-  showTable: Em.computed.or('hasTopics', 'topicTrackingState.hasIncoming'),
   allLoaded: Em.computed.empty('more_topics_url'),
   latest: Discourse.computed.endWith('filter', 'latest'),
   new: Discourse.computed.endWith('filter', 'new'),
diff --git a/app/assets/javascripts/discourse/templates/discovery/topics.hbs b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
index d518e0054a..4e05e65e4c 100644
--- a/app/assets/javascripts/discourse/templates/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/templates/discovery/topics.hbs
@@ -26,53 +26,46 @@
       {{top-period-chooser period=period}}
     </div>
   {{/if}}
-  {{#if showTable}}
+  {{#if topicTrackingState.hasIncoming}}
+    <div class="show-more">
+      <div class='alert alert-info clickable' {{action "showInserted"}}>
+        {{countI18n topic_count_ suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
+        {{i18n click_to_show}}
+      </div>
+    </div>
+  {{/if}}
+  {{#if hasTopics}}
     <table class='topic-list'>
       <thead>
-      <tr>
-        {{#if currentUser}}
-        <th class='star'>
-          {{#if canBulkSelect}}
-          <button class='btn bulk-select' {{action "toggleBulkSelect"}} title="{{i18n topics.bulk.toggle}}"><i class='fa fa-list'></i></button>
+        <tr>
+          {{#if currentUser}}
+          <th class='star'>
+            {{#if canBulkSelect}}
+            <button class='btn bulk-select' {{action "toggleBulkSelect"}} title="{{i18n topics.bulk.toggle}}"><i class='fa fa-list'></i></button>
+            {{/if}}
+          </th>
           {{/if}}
-        </th>
-        {{/if}}
-        {{#sortable-heading class="default"}} {{i18n topic.title}} {{/sortable-heading}}
-        {{#unless controller.hideCategory}}
-          {{#sortable-heading sortBy="category" action="changeSort" order=order ascending=ascending}}
-            {{i18n category_title}}
+          {{#sortable-heading class="default"}} {{i18n topic.title}} {{/sortable-heading}}
+          {{#unless controller.hideCategory}}
+            {{#sortable-heading sortBy="category" action="changeSort" order=order ascending=ascending}}
+              {{i18n category_title}}
+            {{/sortable-heading}}
+          {{/unless}}
+          {{#sortable-heading class="posters"}} {{i18n users}} {{/sortable-heading}}
+          {{#sortable-heading sortBy="posts" number=true action="changeSort" order=order ascending=ascending}}
+            {{i18n posts}}
           {{/sortable-heading}}
-        {{/unless}}
-        {{#sortable-heading class="posters"}} {{i18n users}} {{/sortable-heading}}
-        {{#sortable-heading sortBy="posts" number=true action="changeSort" order=order ascending=ascending}}
-          {{i18n posts}}
-        {{/sortable-heading}}
-        {{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}}
-          {{i18n views}}
-        {{/sortable-heading}}
-        {{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}}
-          {{i18n activity}}
-        {{/sortable-heading}}
-      </tr>
+          {{#sortable-heading sortBy="views" number=true action="changeSort" order=order ascending=ascending}}
+            {{i18n views}}
+          {{/sortable-heading}}
+          {{#sortable-heading sortBy="activity" number=true action="changeSort" order=order ascending=ascending}}
+            {{i18n activity}}
+          {{/sortable-heading}}
+        </tr>
       </thead>
-
-      {{#if topicTrackingState.hasIncoming}}
-        <tbody>
-          <tr>
-            <td colspan="9">
-              <div class='alert alert-info clickable' {{action "showInserted"}}>
-                {{countI18n topic_count_ suffix=topicTrackingState.filter count=topicTrackingState.incomingCount}}
-                {{i18n click_to_show}}
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      {{/if}}
-
       <tbody>
         {{each topics itemController="topic-list-item" itemView="topic-list-item"}}
       </tbody>
-
     </table>
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs b/app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs
index 1d224b23f7..bc2e4d4cc0 100644
--- a/app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs
@@ -4,7 +4,7 @@
       {{top-period-chooser period=period}}
     </div>
   {{/if}}
-  {{#if showTable}}
+  {{#if hasTopics}}
     <table class='topic-list'>
       {{#if topicTrackingState.hasIncoming}}
         <tbody>
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 1cb8994f58..4fd2a54671 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -1,3 +1,9 @@
+.show-more {
+  position: absolute;
+  top: 5px;
+  width: 100%;
+}
+
 .list-controls {
   #navigation-bar {
     .has-icon span:before {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 72d5df007b..4d2e4137c8 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -2,6 +2,9 @@
   @extend .clearfix;
   margin-right: auto;
   margin-left: auto;
+  .contents {
+    position: relative;
+  }
 }
 
 .full-width {