Adapt CSS for small screens
This CL improves the way gitiles looks in small screens such as
smartphones.
It does so by:
- Adding the viewport meta tag to all pages so they aren't shown zoomed
out in small screens.
- In RepositoryIndex.soy, moving the left sidebar to the top and
compacting it when viewed from a small screen.
- Adjusting some paddings in the header (and nav too in the case of
Docs.soy) so the pages look nice in small screens.
Bug: issue 235
Change-Id: Iab322803df5f2374219f04f9e1211ea0768e959e
diff --git a/resources/com/google/gitiles/static/base.css b/resources/com/google/gitiles/static/base.css
index a1d5a36..f4ef52a 100644
--- a/resources/com/google/gitiles/static/base.css
+++ b/resources/com/google/gitiles/static/base.css
@@ -116,9 +116,9 @@
padding: 20px;
}
.Site-header--withNavbar .Header {
- max-width: 980px;
+ max-width: 1020px;
margin: 0 auto;
- padding: 10px 0;
+ padding: 10px 20px;
}
.Header-title,
.Header-image {
@@ -286,6 +286,24 @@
font-size: 14px;
font-style: italic;
}
+@media (max-width: 550px) {
+ .RepoShortlog {
+ flex-direction: column;
+ -ms-flex-direction: column;
+ }
+ .RepoShortlog-refs {
+ width: auto;
+ border-bottom: 1px solid #ddd;
+ margin-bottom: 20px;
+ padding-bottom: 20px;
+ }
+ .RepoShortlog-refs > .RefList:last-child {
+ margin-bottom: 0;
+ }
+ .RepoShortlog-log {
+ width: auto;
+ }
+}
/* RefList.soy */
@@ -302,6 +320,12 @@
.RefList-item {
padding: 2px 0;
}
+@media (max-width: 550px) {
+ .RefList--responsive .RefList-item {
+ display: inline-block;
+ margin-right: 6px;
+ }
+}
/* LogDetail.soy */
diff --git a/resources/com/google/gitiles/static/doc.css b/resources/com/google/gitiles/static/doc.css
index a531087..8a92fce 100644
--- a/resources/com/google/gitiles/static/doc.css
+++ b/resources/com/google/gitiles/static/doc.css
@@ -20,8 +20,9 @@
padding-top: 0;
}
.Header-nav ul {
- max-width: 980px;
+ max-width: 1020px;
margin: 0 auto;
+ padding: 0 20px;
}
.Header-nav li {
display: inline-block;
diff --git a/resources/com/google/gitiles/templates/Common.soy b/resources/com/google/gitiles/templates/Common.soy
index 3a33299..86116cb 100644
--- a/resources/com/google/gitiles/templates/Common.soy
+++ b/resources/com/google/gitiles/templates/Common.soy
@@ -32,6 +32,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{$title}
{if $repositoryName}
diff --git a/resources/com/google/gitiles/templates/Doc.soy b/resources/com/google/gitiles/templates/Doc.soy
index c541033..570ef8f 100644
--- a/resources/com/google/gitiles/templates/Doc.soy
+++ b/resources/com/google/gitiles/templates/Doc.soy
@@ -51,6 +51,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{if $siteTitle}{$siteTitle} -{sp}{/if}
{$pageTitle}
diff --git a/resources/com/google/gitiles/templates/RefList.soy b/resources/com/google/gitiles/templates/RefList.soy
index 112573b..47b7fdb 100644
--- a/resources/com/google/gitiles/templates/RefList.soy
+++ b/resources/com/google/gitiles/templates/RefList.soy
@@ -60,7 +60,8 @@
{template refList}
{@param type: ?} /** name of this type of refs, e.g. "Branches" */
{@param refs: ?} /** list of branch objects with url, name, and optional isHead keys. */
- <div class="RefList">
+ {@param variant:= 'column'} /** style variant ("column" or "responsive"). **/
+ <div class="RefList RefList--{$variant}">
<h3 class="RefList-title">{$type}</h3>
<ul class="RefList-items">
{for $ref in $refs}
diff --git a/resources/com/google/gitiles/templates/RepositoryIndex.soy b/resources/com/google/gitiles/templates/RepositoryIndex.soy
index ca83cab..64ccfbd 100644
--- a/resources/com/google/gitiles/templates/RepositoryIndex.soy
+++ b/resources/com/google/gitiles/templates/RepositoryIndex.soy
@@ -111,6 +111,7 @@
{call refList.refList}
{param type: 'Branches' /}
{param refs: $branches /}
+ {param variant: 'responsive' /}
{/call}
{if $moreBranchesUrl}
<a href="{$moreBranchesUrl}">{msg desc="link to view more branches"}More...{/msg}</a>
@@ -128,6 +129,7 @@
{call refList.refList}
{param type: 'Tags' /}
{param refs: $tags /}
+ {param variant: 'responsive' /}
{/call}
{if $moreTagsUrl}
<a href="{$moreTagsUrl}">{msg desc="link to view more tags"}More...{/msg}</a>
