docs: add Report an Issue button

docs/site/components/docs/docs.html

@@ -1,11 +1,20 @@
 <script id="docs-header.html" type="text/ng-template">
  <header header title="Node.js">
- <div class="versions" ng-show="showReference">
- <span class="v-current">{{version}} <i ng-if="isLatestVersion">(Latest version)</i></span>
- <a href="#/docs/history" class="v-btn">
- <img src="site/img/icon-arrow-bullet.svg" />
- See version History
- </a>
+ <div class="row row--right">
+ <div class="col margin-vertical">
+ <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues/new"
+ class="v-btn">
+ <img src="site/img/icon-link-github.svg" />
+ Report an Issue
+ </a>
+ </div>
+ <div class="col margin-vertical">
+ <a href="#/docs/history" ng-show="showReference"
+ class="v-btn">
+ <img src="site/img/icon-arrow-bullet.svg" />
+ Version History (<i>{{version}}</i>)
+ </a>
+ </div>
  </div>
  </header>
 </script>

docs/site/components/docs/docs.js

@@ -329,7 +329,6 @@ angular
  $scope.module = $routeParams.module;
  $scope.methods = methods;
  $scope.version = $routeParams.version;
- $scope.isLatestVersion = $scope.version == versions[0];
  $scope.versions = versions;
  $scope.links = links;
  })

docs/site/components/faq/faq.html

@@ -1,16 +1,19 @@
 <script id="faq-header.html" type="text/ng-template">
- <header header title="Frequently Asked Questions">
- <div class="versions header--gh-edit-btn">
- <a href="https://github.com/GoogleCloudPlatform/gcloud-node/edit/master/docs/faq.md" class="v-btn">
- <img src="site/img/icon-link-github.svg" />
- Edit on GitHub
- </a>
+ <header header title="FAQ">
+ <div class="row row--right">
+ <div class="col margin-vertical">
+ <a href="https://github.com/GoogleCloudPlatform/gcloud-node/edit/master/docs/faq.md"
+ class="v-btn">
+ <img src="site/img/icon-link-github.svg" />
+ Edit on GitHub
+ </a>
+ </div>
  </div>
  </header>
 </script>
 
 <div subpage
  header-templateUrl="faq-header.html"
- title="Frequently Asked Questions">
+ title="FAQ">
  <btf-markdown ng-include="'faq.md'"></btf-markdown>
 </div>

docs/site/components/header/header.html

@@ -1,4 +1,10 @@
 <header class="docs-header">
- <h1 class="page-title">{{title}}</h1>
- <div ng-transclude></div>
+ <div class="row">
+ <div class="col-60 margin-vertical">
+ <h1 class="page-title">{{title}}</h1>
+ </div>
+ <div class="col-40">
+ <div ng-transclude></div>
+ </div>
+ </div>
 </header>

docs/site/components/troubleshooting/troubleshooting.html

@@ -1,10 +1,13 @@
 <script id="troubleshooting-header.html" type="text/ng-template">
  <header header title="Troubleshooting">
- <div class="versions header--gh-edit-btn">
- <a href="https://github.com/GoogleCloudPlatform/gcloud-node/edit/master/docs/troubleshooting.md" class="v-btn">
- <img src="site/img/icon-link-github.svg" />
- Edit on GitHub
- </a>
+ <div class="row row--right">
+ <div class="col margin-vertical">
+ <a href="https://github.com/GoogleCloudPlatform/gcloud-node/edit/master/docs/troubleshooting.md"
+ class="v-btn">
+ <img src="site/img/icon-link-github.svg" />
+ Edit on GitHub
+ </a>
+ </div>
  </div>
  </header>
 </script>

docs/site/css/main.css

@@ -149,6 +149,63 @@ a {
  cursor: pointer;
 }
 
+
+/* Grid
+ ========================================================================== */
+
+.row:after {
+ content: '';
+ display: table;
+ clear: both;
+}
+
+.row--right,
+[class*='col'] {
+ float: none;
+}
+
+@media only screen and (min-width: 45em) {
+ .row--right {
+ float: right;
+ }
+
+ [class*='col'] {
+ float: left;
+ }
+
+ .col-10 { width: 10%; }
+ .col-20 { width: 20%; }
+ .col-25 { width: 25%; }
+ .col-30 { width: 30%; }
+ .col-33 { width: 33%; }
+ .col-40 { width: 40%; }
+ .col-50 { width: 50%; }
+ .col-60 { width: 60%; }
+ .col-66 { width: 66%; }
+ .col-70 { width: 70%; }
+ .col-75 { width: 75%; }
+ .col-80 { width: 80%; }
+ .col-90 { width: 90%; }
+}
+
+
+/* Utilities
+ ========================================================================== */
+
+.padding {
+ padding: 10px;
+}
+
+.margin {
+ margin: 10px;
+}
+
+.margin-vertical {
+ margin: 10px 0;
+}
+
+
+
 /* Header
  ========================================================================== */
 
@@ -681,8 +738,6 @@ a {
 */
 
 .versions {
- display: inline-block;
- margin-top: 2em;
 }
 
 .versions span,
@@ -700,6 +755,7 @@ a {
 }
 
 .v-btn {
+ margin: 0.5em 0;
  padding: 0.5em;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.07);
@@ -1002,27 +1058,14 @@ a {
 }
 
 @media only screen and (min-width: 45em) {
-
- /*
- Docs Header
- */
-
- .versions {
- position: absolute;
- top: 6em;
- right: 2em;
- margin: 0;
- }
-
  .v-btn {
  font-size: 0.7em;
  line-height: normal;
+ margin-left: .5em;
  }
-
 }
 
 @media only screen and (min-width: 50em) {
-
  /*
  Header
  */
@@ -1115,13 +1158,6 @@ a {
  top: 7em;
  }
 
- /*
- GitHub Edit Heade Button
- */
- .header--gh-edit-btn {
- top: 8em;
- }
-
  /*
  Content
  */
@@ -1173,15 +1209,12 @@ a {
  font-size: 0.9em;
  }
 
- .col {
+ .quote-box {
  width: 46%;
- }
-
- .col-left {
  float: left;
  }
 
- .col-right {
+ .quote-box--supplementary {
  float: right;
  }
 

docs/site/home.html

@@ -5,18 +5,18 @@ <h1 class="logo"><img src="site/img/logo-full.svg" alt="Google Cloud Platform" /
 <article class="main" role="main">
  <section class="hero-banner">
  <div class="container clearfix">
- <div class="col col-left">
+ <div class="quote-box">
  <h1>gcloud</h1>
  <p>Google Cloud Client Library for Node.js
  - an idiomatic, intuitive, and natural way for Node.js developers to
  integrate with Google Cloud Platform services, like Cloud Datastore
  and Cloud Storage.</p>
- </div><!-- end of .col.col-left -->
+ </div>
 
- <div class="col col-right">
+ <div class="quote-box--supplementary">
  <h2>One-line npm install</h2>
  <pre>$ npm install --save gcloud</pre>
- </div><!-- end of .col.col-right -->
+ </div>
  </div><!-- end of .container -->
  </section><!-- end of .hero-banner -->
 
@@ -59,7 +59,7 @@ <h2>One-line npm install</h2>
 
  <section class="block about">
  <div class="container clearfix">
- <div class="col col-left">
+ <div class="quote-box">
  <h3 class="block-title">What is it?</h3>
 
  <p><code>gcloud</code> is a client library for accessing Google
@@ -77,9 +77,9 @@ <h3 class="block-title">What is it?</h3>
  to go. Better yet, if you are running on a Google Compute Engine
  instance, the one-line install is enough!</p>
 
- </div><!-- end of .col.col-left -->
+ </div>
 
- <div class="col col-right">
+ <div class="quote-box--supplementary">
  <h4>Retrieve Datastore Entities</h4>
 
  <div hljs language="js">
@@ -95,7 +95,7 @@ <h4>Retrieve Datastore Entities</h4>
  console.log(err, entity);
 });</div>
 
- </div><!-- end of .col.col-right -->
+ </div>
  </div><!-- end of .container -->
  </section><!-- end of .featuring -->