Skip to content
This repository was archived by the owner on Oct 22, 2018. It is now read-only.

Commit 3e4f373

Browse files
jdnichollscjdnichollsc
committed
Improve the styles of the template
1 parent 621b46a commit 3e4f373

10 files changed

+71
-60
lines changed

‎src/app/about/about.common.ts

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AboutComponent } from './components/about/about.component';
88

99
export const SHARED_MODULES: any[] = [
1010
SharedModule,
11+
RouterModule,
1112
RouterModule.forChild(AboutRoutes),
1213
TranslateModule.forChild()
1314
];

‎src/app/about/components/about/about.component.scss

+10
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,14 @@ img {
22
max-height: 355px;
33
width: auto;
44
margin: 0 auto;
5+
}
6+
7+
.cardStyle{
8+
background-color:#fff;
9+
10+
.description {
11+
margin-top:10px;
12+
margin-bottom: 10px;
13+
padding: 15px;
14+
}
515
}

‎src/app/about/components/about/about.component.tns.html

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<Page>
1+
<Page xmlns:Card="nativescript-cardview">
22
<ActionBar title="About">
3-
<ActionItem ios.position="left" (tap)="backPage()">
3+
<ActionItem ios.position="left" (tap)="goBack()">
44
<Button class="ion-icon" text="{{ '\uF30C' }}"></Button>
55
</ActionItem>
66
</ActionBar>
7-
<StackLayout>
8-
<Label class="h1 title" text="About me!"></Label>
9-
</StackLayout>
7+
<ScrollView>
8+
<Card:CardView row="0" class="cardStyle" radius="10" elevation="50" margin="20">
9+
<GridLayout rows="*, *, *" columns="*, *, *">
10+
<Image src="https://avatars3.githubusercontent.com/u/2154886?v=3" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
11+
</GridLayout>
12+
</Card:CardView>
13+
</ScrollView>
1014
</Page>

‎src/app/about/components/about/about.component.tns.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class AboutComponent implements OnInit {
1414
ngOnInit() {
1515
}
1616

17-
backPage() {
17+
goBack() {
1818
this._router.back()
1919
}
2020
}

‎src/app/about/components/about/about.component.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { Router } from '@angular/router';
32

43
@Component({
54
moduleId: module.id,
@@ -9,12 +8,8 @@ import { Router } from '@angular/router';
98
})
109
export class AboutComponent implements OnInit {
1110

12-
constructor(private _router: Router) { }
11+
constructor() { }
1312

1413
ngOnInit() {
1514
}
16-
17-
openPage(url) {
18-
this._router.navigate([url])
19-
}
2015
}

‎src/app/home/components/home/home.component.scss

+20-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
1-
img{
2-
width: auto;
3-
max-height: 300px;
4-
margin: 0 auto;
1+
2+
3+
.homePage{
4+
background-color: #222;
5+
6+
img{
7+
width: auto;
8+
max-height: 300px;
9+
margin: 0 auto;
10+
}
11+
12+
.cardStyle{
13+
background-color:#fff;
14+
15+
.description {
16+
margin-top:10px;
17+
margin-bottom: 10px;
18+
padding: 15px;
19+
}
20+
}
521
}

‎src/app/home/components/home/home.component.tns.html

+25-28
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
1-
<Page xmlns:Card="nativescript-cardview">
1+
<Page xmlns:Card="nativescript-cardview" class="homePage">
22
<ActionBar title="NativeScript Mobile App, yay!">
3-
<ActionItem ios.position="right" (tap)="openPage('/about')">
3+
<ActionItem ios.position="right" [nsRouterLink]="['/about']" pageTransition="flip">
44
<Button class="ion-icon" text="{{ '\uf41a' }}"></Button>
55
</ActionItem>
66
</ActionBar>
7-
<scroll-view>
8-
<GridLayout rows="auto, *">
9-
<SearchBar row="0" hint="Search hint"></SearchBar>
10-
<StackLayout row="3">
11-
<Button text="Issue navigating to About page using nsRouterLink" [nsRouterLink]="['/about']"></Button>
12-
<Card:CardView class="cardStyle" radius="10" elevation="50" margin="20">
13-
<grid-layout rows="*, *, *" columns="*, *, *">
14-
<Image src="http://ionicframework.com/img/home/cta-iphone-2.png" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
15-
<TextView class="description" editable="false" text="The most popular template to create web (Ionic) and native (NativeScript) mobile apps!" textWrap="true" row="1" colSpan="3"></TextView>
16-
<Button text="Favorite" tap="goAway" row="3" col="0"></Button>
17-
<Button text="Listen" row="3" col="1"></Button>
18-
<Button text="Share" row="3" col="2"></Button>
19-
</grid-layout>
20-
</Card:CardView>
21-
<Card:CardView class="cardStyle" margin="20" elevation="40" radius="5">
22-
<grid-layout rows="*, *, *" columns="*, *, *">
23-
<Image src="https://upload.wikimedia.org/wikipedia/en/1/17/Batman-BenAffleck.jpg" stretch="aspectFill" colSpan="3" row="0" />
24-
<Label class="description" text="I'm batman!" textWrap="true" row="1" colSpan="3"></Label>
25-
<Button text="Favorite" tap="goAway" row="2" col="0" />
26-
<Button text="Listen" row="2" col="1" />
27-
<Button text="Share" row="2" col="2" />
28-
</grid-layout>
29-
</Card:CardView>
30-
</StackLayout>
31-
</GridLayout>
32-
</scroll-view>
7+
<ScrollView>
8+
<StackLayout>
9+
<SearchBar hint="Search hint"></SearchBar>
10+
<Card:CardView class="cardStyle" radius="10" elevation="50" margin="20">
11+
<GridLayout rows="*, *, *" columns="*, *, *">
12+
<Image src="http://ionicframework.com/img/home/cta-iphone-2.png" margin="20" stretch="aspectFill" colSpan="3" row="0"></Image>
13+
<TextView class="description" editable="false" text="The most popular template to create web (Ionic) and native (NativeScript) mobile apps!" textWrap="true" row="1" colSpan="3"></TextView>
14+
<Button (tap)="showAlert('Favorite')" text="Favorite" tap="goAway" row="3" col="0"></Button>
15+
<Button (tap)="showAlert('Listen')" text="Listen" row="3" col="1"></Button>
16+
<Button (tap)="showAlert('Share')" text="Share" row="3" col="2"></Button>
17+
</GridLayout>
18+
</Card:CardView>
19+
<Card:CardView class="cardStyle" margin="20" elevation="40" radius="5">
20+
<GridLayout rows="*, *, *" columns="*, *, *">
21+
<Image src="https://upload.wikimedia.org/wikipedia/en/1/17/Batman-BenAffleck.jpg" stretch="aspectFill" colSpan="3" row="0" />
22+
<Label class="description" text="I'm batman!" textWrap="true" row="1" colSpan="3"></Label>
23+
<Button text="Favorite" tap="goAway" row="2" col="0" />
24+
<Button text="Listen" row="2" col="1" />
25+
<Button text="Share" row="2" col="2" />
26+
</GridLayout>
27+
</Card:CardView>
28+
</StackLayout>
29+
</ScrollView>
3330
</Page>

‎src/app/home/components/home/home.component.tns.scss

-9
This file was deleted.

‎src/app/home/components/home/home.component.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,12 @@ export class HomeComponent implements OnInit {
1515

1616
}
1717

18-
showAlert() {
18+
showAlert(message) {
1919
let options = {
20-
title: "Race selection",
21-
message: "Race chosen: Unicorn",
20+
title: "Custom Alert",
21+
message: message,
2222
okButtonText: "OK"
2323
};
2424
alert(options);
2525
}
26-
27-
openPage(url) {
28-
this._router.navigate([url])
29-
}
3026
}

‎src/app/home/home.common.ts

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { HomeComponent } from './components/home/home.component';
88

99
export const SHARED_MODULES: any[] = [
1010
SharedModule,
11+
RouterModule,
1112
RouterModule.forChild(HomeRoutes),
1213
TranslateModule.forChild()
1314
];

0 commit comments

Comments
 (0)