github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-01-24 22:38:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Replaced old float-based header with new, flexbox based header

Browse Source
This commit is contained in:
Paradox
2011-07-19 17:10:31 -07:00
committed by Max Goodman
parent 3cd2905ff0
commit 88e5ad2763
3 changed files with 41 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
r2/r2/public/static/css/compact.css
View File

@@ -89,20 +89,14 @@ button.button { padding: 0 5px; }
.unhide-icon { background-image: url("/static/compact/unhide.png"); /*SPRITE*/ }
/*Toolbar*/
#topbar { height: 45px; position: absolute; top: 0; left: 0; right: 0; background-color: #A8C4E0; background-color: #7f7f7f; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px 10px 0px; }
#header-img { width: 90px; }
#topbar > h1 { color: #444; font-size: 16px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100px; margin-left: auto; margin-right: auto; margin-top: 26px; padding: 0; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; }
#topbar { height: 45px; position: absolute; top: 0; left: 0; right: 0; background-color: #A8C4E0; background-color: #7f7f7f; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cee3f8), color-stop(100%, #a8c4e0)); background: -webkit-linear-gradient(top, #cee3f8, #a8c4e0); background: -moz-linear-gradient(top, #cee3f8, #a8c4e0); background: -o-linear-gradient(top, #cee3f8, #a8c4e0); background: linear-gradient(top, #cee3f8, #a8c4e0); border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px; display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: justify; -webkit-box-pack: justify; box-pack: justify; -moz-box-align: center; -webkit-box-align: center; box-align: center; }
#topbar #header-img { width: 90px; }
#topbar > h1 { color: #444; font-size: 18px; font-weight: bold; text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 10px; padding: 0; padding-top: 16px; text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px -1px 0px; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; }
#topbar > h1 a { color: inherit; text-decoration: inherit; }
body[orient="landscape"] > #topbar > h1 { margin-left: -125px; width: 250px; }
#topbar > .right { position: absolute; right: 6px; bottom: 0px; padding: 0 5px; }
#topbar > .left { position: absolute; bottom: 2px; padding: 0 5px; padding-left: 0px; margin-left: 5px; }
#topbar > .right > .button { padding-top: 8px; padding-bottom: 3px; }
#topbar > .right > .button:first-child { margin-right: 5px; }

67
r2/r2/public/static/css/compact.scss
View File

@@ -318,29 +318,42 @@ 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 0px;
}
#header-img {
width: 90px;
padding: 0px 10px; //Left and right padding
@include display-box();
@include box-orient(horizontal); //Horizontal spread
@include box-pack(justify); //Divide the space up as best we can
@include box-align(center); //Put everything in the middle of the box
}
#topbar > h1 {
color: #444;
font-size: 16px;
font-weight: bold;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100px;
margin: {
left: auto;
right: auto;
top: 26px;
#header-img {
width: 90px;
}
.left {
}
& > h1 {
color: #444;
font-size: 18px;
font-weight: bold;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 10px;
padding: 0;
padding-top: 16px;
text-shadow: hsla(0, 100%, 100%, 0.5) 0px 1px 0px, hsla(0, 0%, 0%, 0.1) 0px -1px 0px;
@include box-flex(1); //This box will flex to fill avalible space
}
.right {
}
padding: 0;
text-shadow: hsla(0, 100%, 100%, 0.5) 0px 1px 0px, hsla(0, 0%, 0%, 0.1) 0px -1px 0px;
}
#topbar > h1 a {
color: inherit;
text-decoration: inherit;
@@ -349,19 +362,7 @@ body[orient="landscape"] > #topbar > h1 {
margin-left: -125px;
width: 250px;
}
#topbar > .right {
position: absolute;
right: 6px;
bottom: 0px;
padding: 0 5px;
}
#topbar > .left {
position: absolute;
bottom: 2px;
padding: 0 5px;
padding-left: 0px;
margin-left: 5px;
}
#topbar > .right > .button {
padding-top: 8px; padding-bottom: 3px;
}

8
r2/r2/templates/redditheader.compact
View File

@@ -38,7 +38,7 @@
<div class="commentcount"><div class="comments"></div><div class="comments preloaded"></div></div>
</div>
<div id="topbar">
<span class="left">
<div class="left">
<%
header_title = c.site.header_title
if c.site.header and c.allow_styles:
@@ -49,9 +49,9 @@
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>
</div>
<h1>${nav}</h1>
<span class="right">
<div class="right">
%if c.user_is_loggedin:
<%
if c.have_messages:
@@ -74,7 +74,7 @@
%endif
%endif
<a class="topbar-options" href="#" id="topmenu_toggle"></a>
</span>
</div>
<div id="top_menu">
%if c.user_is_loggedin:
<div class="menuitem">