docs: show version switcher at tob in mobile

Author: stephenplusplus

docs/site/components/subpage/subpage-directive.js

@@ -22,7 +22,7 @@ angular
         if ($scope.versionSelected === 'master') {
           $http.get('https://api.github.com/repos/GoogleCloudPlatform/gcloud-node/commits?sha=gh-pages&per_page=1')
             .then(function(resp) {
-              $scope.lastBuiltDate = moment(resp.data[0].commit.committer.date).format('MMMM Do, YYYY');
+              $scope.lastBuiltDate = moment(resp.data[0].commit.committer.date);
             });
         }
 

docs/site/components/subpage/subpage.html

@@ -21,10 +21,26 @@ <h1 class="logo">
   <header ng-if="headerTemplateUrl" ng-include="headerTemplateUrl"></header>
   <header ng-if="!headerTemplateUrl" header title="{{title}}"></header>
 
+  <div class="side-nav--meta side-nav--meta--top invisible-lg">
+    <div class="row row--sm">
+      <div class="col">
+        <small><em>Browsing Version</em></small>
+
+        <select
+          ng-model="versionSelected"
+          ng-options="version for version in versions"
+          ng-change="loadDocsVersion(versionSelected)"></select>
+      </div>
+      <div ng-if="lastBuiltDate" class="col--right">
+        <small><em>Last built {{lastBuiltDate.format('M/D/YY')}}.</em></small>
+      </div>
+    </div>
+  </div>
+
   <section class="content" ng-transclude></section>
 
   <nav class="side-nav">
-    <div class="side-nav--meta">
+    <div class="side-nav--meta visible-lg">
       <small><em>Browsing Version</em></small>
 
       <select
@@ -33,7 +49,7 @@ <h1 class="logo">
         ng-change="loadDocsVersion(versionSelected)"></select>
 
       <div ng-if="lastBuiltDate">
-        <small><em>Docs last built {{lastBuiltDate}}.</em></small>
+        <small><em>Docs last built {{lastBuiltDate.format('MMMM Do, YYYY')}}.</em></small>
       </div>
     </div>
 

docs/site/css/main.css

@@ -187,6 +187,34 @@ ul {
     float: none;
 }
 
+@media only screen and (min-width: 19em) {
+    .row--sm .row--right {
+        float: right;
+    }
+
+    .row--sm [class*='col'] {
+        float: left;
+    }
+
+    .row--sm .col--right {
+        float: right;
+    }
+
+    .row--sm .col-10 { width: 10%; }
+    .row--sm .col-20 { width: 20%; }
+    .row--sm .col-25 { width: 25%; }
+    .row--sm .col-30 { width: 30%; }
+    .row--sm .col-33 { width: 33%; }
+    .row--sm .col-40 { width: 40%; }
+    .row--sm .col-50 { width: 50%; }
+    .row--sm .col-60 { width: 60%; }
+    .row--sm .col-66 { width: 66%; }
+    .row--sm .col-70 { width: 70%; }
+    .row--sm .col-75 { width: 75%; }
+    .row--sm .col-80 { width: 80%; }
+    .row--sm .col-90 { width: 90%; }
+}
+
 @media only screen and (min-width: 45em) {
     .row--right {
         float: right;
@@ -196,6 +224,10 @@ ul {
         float: left;
     }
 
+    .col--right {
+        float: right;
+    }
+
     .col-10 { width: 10%; }
     .col-20 { width: 20%; }
     .col-25 { width: 25%; }
@@ -994,17 +1026,22 @@ ul {
  Side Nav
  */
 
- .side-nav {
+.side-nav {
     padding-bottom: 3em;
     background: #efefef;
- }
+}
 
- .side-nav .side-nav--meta {
+.side-nav--meta {
     padding: 10px;
     background-color: #f5f5f5;
     text-align: center;
     margin-bottom: 10px;
- }
+}
+
+.side-nav--meta--top {
+    padding-left: 2em;
+    padding-right: 2em;
+}
 
 .side-nav a {
     display: block;
@@ -1159,6 +1196,10 @@ ul {
     *zoom: 1;
 }
 
+.visible-lg {
+    display: none;
+}
+
 /* ==========================================================================
    EXAMPLE Media Queries for Responsive Design.
    These examples override the primary ('mobile first') styles.
@@ -1366,6 +1407,12 @@ ul {
 }
 
 @media only screen and (min-width: 60em) {
+    .visible-lg {
+        display: block;
+    }
+    .invisible-lg {
+        display: none !important;
+    }
 
     /*
      Content