From 90dc3e877b3248d2a84d1f24c48d23bb66e9cd5c Mon Sep 17 00:00:00 2001
From: Max Goodman <max@reddit.com>
Date: Fri, 8 Mar 2013 04:07:45 -0800
Subject: [PATCH] Make space for admin bar by adding body top margin.

This may hopefully help interactions between absolutely positioned
subreddit elements and the admin bar.
---
 r2/r2/public/static/js/adminbar.js |  5 ++-
 r2/r2/templates/adminbar.html      | 56 ++++++++++++++----------------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/r2/r2/public/static/js/adminbar.js b/r2/r2/public/static/js/adminbar.js
index a8c7066d1..2f63b85b5 100644
--- a/r2/r2/public/static/js/adminbar.js
+++ b/r2/r2/public/static/js/adminbar.js
@@ -51,7 +51,10 @@ r.adminbar.AdminBar = Backbone.View.extend({
 
         this.$('.timelines').toggleClass('zoomed', this.zoomTimings)
 
-        this.$el.parent().css('height', this.$el.outerHeight())
+        $('body').css({
+            'margin-top': this.$el.outerHeight(),
+            'position': 'relative'
+        })
 
         if (r.adminbar.timings.isEmpty()) {
             return
diff --git a/r2/r2/templates/adminbar.html b/r2/r2/templates/adminbar.html
index 1bc31582e..b9683a110 100644
--- a/r2/r2/templates/adminbar.html
+++ b/r2/r2/templates/adminbar.html
@@ -39,38 +39,36 @@
 </%def>
 
 %if c.show_admin_bar:
-  <div class="top-bar-container">
-    <div id="admin-bar" ${classes('admin' if c.user_is_admin else None, 'debug' if g.debug else None)}>
-      <div class="status-bar">
-        <span class="caption">${_('status')}</span>
-        ${indicator('admin', _('admin mode enabled'), c.user_is_admin)}
+  <div id="admin-bar" ${classes('admin' if c.user_is_admin else None, 'debug' if g.debug else None)}>
+    <div class="status-bar">
+      <span class="caption">${_('status')}</span>
+      ${indicator('admin', _('admin mode enabled'), c.user_is_admin)}
+      %if c.user_is_admin:
+        <span class="admin-off">${_('admin off')}</span>
+      %endif
+      ${indicator('debug', _('debug mode'), g.debug)}
+      ${indicator('secure', _('secure'), c.secure)}
+      ${indicator('dev-statics', _('development statics'), g.uncompressedJS)}
+      ${indicator('prod-statics', _('production statics'), g.debug and not g.uncompressedJS)}
+      ${indicator('disabled', _('ads disabled'), g.disable_ads)}
+      ${indicator('disabled', _('captcha disabled'), g.disable_captcha)}
+      ${indicator('disabled', _('ratelimit disabled'), g.disable_ratelimit)}
+      <span class="controls">
         %if c.user_is_admin:
-          <span class="admin-off">${_('admin off')}</span>
+          ${admin_menu(selected=None)}
         %endif
-        ${indicator('debug', _('debug mode'), g.debug)}
-        ${indicator('secure', _('secure'), c.secure)}
-        ${indicator('dev-statics', _('development statics'), g.uncompressedJS)}
-        ${indicator('prod-statics', _('production statics'), g.debug and not g.uncompressedJS)}
-        ${indicator('disabled', _('ads disabled'), g.disable_ads)}
-        ${indicator('disabled', _('captcha disabled'), g.disable_captcha)}
-        ${indicator('disabled', _('ratelimit disabled'), g.disable_ratelimit)}
-        <span class="controls">
-          %if c.user_is_admin:
-            ${admin_menu(selected=None)}
-          %endif
-          <span class="timings-button"><span class="state">-</span>${_('timings')}</span>
-          <span class="hide-button">${_('hide')}</span>
-        </span>
-      </div>
-      <div class="timings-bar">
-        <div class="expand-button">+</div>
-        <div class="timelines">
-          <div class="timeline timeline-browser"></div>
-          <div class="timeline timeline-server"></div>
-        </div>
-      </div>
-      <div class="show-button"></div>
+        <span class="timings-button"><span class="state">-</span>${_('timings')}</span>
+        <span class="hide-button">${_('hide')}</span>
+      </span>
     </div>
+    <div class="timings-bar">
+      <div class="expand-button">+</div>
+      <div class="timelines">
+        <div class="timeline timeline-browser"></div>
+        <div class="timeline timeline-server"></div>
+      </div>
+    </div>
+    <div class="show-button"></div>
   </div>
   <% from r2.lib import js %>
   ${unsafe(js.use('admin'))}