[CSS] fixes for markdown header nav and logo layout
Also adds vendor prefixes for better support of flexbox.
Change-Id: Ib4b5bd393094e97a5cf118afce24b6f3566666b0
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
index 3d21c70..b8cba07 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/base.css
@@ -79,17 +79,28 @@
.Site {
background: #fff;
color: #000;
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
font: 14px/1.54 'Open Sans', sans-serif;
min-height: 100vh;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
flex-direction: column;
}
.Site-header,
.Site-footer {
background: #eee;
+ -webkit-flex: none;
+ -ms-flex: none;
flex: none;
}
+.Site-header--withNavbar {
+ background: #fff;
+}
.Site-content {
+ -webkit-flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
flex: 1 0 auto;
padding: 20px;
}
@@ -102,15 +113,51 @@
}
.Header,
.Footer {
+ -webkit-align-items: center;
+ -ms-flex-align: center;
align-items: center;
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
padding: 20px;
}
+.Site-header--withNavbar .Header {
+ max-width: 980px;
+ margin: 0 auto;
+ padding: 10px 0;
+}
+.Header-title,
+.Header-image {
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+.Header-anchor {
+ color: #666;
+ font-size: 32px;
+ font-weight: 300;
+ text-decoration: none;
+}
+.Header-anchorLogo {
+ display: inline-block;
+ margin-right: 10px;
+ vertical-align: middle;
+}
+.Header-nav {
+ background: #eee;
+ padding: 15px 0;
+}
.Header-title {
+ -webkit-flex: 1;
+ -ms-flex: 1;
flex: 1;
}
.Header-menu {
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
justify-content: flex-end;
}
.Header-menuItem {
@@ -136,11 +183,17 @@
color: #666;
}
.Footer-poweredBy {
+ -webkit-flex: 1;
+ -ms-flex: 1;
flex: 1;
}
.Footer-formats,
.Footer-links {
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
justify-content: flex-end;
}
.Footer-formatsItem {
@@ -155,6 +208,8 @@
margin-left: 10px;
}
.RepoList-item {
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
left: -10px;
padding: 5px 0 5px 10px;
@@ -220,9 +275,13 @@
width: 100%;
}
.RepoShortlog {
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
}
.RepoShortlog-refs {
+ -webkit-flex: none !important;
+ -ms-flex: none !important;
flex: none !important;
width: 20%;
}
@@ -230,6 +289,8 @@
margin: 0;
}
.RepoShortlog-log {
+ -webkit-flex: 1;
+ -ms-flex: 1;
flex: 1;
}
.RepoIndexDoc {
@@ -408,6 +469,8 @@
margin: 10px 0;
}
.Blame-region {
+ display: -webkit-flex;
+ display: -ms-flexbox;
display: flex;
}
.Blame-leftCol {
@@ -415,6 +478,8 @@
width: 375px;
}
.Blame-rightCol {
+ -webkit-flex: 1;
+ -ms-flex: 1;
flex: 1;
font-size: 8pt;
}
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css b/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
index 8d38cb3..983ea30 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/static/doc.css
@@ -19,6 +19,14 @@
.Site-Content--markdown {
padding-top: 0;
}
+.Header-nav ul {
+ max-width: 980px;
+ margin: 0 auto;
+}
+.Header-nav li {
+ display: inline-block;
+ margin-right: 15px;
+}
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
font-weight: normal;
margin: 1.236em 0 .618em;
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
index d4da587..b62e2ee 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/Doc.soy
@@ -41,20 +41,18 @@
<link rel="stylesheet" type="text/css" href="{gitiles.PRETTIFY_CSS_URL}" />
</head>
<body class="Site">
- <header class="Site-header">
+ <header class="Site-header {if $navbarHtml}Site-header--withNavbar{/if}">
<div class="Header">
<div class="Header-title">
- {if $homeUrl}<a href="{$homeUrl}">{/if}
- {if $logoUrl}<img src="{$logoUrl}" alt="project logo" />{/if}
- {if $siteTitle}{$siteTitle}{/if}
+ {if $homeUrl}<a class="Header-anchor" href="{$homeUrl}">{/if}
+ {if $logoUrl}<img class="Header-anchorLogo" src="{$logoUrl}" alt="project logo" />{/if}
+ {if $siteTitle}<span class="Header-anchorTitle">{$siteTitle}</span>{/if}
{if $homeUrl}</a>{/if}
</div>
</div>
{if $navbarHtml}
- <div class="nav" role="navigation">
- <div class="nav-aux">
- {$navbarHtml}
- </div>
+ <nav class="Header-nav" role="navigation">
+ {$navbarHtml}
</div>
{/if}
</header>
