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

@@ -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))

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 */
-}
+}

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>