From 0d0d9adb800d2ede618431f4eec4367de4479679 Mon Sep 17 00:00:00 2001
From: Jacob Chapel <jchapel@walmartlabs.com>
Date: Thu, 11 Sep 2014 01:21:19 -0700
Subject: [PATCH] FIX: Make extra info header properly responseive

The current solution assumed the width of the logo which caused
the user info and icons bar to shift down when the title is shown.

This fixes that by making the extra info wrapper responsive
and use up the full width, not needing manual breakpoints.
---
 .../discourse/templates/header.js.handlebars  | 59 ++++++++++---------
 .../stylesheets/desktop/topic-post.scss       | 15 +----
 2 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/header.js.handlebars b/app/assets/javascripts/discourse/templates/header.js.handlebars
index 71e4ad35791..a38ced890f4 100644
--- a/app/assets/javascripts/discourse/templates/header.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/header.js.handlebars
@@ -3,35 +3,6 @@
 
     {{home-logo minimized=showExtraInfo}}
 
-    {{#if showExtraInfo}}
-      <div class="extra-info-wrapper">
-        <div class="extra-info">
-          {{#if showStarButton}}
-            <a {{bind-attr class=":star topic.starred:starred"}} {{action toggleStar}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
-          {{/if}}
-          <h1>
-            {{#if showPrivateMessageGlyph}}
-              <span class="private-message-glyph">{{fa-icon envelope}}</span>
-            {{/if}}
-            {{#if topic.category.parentCategory}}
-              {{bound-category-link topic.category.parentCategory}}
-            {{/if}}
-            {{bound-category-link topic.category}}
-            {{#if topic.details.loaded}}
-              {{topic-status topic=topic}}
-              <a class='topic-link' href='{{unbound topic.url}}' {{action jumpToTopPost}}>{{{topic.fancy_title}}}</a>
-            {{else}}
-              {{#if topic.errorLoading}}
-                {{topic.errorTitle}}
-              {{else}}
-                {{i18n topic.loading}}
-              {{/if}}
-            {{/if}}
-          </h1>
-        </div>
-      </div>
-    {{/if}}
-
     <div class='panel clearfix'>
       {{#unless currentUser}}
         {{#if showSignUpButton}}
@@ -120,6 +91,36 @@
       {{render "userDropdown"}}
 
     </div>
+
+    {{#if showExtraInfo}}
+      <div class="extra-info-wrapper">
+        <div class="extra-info">
+          {{#if showStarButton}}
+            <a {{bind-attr class=":star topic.starred:starred"}} {{action toggleStar}} href='#' {{bind-attr title="topic.starTooltip"}}></a>
+          {{/if}}
+          <h1>
+            {{#if showPrivateMessageGlyph}}
+              <span class="private-message-glyph">{{fa-icon envelope}}</span>
+            {{/if}}
+            {{#if topic.category.parentCategory}}
+              {{bound-category-link topic.category.parentCategory}}
+            {{/if}}
+            {{bound-category-link topic.category}}
+            {{#if topic.details.loaded}}
+              {{topic-status topic=topic}}
+              <a class='topic-link' href='{{unbound topic.url}}' {{action jumpToTopPost}}>{{{topic.fancy_title}}}</a>
+            {{else}}
+              {{#if topic.errorLoading}}
+                {{topic.errorTitle}}
+              {{else}}
+                {{i18n topic.loading}}
+              {{/if}}
+            {{/if}}
+          </h1>
+        </div>
+      </div>
+    {{/if}}
+
   </div>
 </div>
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 6ed2b056ac2..87563cbc1ee 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -522,20 +522,7 @@ iframe {
 }
 
 .extra-info-wrapper {
-  float: left;
-  width: 78%;
-
-  @media all and (max-width : 1080px) {
-    width: 75%;
-    }
-
-  @media all and (max-width : 870px) {
-    width: 70%;
-    }
-
-  @media all and (max-width : 725px) {
-    width: 61%;
-    }
+  overflow: hidden;
 
   .topic-statuses {
     i  { color: $header_primary; }