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>