New design for header/top of page toolbar. Updated icons, added mod-mail, and got reddit/subreddit logos working

r2/r2/public/static/css/compact.scss

@@ -260,18 +260,26 @@ button.button {
     @include vertical_gradient(#CEE3F8, #A8C4E0);
     border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7;
     @include box-sizing(border-box);
-    padding: 0px 10px 10px;
+    padding: 0px 10px 10px 0px;
+}
+#header-img {
+    width: 90px;
+    
 }
 #topbar > h1 {
     color: #444;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: bold;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    width: 230px; 
-    margin: 10px auto 0 auto;
+    width: 100px;
+    margin: {
+        left: auto;
+        right: auto;
+        top: 26px;
+    }
     padding: 0;
     text-shadow: hsla(0, 100%, 100%, 0.5) 0px 1px 0px, hsla(0, 0%, 0%, 0.1) 0px -1px 0px;
 }
@@ -286,14 +294,14 @@ body[orient="landscape"] > #topbar > h1 {
 #topbar > .right  {
     position: absolute;
     right: 6px;
-    top: 5px;
+    bottom: 0px;
     padding: 0 5px;
 }
 #topbar > .left {
     position: absolute;
-    left: 6px;
-    top: 5px;
+    bottom: 2px;
     padding: 0 5px;
+    padding-left: 0px;
 }
 #topbar > .right > .button {
     padding-top: 8px; padding-bottom: 3px;

r2/r2/templates/redditheader.compact

@@ -20,14 +20,16 @@
 ## CondeNet, Inc. All Rights Reserved.
 ################################################################################
 <%!
-   from r2.lib.template_helpers import static
+   from r2.lib.template_helpers import static, s3_https_if_secure
+   from r2.models.subreddit import DefaultSR
+   
  %>
 <%namespace file="utils.html" import="plain_link, text_with_js, img_link, separator, logout"/>
 
 <%
     from r2.lib.menus import PageNameNav
     toolbars = thing.toolbars
-    nav = "reddit mobile"
+    nav = "mobile"
     if toolbars and isinstance(toolbars[0], PageNameNav):
         nav = toolbars[0]
         toolbars = toolbars[1:]
@@ -35,23 +37,39 @@
 
 <div id="topbar">
   <span class="left">
-   ${plain_link("Home", "/", _sr_path=False, _class ='button')}
+   <%
+        header_title = c.site.header_title
+        if c.site.header and c.allow_styles:
+            header_img = c.site.header
+        else:
+            d = DefaultSR()
+            header_img = d.header
+            header_title = d.header_title
+    %>
+    ${img_link(c.site.name, s3_https_if_secure(header_img), '/', _id = "header-img-a", img_id = 'header-img', title = header_title)}
   </span>
   <h1>${nav}</h1>
   <span class="right">
     %if c.user_is_loggedin:
       <%
-         mail_img ="mail"
          if c.have_messages:
-           mail_img += ".png"
            mail_img_class = 'havemail'
+           mail_path = '/message/unread/'
          else:
-           mail_img += "gray.png"
            mail_img_class = 'nohavemail'
-         mail_img = static(mail_img)
-       %>
-      ${img_link(_("messages"), mail_img, path="/message/inbox/",
-                 _id = "mail", _class="button " + mail_img_class)}
+           mail_path = '/message/inbox/'
+      %>
+      ${plain_link('', mail_path, _sr_path=False, _class=mail_img_class, _id='mail')}
+      %if c.show_mod_mail:
+        <%
+            mail_path = '/message/moderator/'
+            if c.have_mod_messages:
+                mail_img_class = 'havemail'
+            else:
+                mail_img_class = 'nohavemail'
+        %>
+        ${plain_link('', mail_path, _sr_path=False, _class=mail_img_class, _id='modmail')}
+      %endif
     %endif
     <a class="topbar-options" href="#" id="topmenu_toggle"></a>
   </span>