blurring lines

.gitignore

@@ -28,9 +28,11 @@ testem.log
 .DS_Store
 Thumbs.db
 
+nativescript/app/**/*.css
 nativescript/app/app
 nativescript/hooks
 nativescript/node_modules
 nativescript/platforms
+src/app/**/*.css
 src/app/**/*.js
 src/app/**/*.js.map

nativescript/app/app.scss

@@ -0,0 +1,42 @@
+/*button, label, stack-layout {
+    horizontal-align: center;    
+}
+
+button {
+    font-size: 36;
+}
+
+.title {
+    font-size: 30;
+    margin: 20;
+}
+
+.message {
+    font-size: 20;
+    color: #284848;
+    text-align: center;
+    margin: 0 20;
+} */
+
+ActionBar {
+  background-color: #4E75E2;
+  color:#fff;
+}
+
+ListView {
+  max-width: 320px;
+  margin: 0 auto;
+  display: block;
+
+  StackLayout {
+    padding:5 0 0 10;
+    text-align:left;
+
+    &.even {
+      background-color: #efefef;
+      Label {
+
+      }
+    }
+  }
+}

nativescript/package.json

@@ -1,39 +1,39 @@
 {
-  "description": "NativeScript Application",
-  "license": "SEE LICENSE IN <your-license-filename>",
-  "readme": "NativeScript Application",
-  "repository": "<fill-your-repository-here>",
-  "nativescript": {
-    "id": "org.nativescript.nativescript",
-    "tns-ios": {
-      "version": "2.0.1"
+    "description": "NativeScript Application",
+    "license": "SEE LICENSE IN <your-license-filename>",
+    "readme": "NativeScript Application",
+    "repository": "<fill-your-repository-here>",
+    "nativescript": {
+        "id": "org.nativescript.nativescript",
+        "tns-ios": {
+            "version": "2.0.0"
+        },
+        "tns-android": {
+            "version": "2.0.0"
+        }
     },
-    "tns-android": {
-      "version": "2.0.0"
+    "dependencies": {
+        "@angular/common": "2.0.0-rc.1",
+        "@angular/compiler": "2.0.0-rc.1",
+        "@angular/core": "2.0.0-rc.1",
+        "@angular/http": "2.0.0-rc.1",
+        "@angular/platform-browser": "2.0.0-rc.1",
+        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+        "@angular/platform-server": "2.0.0-rc.1",
+        "@angular/router": "2.0.0-rc.1",
+        "@angular/router-deprecated": "2.0.0-rc.1",
+        "nativescript-angular": "0.1.6",
+        "nativescript-ng2-magic": "^1.5.7",
+        "tns-core-modules": "^2.0.0"
+    },
+    "devDependencies": {
+        "babel-traverse": "6.9.0",
+        "babel-types": "6.9.0",
+        "babylon": "6.8.0",
+        "filewalker": "0.1.2",
+        "lazy": "1.0.11",
+        "nativescript-dev-sass": "^0.1.0",
+        "nativescript-dev-typescript": "^0.3.2",
+        "typescript": "^1.8.10"
     }
-  },
-  "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/http": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular/platform-server": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
-    "@angular/router-deprecated": "2.0.0-rc.1",
-    "nativescript-angular": "0.1.1",
-    "nativescript-ng2-magic": "^1.5.7",
-    "tns-core-modules": "^2.0.0"
-  },
-  "devDependencies": {
-    "babel-traverse": "6.9.0",
-    "babel-types": "6.9.0",
-    "babylon": "6.8.0",
-    "filewalker": "0.1.2",
-    "lazy": "1.0.11",
-    "nativescript-dev-sass": "^0.1.0",
-    "nativescript-dev-typescript": "^0.3.2",
-    "typescript": "^1.8.10"
-  }
-}
+}

package.json

@@ -1,54 +1,54 @@
 {
-  "name": "nativescript-angular-web-components",
-  "version": "0.0.0",
-  "license": "MIT",
-  "angular-cli": {},
-  "scripts": {
-    "start": "ng server",
-    "postinstall": "typings install",
-    "lint": "tslint \"src/**/*.ts\"",
-    "format": "clang-format -i -style=file --glob=src/**/*.ts",
-    "test": "ng test",
-    "pree2e": "webdriver-manager update",
-    "e2e": "protractor",
-    "start.ios": "cd nativescript && tns emulate ios",
-    "start.livesync.ios": "cd nativescript && tns livesync ios --emulator --watch",
-    "start.android": "cd nativescript && tns emulate android",
-    "start.livesync.android": "cd nativescript && tns livesync android --emulator --watch"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/http": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
-    "@angular/router-deprecated": "2.0.0-rc.1",
-    "es6-shim": "^0.35.0",
-    "hammerjs": "^2.0.8",
-    "nativescript-ng2-magic": "^1.5.7",
-    "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.6",
-    "systemjs": "0.19.26",
-    "zone.js": "^0.6.12"
-  },
-  "devDependencies": {
-    "angular-cli": "^1.0.0-beta.2-mobile.3",
-    "clang-format": "^1.0.35",
-    "codelyzer": "0.0.14",
-    "ember-cli-inject-live-reload": "^1.4.0",
-    "jasmine-core": "^2.4.1",
-    "jasmine-spec-reporter": "^2.4.0",
-    "karma": "^0.13.15",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-jasmine": "^0.3.8",
-    "node-sass": "^3.7.0",
-    "protractor": "^3.3.0",
-    "ts-node": "^0.5.5",
-    "tslint": "^3.6.0",
-    "typescript": "^1.8.10",
-    "typings": "^0.8.1"
-  }
-}
+    "name": "nativescript-angular-web-components",
+    "version": "0.0.0",
+    "license": "MIT",
+    "angular-cli": {},
+    "scripts": {
+        "start": "ng server",
+        "postinstall": "typings install",
+        "lint": "tslint \"src/**/*.ts\"",
+        "format": "clang-format -i -style=file --glob=src/**/*.ts",
+        "test": "ng test",
+        "pree2e": "webdriver-manager update",
+        "e2e": "protractor",
+        "start.ios": "cd nativescript && tns emulate ios",
+        "start.livesync.ios": "cd nativescript && tns livesync ios --emulator --watch",
+        "start.android": "cd nativescript && tns emulate android",
+        "start.livesync.android": "cd nativescript && tns livesync android --emulator --watch"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/common": "2.0.0-rc.1",
+        "@angular/compiler": "2.0.0-rc.1",
+        "@angular/core": "2.0.0-rc.1",
+        "@angular/http": "2.0.0-rc.1",
+        "@angular/platform-browser": "2.0.0-rc.1",
+        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+        "@angular/router": "2.0.0-rc.1",
+        "@angular/router-deprecated": "2.0.0-rc.1",
+        "es6-shim": "^0.35.0",
+        "hammerjs": "^2.0.8",
+        "nativescript-ng2-magic": "^1.5.7",
+        "reflect-metadata": "0.1.3",
+        "rxjs": "5.0.0-beta.6",
+        "systemjs": "0.19.26",
+        "zone.js": "^0.6.12"
+    },
+    "devDependencies": {
+        "angular-cli": "^1.0.0-beta.2-mobile.3",
+        "clang-format": "^1.0.35",
+        "codelyzer": "0.0.14",
+        "ember-cli-inject-live-reload": "^1.4.0",
+        "jasmine-core": "^2.4.1",
+        "jasmine-spec-reporter": "^2.4.0",
+        "karma": "^0.13.15",
+        "karma-chrome-launcher": "^0.2.3",
+        "karma-jasmine": "^0.3.8",
+        "node-sass": "^3.7.0",
+        "protractor": "^3.3.0",
+        "ts-node": "^0.5.5",
+        "tslint": "^3.6.0",
+        "typescript": "^1.8.10",
+        "typings": "^0.8.1"
+    }
+}

src/app/app.component.html

@@ -12,10 +12,11 @@
   <Button [text]="toggleText" (tap)="changeText()"></Button>
   <Label [text]="userHeading" textWrap="true" class="heading"></Label>
 
-  <ListView [items]="users" (loaded)="onLoaded($event)" (itemLoading)="onItemLoading($event)" (itemTap)="onItemTap($event)">
+  <ListView [items]="users">
       <template let-item="item" let-odd="odd" let-even="even">
-          <StackLayout [ngClass]="{odd: odd, even: even}">
-              <Label [text]="item.name?.first + ' ' + item.name?.last" textWrap="true"></Label>
+          <StackLayout [ngClass]="{odd: odd, even: even}"
+            (tap)="selectUser(item)">
+            <Label [text]="item.name?.first + ' ' + item.name?.last" textWrap="true"></Label>
           </StackLayout>
       </template>
   </ListView>

src/app/app.component.ts

@@ -51,21 +51,15 @@ export class AppComponent {
     }
   }
 
-  public onLoaded(e: any) {
-    console.log(`onLoaded`);
-    console.log(e);
-  }
-
-  public onItemLoading(e: any) {
-    console.log(`onItemLoading`);
-    console.log(e);
-  }
-
   public onItemTap(e: any) {
     console.log(`onItemTap`);
     console.log(e);
   }
 
+  public selectUser(user: any) {
+    console.log(user.name.first + ' ' + user.name.last);
+  }
+
   private loadUsers() {
     this.http.get(`https://randomuser.me/api/?results=100&nat=us&seed=${Math.floor(Math.random()*100000000)}`).map(res => res.json()).subscribe((response: any) => {
       this.users = response.results;