Lots of tweaks, and angular demos

dist/framework-with-theme.css

@@ -44,6 +44,8 @@ ul {
   text-align: center;
   cursor: pointer;
   margin: 0; }
+  .button.button-borderless {
+    border: none; }
 
 .bar {
   position: fixed;
@@ -55,7 +57,7 @@ ul {
   -webkit-box-orient: horizontal;
   box-orient: horizontal;
   box-sizing: border-box;
-  height: 60px;
+  height: 50px;
   /*
   .title + .button:last-child,
   .button + .button:last-child,
@@ -73,9 +75,8 @@ ul {
     display: block;
     width: 100%;
     */
-    line-height: 20px;
+    line-height: 30px;
     margin: 0;
-    padding: 20px 0px;
     text-align: center;
     white-space: nowrap;
     font-size: 18px;
@@ -98,10 +99,10 @@ ul {
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
 .bar ~ .content {
-  top: 60px; }
+  top: 50px; }
 
 .bar ~ .content {
-  bottom: 51px; }
+  bottom: 50px; }
 
 /* Bar docked to bottom used for primary app navigation */
 .tabs {
@@ -124,15 +125,19 @@ ul {
 /* Navigational tab */
 .tab-item {
   height: 100%;
-  padding-top: 9px;
   text-align: center;
   box-sizing: border-box;
   -webkit-box-flex: 1;
   box-flex: 1; }
+  .tab-item a {
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    height: 100%; }
 
 /* Active state for tab */
-.tab-item.active {
+.tab-item.active, .tab-item:active {
-  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); }
+  background-color: rgba(0, 0, 0, 0.2); }
 
 /* Icon for tab  */
 .tab-item i {
@@ -144,8 +149,7 @@ ul {
   margin-top: 1px;
   font-size: 10px;
   font-weight: bold;
-  color: #fff;
+  color: #fff; }
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3); }
 
 .button-group {
   position: relative;
@@ -216,7 +220,9 @@ ul {
     .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
       color: inherit; }
 
-a.list-item:hover, a.list-item:focus {
+a.list-item {
+  text-decoration: none; }
+  a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
 
 .list-divider {
@@ -299,7 +305,8 @@ a.list-item:hover, a.list-item:focus {
   height: 60px; }
 
 .tab-item a {
-  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }
+  font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 200; }
 .tab-item i {
   font-size: 25px; }
 

example/angular/app.css

@@ -0,0 +1,27 @@
+.pane {
+  position: fixed;
+  width: 100%;
+}
+.reveal-animation {
+  /*
+  -webkit-transform: translate3d(0%, 0, 0);
+          transform: translate3d(0%, 0, 0);
+
+ -webkit-transition: -webkit-transform 1s ease-in-out;
+         transition:         transform 1s ease-in-out;
+  */
+}
+.reveal-animation.ng-enter {
+  -webkit-transition: 0.2s linear all;
+  -webkit-transform:translate3d(100%,0,0) ;
+}
+.reveal-animation.ng-enter-active {
+  -webkit-transform:translate3d(0,0,0) ;
+}
+.reveal-animation.ng-leave {
+  -webkit-transition: 0.2s linear all;
+  -webkit-transform:translate3d(0,0,0);
+}
+.reveal-animation.ng-leave-active {
+  -webkit-transform:translate3d(-100%,0,0);
+}

example/angular/app.js

@@ -0,0 +1,47 @@
+document.addEventListener('touchstart', function() {});
+
+var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']);
+
+app.config( ["$routeProvider", function($routeProvider){
+    $routeProvider.when("/customers", {"templateUrl" : "customers.html", controller: 'CustomersCtrl'});
+    $routeProvider.when("/customer/:id", {"templateUrl" : "customer.html", controller: 'CustomerCtrl'});
+    $routeProvider.otherwise({"redirectTo":"/customers"});
+
+  }]
+);
+
+app.provider('Customers', function() {
+  var customers = [
+    {'name': 'Max Lynch', id: 1},
+    {'name': 'Max Lynch', id: 2},
+    {'name': 'Max Lynch', id: 3},
+    {'name': 'Max Lynch', id: 4},
+    {'name': 'Max Lynch', id: 5},
+    {'name': 'Max Lynch', id: 6},
+    {'name': 'Max Lynch', id: 7},
+    {'name': 'Max Lynch', id: 8},
+    {'name': 'Max Lynch', id: 9},
+    {'name': 'Max Lynch', id: 10},
+    {'name': 'Max Lynch', id: 11},
+  ];
+
+  this.$get = function() {
+    return {
+      list: customers,
+      getById: function(id) {
+        for(var i = 0; i < this.list.length; i++) { if(this.list[i].id == id) return this.list[i]; }
+      }
+    }
+  }
+});
+
+app.controller('CustomersCtrl', function($scope, Customers) {
+  $scope.customers = Customers;
+});
+
+app.controller('CustomerCtrl', function($scope, $routeParams, Customers) {
+  var id = $routeParams.id;
+  var customer = Customers.getById(id);
+  $scope.customer = customer;
+  console.log('Showing user', id, customer);
+});

example/angular/customer.html

@@ -0,0 +1,3 @@
+<h2>{{customer.name}}</h2>
+<a class="button button-default">Edit</a>
+<a class="button button-danger">Delete</a>

example/angular/customers.html

@@ -0,0 +1,6 @@
+<ul class="list" ng-controller="CustomersCtrl">
+  <a href="#customer/{{customer.id}}" class="list-item" ng-repeat="customer in customers.list">
+    {{customer.name}}
+    <i class="icon-arrow-right"></i>
+  </a>
+</ul>

example/angular/index.html

@@ -0,0 +1,27 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../dist/framework-with-theme.css">
+    <link rel="stylesheet" href="app.css">
+    
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
+    <script src="http://code.angularjs.org/1.2.0rc1/angular-animate.js"></script>
+    
+    <script src="app.js"></script>
+  </head>
+  <body ng-app="peopleApp">
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Customers</h1>
+    </header>
+
+    <main class="content" ng-controller="CustomersCtrl">
+      <div ng-view class="pane reveal-animation"></div>
+    </main>
+  </body>
+</html>

example/bar.html

@@ -25,30 +25,49 @@
     <link rel="stylesheet" href="app.css">
 
     <script src="app.js"></script>
+    <style>
+      .bar-header {
+        position: static;
+      }
+    </style>
   </head>
   <body ontouchstart="">
     <header class="bar bar-header bar-default">
+      <a class="button button-default">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-default">Next</a>
     </header>
-    <header class="bar bar-header bar-secondary" style="top: 50px">
+    <header class="bar bar-header bar-secondary">
+      <a class="button button-secondary">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-secondary">Next</a>
     </header>
-    <header class="bar bar-header bar-primary" style="top: 100px">
+    <header class="bar bar-header bar-primary">
+      <a class="button button-primary">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-primary">Next</a>
     </header>
-    <header class="bar bar-header bar-success" style="top: 150px">
+    <header class="bar bar-header bar-success">
+      <a class="button button-success">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-success">Next</a>
     </header>
-    <header class="bar bar-header bar-warning" style="top: 200px">
+    <header class="bar bar-header bar-warning">
+      <a class="button button-warning">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-warning">Next</a>
     </header>
-    <header class="bar bar-header bar-danger" style="top: 250px">
+    <header class="bar bar-header bar-danger">
+      <a class="button button-danger">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-danger">Next</a>
     </header>
-    <header class="bar bar-header bar-dark" style="top: 300px">
+    <header class="bar bar-header bar-dark">
+      <a class="button button-dark">Previous</a>
       <h1 class="title">Willkommen!</h1>
+      <a class="button button-dark">Next</a>
     </header>
-    <footer class="bar bar-footer bar-danger">
+    <footer class="bar bar-footer bar-success">
       <nav class="tabs">
         <ul class="tabs-inner">
           <li class="tab-item">
@@ -84,5 +103,10 @@
         </ul>
       </nav>
     </footer>
+    <script src="../js/framework/framework-utilities.js"></script>
+    <script src="../js/framework/framework-navigation.js"></script>
+    <script src="../js/framework/framework-buttons.js"></script>
+    <script src="../js/framework/framework-tabs.js"></script>
+    <script src="../js/framework/framework-init.js"></script>
   </body>
 </html>

js/framework/framework-buttons.js

@@ -18,6 +18,8 @@
     if(event.target && event.target.classList.contains('button')) {
       event.target.classList.remove('active');
     }
+
+    // TODO: Process the click? Set flag to not process other click events
   };
 
   document.addEventListener('touchstart', framework.Button.prototype._onTouchStart);

js/framework/framework-tabs.js

@@ -1,20 +1,23 @@
 (function(window, document, framework) {
   framework.Tabs = function() {}
 
+  framework.Tabs.prototype._TAB_ITEM_CLASS = 'tab-item';
+
   framework.Tabs.prototype._onTouchStart = function(event) {
     console.log('Touch start!', event);
-    if(event.target && event.target.classList.contains('button')) {
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
       event.target.classList.add('active');
     }
   };
   framework.Tabs.prototype._onTouchEnd = function(event) {
     console.log('Touch end!', event);
-    if(event.target && event.target.classList.contains('button')) {
+    if(event.target && event.target.parentNode.classList.contains(this._TAB_ITEM_CLASS)) {
       event.target.classList.remove('active');
     }
   };
 
-  document.addEventListener('touchstart', framework.Button.prototype._onTouchStart);
+  document.addEventListener('mousedown', framework.Tabs.prototype._onTouchStart);
-  document.addEventListener('touchend', framework.Button.prototype._onTouchEnd);
+  document.addEventListener('touchstart', framework.Tabs.prototype._onTouchStart);
+  document.addEventListener('touchend', framework.Tabs.prototype._onTouchEnd);
 
 })(this, document, this.FM = this.FM || {});

scss/framework/structure/_bar.scss

@@ -28,7 +28,7 @@
     line-height: $barTitleLineHeightComputed;
 
     margin: 0;
-    padding: $barPaddingVertical 0px;
+    //padding: $barPaddingVertical 0px;
 
     text-align: center;
     white-space: nowrap;
@@ -79,5 +79,5 @@
   top: $barHeight;
 }
 .bar ~ .content {
-  bottom: 51px;
+  bottom: $barHeight;
 }

scss/framework/structure/_button.scss

@@ -5,4 +5,8 @@
 	text-align: center;
 	cursor: pointer;
 	margin: 0;
+
+  &.button-borderless {
+    border: none;
+  }
 }

scss/framework/structure/_listview.scss

@@ -64,6 +64,7 @@
 // Linked list items
 a.list-item {
   //color: $list-group-link-color;
+  text-decoration: none;
 
   .list-item-heading {
     //color: $list-group-link-heading-color;

scss/framework/structure/_tabs.scss

@@ -21,16 +21,23 @@
 /* Navigational tab */
 .tab-item {
   height: 100%;
-  padding-top: 9px;
   text-align: center;
   box-sizing: border-box;
   -webkit-box-flex: 1;
           box-flex: 1;
+
+  a {
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 /* Active state for tab */
-.tab-item.active {
+.tab-item.active, .tab-item:active {
-  box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
+  //box-shadow: inset 0 0 1px rgba(0, 0, 0, .12);
+  background-color: rgba(0,0,0,0.2);
 }
 
 /* Icon for tab  */
@@ -45,5 +52,4 @@
   font-size: 10px;
   font-weight: bold;
   color: #fff;
-  text-shadow: 0 1px rgba(0, 0, 0, .3);
 }

scss/framework/structure/_variables.scss

@@ -15,10 +15,10 @@ $baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
 $contentPadding: 10px;
 
 // Bar stuff
-$barHeight: 60px !default;
+$barHeight: 50px !default;
-$barLineHeight: 60px !default;
+$barLineHeight: 50px !default;
 $barTitleFontSize: $fontSizeLarge;
-$barTitleLineHeightComputed: $baseLineHeightComputed;
+$barTitleLineHeightComputed: 30px;//$barHeight - 2;
 $barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
 
 

scss/framework/theme/default/_tabs.scss

@@ -5,6 +5,11 @@
 .tab-item {
   a {
     font-family: $lightSansFontFamily;
+    font-weight: 200;
+
+    .active, &:active {
+      //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
+    }
   }
   i {
     font-size: 25px;