Merge pull request #616 from stephenplusplus/spp--docs-move-report-button

docs: add report-issue button to header

Author: ryanseys

docs/site/components/docs/docs.html

@@ -1,15 +1,5 @@
 <script id="docs-header.html" type="text/ng-template">
-  <header header title="{{pageTitle}}">
-    <div class="row row--right">
-      <div class="col margin-vertical">
-        <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues/new"
-          class="v-btn skip-external-link">
-          <img src="site/img/icon-link-github.svg" />
-          Report an Issue
-        </a>
-      </div>
-    </div>
-  </header>
+  <header header title="{{pageTitle}}" />
 </script>
 
 <div subpage

docs/site/components/subpage/subpage.html

@@ -6,7 +6,16 @@ <h1 class="logo">
         <span class="gcloud">gcloud</span>
       </a>
     </h1>
+
     <div language-switcher></div>
+
+    <div class="header--right">
+      <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues/new"
+        class="v-btn skip-external-link">
+        <img src="site/img/icon-link-github.svg" />
+        Report an Issue
+      </a>
+    </div>
   </header>
 
   <header ng-if="headerTemplateUrl" ng-include="headerTemplateUrl"></header>

docs/site/css/main.css

@@ -293,6 +293,32 @@ ul {
     padding: 0;
 }
 
+.header--right {
+    display: none;
+    position: absolute;
+}
+
+.page-header.fixed .v-btn {
+    background-color: #fff;
+    color: #444;
+    border-radius: 8px;
+    border: 0;
+    border-right: 2px solid #A0C2F4;
+    border-bottom: 2px solid #A0C2F4;
+    padding: 11px 10px;
+    font-size: .8em;
+    transition: border-color 1s, border-width .1s;
+}
+
+.page-header.fixed .v-btn:hover {
+    opacity: 1;
+    border-color: #aaa;
+}
+
+.page-header.fixed .v-btn:active {
+    border-width: 1px;
+}
+
 /*
  Logo
 */
@@ -1130,6 +1156,14 @@ ul {
    Modify as content requires.
    ========================================================================== */
 
+@media only screen and (min-width: 19em) {
+    .header--right {
+        display: block;
+        right: 54px;
+        top: 10px;
+    }
+}
+
 @media only screen and (min-width: 37em) {
 
     /*
@@ -1175,7 +1209,6 @@ ul {
         width: 0.6em;
         height: 0.6em;
     }
-
 }
 
 @media only screen and (min-width: 45em) {
@@ -1205,6 +1238,11 @@ ul {
         line-height: 70px;
     }
 
+    .header--right {
+        top: 20px;
+        right: 20px;
+    }
+
     /*
      Logo
     */