Merge pull request #356 from stephenplusplus/spp--docs-report-issue-button

docs: add Report an Issue button

Author: ryanseys

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 -->