docs(demos): update platform demo to include windows

add styling to the code blocks to differentiate them more visually
This commit is contained in:
Brandy Carney
2016-04-15 16:51:21 -04:00
parent 43c6e096af
commit 4897f02c11
2 changed files with 41 additions and 6 deletions

View File

@ -4,9 +4,15 @@ import {App, Platform} from 'ionic-angular';
templateUrl: 'main.html'
})
class ApiDemoApp {
isIos: boolean;
isAndroid: boolean;
isWindows: boolean;
userAgent: string;
constructor(platform: Platform) {
this.isIos = platform.is('ios');
this.isAndroid = platform.is('android');
this.isWindows = platform.is('windows');
this.userAgent = platform.userAgent();
}
}

View File

@ -14,7 +14,7 @@
<pre>platform.is('android')</pre>
</ion-col>
<ion-col>
<pre>{{isAndroid}}</pre>
<pre [ngClass]="isAndroid ? 'platform-true' : 'platform-false'">{{isAndroid}}</pre>
</ion-col>
</ion-row>
<ion-row>
@ -22,7 +22,15 @@
<pre>platform.is('ios')</pre>
</ion-col>
<ion-col>
<pre>{{isIos}}</pre>
<pre [ngClass]="isIos ? 'platform-true' : 'platform-false'">{{isIos}}</pre>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<pre>platform.is('windows')</pre>
</ion-col>
<ion-col>
<pre [ngClass]="isWindows ? 'platform-true' : 'platform-false'">{{isWindows}}</pre>
</ion-col>
</ion-row>
<ion-row>
@ -30,16 +38,21 @@
<pre>platform.userAgent()</pre>
</ion-col>
<ion-col>
<pre>{{userAgent}}</pre>
<pre class="platform-normal">{{userAgent}}</pre>
</ion-col>
</ion-row>
</ion-content>
<style>
.platform-demo ion-col {
flex: 0 0 50%;
max-width: 50%;
.platform-demo ion-row ion-col:nth-child(odd) {
flex: 0 0 62%;
max-width: 62%;
}
.platform-demo ion-row ion-col:nth-child(even) {
flex: 0 0 38%;
max-width: 38%;
}
.platform-demo pre {
@ -50,6 +63,22 @@
margin-top: 0;
border: 1px solid #ddd;
border-radius: 2px;
white-space: pre-wrap;
}
.platform-demo .platform-true {
background: #dff2bf;
border-color: #4f8a10;
}
.platform-demo .platform-false {
background: #ffbaba;
border-color: #d8000c;
}
.platform-demo .platform-normal {
background: #bde5f8;
border-color: #00529b;
}
.platform-demo .note {