From 474c36955ec4c8b9ffc1ea8f5a8748095c3b7789 Mon Sep 17 00:00:00 2001
From: Max Goodman <max@reddit.com>
Date: Fri, 3 Feb 2012 10:29:32 -0800
Subject: [PATCH] Restructure sr bar clipping to avoid Android browser auto
 scaling.

The default Android browser of various flavors automatically scales the
page beyond the defined viewport width because of our abnormally wide
top bar. I juggled some of the CSS to be able to absolutely position the
bar within the page, which seems to avoid triggering this auto scaling
behavior.

The my subreddits dropdown needed some restyling to avoid clipping the
dropdown, when shown.
---
 r2/r2/lib/pages/pages.py             |  6 +++---
 r2/r2/public/static/css/reddit.css   | 30 +++++++++++++++++++++++-----
 r2/r2/templates/subreddittopbar.html | 24 ++++++++++++++--------
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/r2/r2/lib/pages/pages.py b/r2/r2/lib/pages/pages.py
index a43e8b212..6830e5da0 100644
--- a/r2/r2/lib/pages/pages.py
+++ b/r2/r2/lib/pages/pages.py
@@ -1325,6 +1325,9 @@ class SubredditTopBar(CachedTemplate):
                                   if sr.name not in g.automatic_reddits ]
         return self._pop_reddits
 
+    @property
+    def show_my_reddits_dropdown(self):
+        return len(self.my_reddits) > g.sr_dropdown_threshold
 
     def my_reddits_dropdown(self):
         drop_down_buttons = []
@@ -1381,9 +1384,6 @@ class SubredditTopBar(CachedTemplate):
         if not c.user_is_loggedin:
             menus.append(self.popular_reddits())
         else:
-            if len(self.my_reddits) > g.sr_dropdown_threshold:
-                menus = [self.my_reddits_dropdown()] + menus
-
             menus.append(self.subscribed_reddits())
             sep = '<span class="separator">&nbsp;&ndash;&nbsp;</span>'
             menus.append(RawString(sep))
diff --git a/r2/r2/public/static/css/reddit.css b/r2/r2/public/static/css/reddit.css
index 48ae94271..c98c4e240 100644
--- a/r2/r2/public/static/css/reddit.css
+++ b/r2/r2/public/static/css/reddit.css
@@ -2948,19 +2948,39 @@ ul#image-preview-list .description pre {
 }
 
 #sr-header-area {
-    padding: 3px 0px 3px 5px;
     background-color: #f0f0f0;
     white-space: nowrap;
-    overflow: hidden;
     text-transform: uppercase;
     border-bottom: 1px solid gray;
     font-size: 90%;
+    height: 18px;
+    line-height: 18px;
  }
 
+#sr-header-area .width-clip {
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
 #sr-header-area .selected a {
     color: orangered;
 }
 
+#sr-header-area .sr-list {
+    overflow: hidden;
+}
+
+#sr-header-area .dropdown.srdrop {
+    float: left;
+    padding-left: 5px;
+}
+
+#sr-header-area .drop-choices.srdrop {
+    margin-top: 0;
+    margin-left: 5px;
+}
+
 .dropdown.srdrop .selected {
     background: transparent none no-repeat scroll center right;
     background-image: url(../droparrowgray.gif); 
@@ -2995,8 +3015,8 @@ ul#image-preview-list .description pre {
     color: black;
     background-color: #f0f0f0;
     position: absolute;
-    right: 0px;
-    top: 3px;
+    right: 0;
+    top: 0;
     padding: 0 5px 0 15px;
     font-weight: bold;
     margin: 0;
@@ -5060,4 +5080,4 @@ tr.gold-accent + tr > td {
 }
 .modactions.marknsfw {
     background-image: url(../modactions_marknsfw.png); /* SPRITE */
-}
\ No newline at end of file
+}
diff --git a/r2/r2/templates/subreddittopbar.html b/r2/r2/templates/subreddittopbar.html
index a9b8e7fde..5d8460216 100644
--- a/r2/r2/templates/subreddittopbar.html
+++ b/r2/r2/templates/subreddittopbar.html
@@ -23,14 +23,22 @@
 <%namespace file="utils.html" import="plain_link"/>
 
 <div id="sr-header-area">
-  %for m in thing.sr_bar():
-     ${m.render()}
-  %endfor
+  <div class="width-clip">
+    %if thing.show_my_reddits_dropdown:
+      ${thing.my_reddits_dropdown().render()}
+    %endif
 
-  <%
-     editmore = 'edit' if c.user_is_loggedin else 'more'
-   %>
+    <div class="sr-list">
+      %for m in thing.sr_bar():
+        ${m.render()}
+      %endfor
 
-  ${plain_link(unsafe(_(editmore) + " &raquo;"),
-               "/reddits/", id="sr-more-link")}
+      <%
+        editmore = 'edit' if c.user_is_loggedin else 'more'
+      %>
+    </div>
+
+    ${plain_link(unsafe(_(editmore) + " &raquo;"),
+                 "/reddits/", id="sr-more-link")}
+  </div>
 </div>