Add demo grid to homepage

angular-ui · Mar 20, 2014 · e85e532 · e85e532
1 parent 2790e61
commit e85e532
Showing 1 changed file with 130 additions and 5 deletions.
diff --git a/misc/site/index.html b/misc/site/index.html
@@ -11,6 +11,12 @@
   <link rel="stylesheet" href="/docs/css/bootstrap-flatly.css" />
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
   <link rel="stylesheet" href="/css/site.css" />
+  <link rel="stylesheet" href="//ui-grid.info/release/ui-grid-unstable.css" />
+  <style>
+    .grid {
+      height: 250px;
+    }
+  </style>
 </head>
 <body>
   <header class="header">
@@ -96,25 +102,144 @@ <h4 class="text-center">Configurable</h4>
         <div class="text-center">
           <i class="fa fa-4x fa-gear"></i>
         </div>
-        <h4>Advanced features</h4>
+        <h4>Standard Features</h4>
+        <ul>
+          <li>Sorting</li>
+          <li>Filtering</li>
+          <li>User interaction</li>
+        </ul>
+        <br>
+        <h4>Advanced Features</h4>
         <ul>
           <li>Virtualization</li>
           <li>Column pinning</li>
           <li>Grouping</li>
         </ul>
       </div>
 
-      <div class="span4 text-center">
+      <div class="span4 text-center" ng-app="demo">
         <div class="text-center">
-          <i class="fa fa-4x fa-camera"></i>
+          <i class="fa fa-4x fa-certificate"></i>
         </div>
-        <h4 class="">Cute Kittens</h4>
-        <img class="img-circle" src="http://placekitten.com/180/180" />
+        <!-- <h4 class="">Cute Kittens</h4> -->
+        <!-- <img class="img-circle" src="http://placekitten.com/180/180" /> -->
+        <div class="grid" ui-grid="gridOptions"></div>
       </div>
     </div>
   </div>
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
   <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
+  <script src="//ui-grid.info/release/ui-grid-unstable.js"></script>
+  <script>
+    angular.module('demo', ['ui.grid'])
+    .run(function($rootScope) {
+      $rootScope.gridOptions = {
+        data: [
+          {
+              "name": "Ethel Price",
+              "gender": "female",
+              "company": "Enersol"
+          },
+          {
+              "name": "Claudine Neal",
+              "gender": "female",
+              "company": "Sealoud"
+          },
+          {
+              "name": "Beryl Rice",
+              "gender": "female",
+              "company": "Velity"
+          },
+          {
+              "name": "Wilder Gonzales",
+              "gender": "male",
+              "company": "Geekko"
+          },
+          {
+              "name": "Georgina Schultz",
+              "gender": "female",
+              "company": "Suretech"
+          },
+          {
+              "name": "Carroll Buchanan",
+              "gender": "male",
+              "company": "Ecosys"
+          },
+          {
+              "name": "Valarie Atkinson",
+              "gender": "female",
+              "company": "Hopeli"
+          },
+          {
+              "name": "Schroeder Mathews",
+              "gender": "male",
+              "company": "Polarium"
+          },
+          {
+              "name": "Lynda Mendoza",
+              "gender": "female",
+              "company": "Dogspa"
+          },
+          {
+              "name": "Sarah Massey",
+              "gender": "female",
+              "company": "Bisba"
+          },
+          {
+              "name": "Robles Boyle",
+              "gender": "male",
+              "company": "Comtract"
+          },
+          {
+              "name": "Evans Hickman",
+              "gender": "male",
+              "company": "Parleynet"
+          },
+          {
+              "name": "Dawson Barber",
+              "gender": "male",
+              "company": "Dymi"
+          },
+          {
+              "name": "Bruce Strong",
+              "gender": "male",
+              "company": "Xyqag"
+          },
+          {
+              "name": "Nellie Whitfield",
+              "gender": "female",
+              "company": "Exospace"
+          },
+          {
+              "name": "Jackson Macias",
+              "gender": "male",
+              "company": "Aquamate"
+          },
+          {
+              "name": "Pena Pena",
+              "gender": "male",
+              "company": "Quarx"
+          },
+          {
+              "name": "Lelia Gates",
+              "gender": "female",
+              "company": "Proxsoft"
+          },
+          {
+              "name": "Letitia Vasquez",
+              "gender": "female",
+              "company": "Slumberia"
+          },
+          {
+              "name": "Trevino Moreno",
+              "gender": "male",
+              "company": "Conjurica"
+          }
+        ]
+      };
+    });
+  </script>
 </body>
 </html>