docs(): Clarify content & positioning

angular · Jan 27, 2015 · 317cc3b · 317cc3b
1 parent cfabdec
commit 317cc3b
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 30 deletions.
diff --git a/docs/app/css/style.css b/docs/app/css/style.css
@@ -9,6 +9,10 @@ body {
 
 a {
   color: #3f51b5;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  text-decoration: underline;
 }
 
 table {
@@ -152,12 +156,6 @@ code:not(.highlight) {
   text-align: left;
   width: 100%;
 }
-.docs-menu li.childActive {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-.docs-menu li.childActive:not(:last-of-type){
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
 .docs-menu li.parentActive,
 .docs-menu li.parentActive .menu-toggle-list {
   background-color: #f6f6f6;
@@ -178,8 +176,9 @@ code:not(.highlight) {
 .menu-toggle-list.ng-hide {
   max-height: 0;
 }
-.menu-toggle-list a {
+.docs-menu .menu-toggle-list a.md-button {
   display: block;
+  padding: 0 16px 0 32px;
   text-transform: none;
 }
 .md-button-toggle .md-toggle-icon {
@@ -364,8 +363,38 @@ md-toolbar.demo-toolbar .md-button {
   font-size: 18px;
 }
 
+/***************
+ * Landing Page
+ ***************/
+ul.buckets {
+  margin: 24px 0;
+  padding: 0;
+}
+ul.buckets li {
+  list-style: none;
+  margin: 0;
+  text-align: center;
+}
+ul.buckets li md-card md-card-content {
+  padding: 0;
+}
+ul.buckets li a {
+  background-color: transparent;
+  display: block;
+  font-weight: 500;
+  padding: 16px 0;
+  text-decoration: none;
+  -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
+  transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
+}
+ul.buckets li a:hover,
+ul.buckets li a:focus {
+  background-color: #03a9f4;
+  color: white;
+}
+
 /************
- * DOCS
+ * API DOCS
  ************/
 .api-options-bar .md-button {
   margin: 4px;

diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -16,6 +16,21 @@ function(COMPONENTS, DEMOS, PAGES, $routeProvider, $mdThemingProvider) {
         return 'partials/layout-' + params.tmpl + '.tmpl.html';
       }
     })
+    .when('/layout/', {
+      redirectTo: function() {
+        return "/layout/container";
+      }
+    })
+    .when('/demo/', {
+      redirectTo: function() {
+        return DEMOS[0].url;
+      }
+    })
+    .when('/api/', {
+      redirectTo: function() {
+        return COMPONENTS[0].docs[0].url;
+      }
+    })
     .when('/getting-started', {
       templateUrl: 'partials/getting-started.tmpl.html'
     });

diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html
@@ -1,22 +1,22 @@
 <div ng-controller="GuideCtrl" layout="column" class="doc-content">
-  <md-content>
-      <p>Learning about Angular Material? Here are some ways to get started:</p>
+  <md-content class="extraPad">
+    <p><em>New to Angular.js? Before getting into Angular Material, it might be helpful to <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank" title="Link opens in a new window">read about the framework</a>.</em></p>
 
-      <h2>Including Angular Material and its dependencies</h2>
-      <ul style="margin-bottom: 2em;">
-        <li><a href="https://github.com/angular/material#bower">Using Bower</a></li>
-        <li><a href="https://github.com/angular/material#cdn">Using a CDN</a> (example below)</li>
-      </ul>
-
-    <iframe height='260' scrolling='no' data-default-tab="html" src='//codepen.io/marcysutton/embed/OPbpKm?default-tab=html' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/marcysutton/pen/OPbpKm/'>Angular Material Dependencies</a> on <a href='http://codepen.io'>CodePen</a>.
-    </iframe>
+    <h2>How do I start?</h2>
+    <ul style="margin-bottom: 2em;">
+      <li><a href="http://codepen.io/collection/AxKKgY/" target="_blank" title="Link opens in a new window">Fork a Codepen</a></li>
+      <li><a href="https://github.com/angular/material-start" target="_blank" title="Link opens in a new window">Clone a Github Starter Project</a></li>
+    </ul>
 
-    <h2>Demo Apps</h2>
+    <h3>Including Angular Material and its dependencies</h3>
     <ul style="margin-bottom: 2em;">
-      <li><a href="http://codepen.io/collection/AxKKgY/">Codepen</a></li>
-      <li><a href="https://github.com/epelc/go-material">GoMaterial</a></li>
+      <li><a href="https://github.com/angular/material#bower">Using Bower</a></li>
+      <li><a href="https://github.com/angular/material#cdn">Using a CDN</a> (example below)</li>
     </ul>
 
+    <iframe height='280' scrolling='no' data-default-tab="html" src='//codepen.io/marcysutton/embed/OPbpKm?default-tab=html' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/marcysutton/pen/OPbpKm/'>Angular Material Dependencies</a> on <a href='http://codepen.io'>CodePen</a>.
+    </iframe>
+
     <md-divider></md-divider>
 
     <h2>Contributing to Angular Material</h2>

diff --git a/docs/app/partials/home.tmpl.html b/docs/app/partials/home.tmpl.html
@@ -1,5 +1,44 @@
 <div ng-controller="HomeCtrl" layout="column" class="doc-content">
-    <md-content class="extraPad" >
+    <md-content class="extraPad">
+        <p>The <strong>Angular Material</strong> project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.</p>
+
+        <p>Similar to the
+            <a href="http://www.polymer-project.org/">Polymer</a> project's
+            <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">Paper elements</a> collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams.
+        </p>
+
+        <ul class="buckets" layout layout-align="center center" layout-wrap>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/getting-started">Getting Started</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/demo/">Demos</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/layout/">Customization</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/api/">API Reference</a>
+              </md-card-content>
+            </md-card>
+          </li>
+        </ul>
+
+        <h2>What is Material Design?</h2>
         <p>
             <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a
             unified system of visual, motion, and interaction design that adapts across different devices and different
@@ -12,13 +51,6 @@
             <iframe width="560" height="315" title="Material Design" src="//www.youtube.com/embed/Q8TXgCzxEnw"
                     frameborder="0" allowfullscreen></iframe>
         </md-content>
-
-        <p>
-            The Angular Material Design project is a reference implementation effort similar to that provided in the
-            <a href="http://www.polymer-project.org/">Polymer</a> project's
-            <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">Paper elements</a>
-            collection. This project provides a set of AngularJS UI elements that implement the material design system.
-
         <ul>
             <li>These docs were generated from source in the `master` branch:
                 <ul style="padding-top:5px;">

diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
@@ -24,7 +24,7 @@
 
     <md-toolbar>
       <h1 class="md-toolbar-tools">
-        <a href="" ng-click="goHome()" layout="row" flex>
+        <a ng-href="/" layout="row" flex>
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" style="
               width: 40px; height: 40px;">
             <path d="M 50 0 L 100 14 L 92 80 L 50 100 L 8 80 L 0 14 Z" fill="#b2b2b2"></path>