fix stacked page title in mobile sizes

Author: marcosmoura

docs/src/App.vue

@@ -178,6 +178,8 @@
           </md-list-item>
         </md-list>
       </div>
+
+      <release-version></release-version>
     </md-sidenav>
 
     <transition name="md-router" appear>
@@ -222,6 +224,7 @@
       width: $sizebar-size;
       display: flex;
       flex-flow: column;
+      overflow: hidden;
 
       @media (min-width: 1281px) {
         top: 0;
@@ -269,6 +272,7 @@
 
     .main-sidebar-links {
       overflow: auto;
+      flex: 1;
 
       .md-inset .md-list-item-container {
         padding-left: 36px;
@@ -279,6 +283,24 @@
         font-weight: 500;
       }
     }
+
+    .release-version {
+      padding: 8px 8px 8px 16px;
+      border-top: 1px solid rgba(#000, .12);
+      display: none;
+
+      @media (max-width: 480px) {
+        display: block;
+      }
+
+      > div {
+        justify-content: center;
+      }
+
+      .md-select:after {
+        color: rgba(#000, .87);
+      }
+    }
   }
 
   .main-content {

docs/src/components/PageContent.vue

@@ -7,12 +7,7 @@
 
       <div class="md-title">{{ pageTitle }}</div>
 
-      <div class="release-version" v-if="availableDocs.length > 1">
-        <span>Version:</span>
-        <md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
-          <md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
-        </md-select>
-      </div>
+      <release-version></release-version>
 
       <md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
         <md-icon md-src="assets/icon-github.svg"></md-icon>
@@ -51,26 +46,6 @@
     }
   }
 
-  .md-toolbar {
-    .md-select {
-      &:after {
-        color: rgba(#fff, .87);
-      }
-    }
-  }
-
-  .release-version {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-
-    .md-select {
-      width: auto;
-      min-width: auto;
-      margin: 0 8px;
-    }
-  }
-
   .github {
     @media (max-width: 480px) {
       display: none;
@@ -83,55 +58,12 @@
     props: {
       pageTitle: String
     },
-    data: () => ({
-      latest: null,
-      currentDocs: null,
-      availableDocs: []
-    }),
     methods: {
-      changeDocs() {
-        const location = window.location;
-
-        if (this.currentDocs === this.latest) {
-          window.location.href = location.origin + '/' + location.hash;
-        } else {
-          window.location.href = location.origin + '/releases/v' + this.currentDocs + '/' + location.hash;
-        }
-      },
       toggleSidenav() {
         this.$root.toggleSidenav();
-      },
-      getVersions(callback) {
-        const request = new XMLHttpRequest();
-
-        request.open('GET', '/versions.json', true);
-        request.setRequestHeader('Content-Type', 'application/json');
-        request.onload = function() {
-          callback(JSON.parse(this.response));
-        };
-        request.send();
-      },
-      setVersion(versions) {
-        versions.sort((a, b) => a < b);
-
-        this.latest = versions[0];
-        this.currentDocs = versions[0];
-        this.availableDocs = versions;
-      },
-      setCurrentByLocation() {
-        let normalizedPathname = location.pathname.replace(/\/|releases\/v/g, '');
-
-        if (normalizedPathname && this.availableDocs.indexOf(normalizedPathname) >= 0) {
-          this.currentDocs = normalizedPathname;
-        }
       }
     },
     mounted() {
-      this.getVersions((response) => {
-        this.setVersion(response);
-        this.setCurrentByLocation();
-      });
-
       document.title = this.pageTitle + ' - Vue Material';
     }
   };

docs/src/components/ReleaseVersion.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="release-version">
+    <div v-if="availableDocs.length > 1">
+      <span>Version:</span>
+      <md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
+        <md-option v-for="doc in availableDocs" :value="doc">{{ doc }}</md-option>
+      </md-select>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+  .release-version {
+    font-size: 15px;
+
+    @media (max-width: 480px) {
+      display: none;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    .md-select {
+      width: auto;
+      min-width: auto;
+      margin: 0 8px;
+
+      &:after {
+        color: rgba(#fff, .87);
+      }
+    }
+  }
+</style>
+
+<script>
+  let versions = null;
+
+  export default {
+    data: () => ({
+      latest: null,
+      currentDocs: null,
+      availableDocs: []
+    }),
+    methods: {
+      changeDocs() {
+        const location = window.location;
+
+        if (this.currentDocs === this.latest) {
+          window.location.href = location.origin + '/' + location.hash;
+        } else {
+          window.location.href = location.origin + '/releases/v' + this.currentDocs + '/' + location.hash;
+        }
+      },
+      getVersions(callback) {
+        if (!versions) {
+          const request = new XMLHttpRequest();
+
+          request.open('GET', '/versions.json', true);
+          request.setRequestHeader('Content-Type', 'application/json');
+          request.onload = function() {
+            versions = JSON.parse(this.response);
+            callback(versions);
+          };
+          request.send();
+        } else {
+          callback(versions);
+        }
+      },
+      setVersion(versions) {
+        versions.sort((a, b) => a < b);
+
+        this.latest = versions[0];
+        this.currentDocs = versions[0];
+        this.availableDocs = versions;
+      },
+      setCurrentByLocation() {
+        let normalizedPathname = location.pathname.replace(/\/|releases\/v/g, '');
+
+        if (normalizedPathname && this.availableDocs.indexOf(normalizedPathname) >= 0) {
+          this.currentDocs = normalizedPathname;
+        }
+      }
+    },
+    mounted() {
+      this.getVersions((response) => {
+        this.setVersion(response);
+        this.setCurrentByLocation();
+      });
+    }
+  };
+</script>

docs/src/index.js

@@ -12,12 +12,14 @@ import DocsComponent from './components/DocsComponent';
 import ExampleBox from './components/ExampleBox';
 import ApiTable from './components/ApiTable';
 import CodeBlock from './components/CodeBlock';
+import ReleaseVersion from './components/ReleaseVersion';
 
 Vue.component('page-content', PageContent);
 Vue.component('docs-component', DocsComponent);
 Vue.component('example-box', ExampleBox);
 Vue.component('api-table', ApiTable);
 Vue.component('code-block', CodeBlock);
+Vue.component('release-version', ReleaseVersion);
 
 Vue.use(VueRouter);