site: fix language switcher display issues

googleapis · Jul 10, 2015 · d5b7648 · d5b7648
1 parent a78d438
commit d5b7648
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 17 deletions.
diff --git a/docs/site/components/language-switcher/language-switcher.html b/docs/site/components/language-switcher/language-switcher.html
@@ -1,10 +1,19 @@
-<nav class="main-nav" ng-class="{ open: showNavDropdown }">
-  <div class="nav-current" ng-click="showNavDropdown = !showNavDropdown">Node.js</div>
-  <ul class="menu" ng-click="showNavDropdown = false">
+<nav class="main-nav"
+  ng-class="{ open: showNavDropdown }">
+
+  <div class="nav-current"
+    ng-click="showNavDropdown = !showNavDropdown">
+    Node.js
+  </div>
+
+  <ul class="menu"
+    ng-click="showNavDropdown = false">
 
     <!-- Getting Started -->
     <li ng-if="extraLinks.length > 0" class="invisible-lg">
-      <h4 class="list-item--heading">Getting Started</h4>
+      <h4 class="list-item--heading">
+        Getting Started
+      </h4>
     </li>
     <li ng-if="extraLinks.length > 0" class="invisible-lg">
       <a href="#/authorization" ng-class="{ current: isActiveUrl('/authorization') }" title="Authorization">
@@ -23,15 +32,20 @@ <h4 class="list-item--heading">Getting Started</h4>
     </li>
 
     <!-- API -->
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
-      <h4 class="list-item--heading">API</h4>
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0">
+      <h4 class="list-item--heading">
+        API
+      </h4>
     </li>
     <li class="menu--extra-links-item invisible-lg"
       ng-repeat="page in extraLinks">
       <a ng-href="{{page.url}}">
         {{page.title}}
       </a>
-      <ul class="sub-sections" ng-if="page.pages">
+
+      <ul class="sub-sections"
+        ng-if="page.pages">
         <li ng-repeat="innerPage in page.pages">
           <a ng-href="{{page.url + innerPage.url}}">
             {{innerPage.title}}
@@ -41,37 +55,47 @@ <h4 class="list-item--heading">API</h4>
     </li>
 
     <!-- External -->
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
-      <h4 class="list-item--heading">External Resources</h4>
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0" >
+      <h4 class="list-item--heading">
+        External Resources
+      </h4>
     </li>
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
-      <a href="https://github.com/GoogleCloudPlatform/gcloud-node" title="gcloud-node on Github" class="skip-external-link">
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0" >
+      <a href="https://github.com/GoogleCloudPlatform/gcloud-node" title="gcloud-node on GitHub" class="skip-external-link">
         <img src="site/img/icon-link-github.svg" alt="GitHub icon" class="menu-icon" />
         GitHub
       </a>
     </li>
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0">
       <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues" title="gcloud-node issues on Github" class="skip-external-link">
         <img src="site/img/icon-link-github.svg" alt="GitHub icon" class="menu-icon" />
         Issues
       </a>
     </li>
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0" >
       <a href="http://stackoverflow.com/questions/tagged/gcloud-node" title="gcloud-node on StackOverflow" class="skip-external-link">
         <img src="site/img/icon-link-stackoverflow.svg" alt="StackOverflow icon" class="menu-icon" />
         StackOverflow
       </a>
     </li>
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0">
       <a href="http://npmjs.org/package/gcloud" title="gcloud-node on npm" class="skip-external-link">
         <img src="site/img/icon-link-package-manager.svg" alt="npm icon" class="menu-icon" />
         npm
       </a>
     </li>
 
     <!-- Other Languages -->
-    <li ng-if="extraLinks.length > 0" class="invisible-lg">
-      <h4 class="list-item--heading">gcloud Libraries</h4>
+    <li class="invisible-lg"
+      ng-if="extraLinks.length > 0" >
+      <h4 class="list-item--heading">
+        gcloud Libraries
+      </h4>
     </li>
     <li>
       <a href="#" title="gcloud-node Documentation" class="skip-external-link">

diff --git a/docs/site/css/main.css b/docs/site/css/main.css
@@ -428,6 +428,11 @@ ul {
         transition: all 0.3s ease;
 }
 
+.language-switcher--home .menu {
+    position: absolute;
+    bottom: initial;
+}
+
 .page-header.fixed .menu {
     top: 3.3em;
 }
@@ -1425,6 +1430,10 @@ ul {
     /*
      Menu
      */
+    .menu {
+        position: absolute;
+    }
+
     .main-nav {
         position: absolute;
         top: 1.2em;

diff --git a/docs/site/home.html b/docs/site/home.html
@@ -1,6 +1,6 @@
 <header class="page-header" role="banner">
   <h1 class="logo"><img src="site/img/logo-full.svg" alt="Google Cloud Platform" /></h1>
-  <div language-switcher></div>
+  <div language-switcher class="language-switcher--home"></div>
 </header><!-- end of .page-header -->
 
 <article class="main" role="main">