javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demos): make conf app look closer

Browse Source
This commit is contained in:
mhartington
2018-01-09 17:05:42 -05:00
parent fd0aa45461
commit 3aefce179e
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/components/item-divider/item-divider.scss
View File

@ -21,6 +21,7 @@ ion-item-divider {
} }
ion-item-divider[sticky] { ion-item-divider[sticky] {
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
} }

4
packages/demos/conference-app/angular/src/app/app.component.html
View File

@ -3,7 +3,7 @@
<ion-menu> <ion-menu>
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="primary">
<ion-title>Menu</ion-title> <ion-title>Menu</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -13,7 +13,7 @@
Navigate Navigate
</ion-list-header> </ion-list-header>
<ion-item (click)="openPage(p)" *ngFor="let p of appPages"> <ion-item (click)="openPage(p)" *ngFor="let p of appPages">
<ion-icon slot="icon-only" [name]="p.icon" [color]="isActive(p)"></ion-icon> <ion-icon slot="start" [name]="p.icon" [color]="isActive(p)"></ion-icon>
<ion-label> <ion-label>
{{p.title}} {{p.title}}
</ion-label> </ion-label>

15
packages/demos/conference-app/angular/src/pages/schedule/schedule.html
View File

@ -1,14 +1,13 @@
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar color="primary">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon> <ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" ngDefaultControl color="light">
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" ngDefaultControl>
<ion-segment-button value="all"> <ion-segment-button value="all">
All All
</ion-segment-button> </ion-segment-button>
@ -24,8 +23,8 @@
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top> <ion-toolbar no-border-top color="primary">
<ion-searchbar color="primary" <ion-searchbar
[(ngModel)]="queryText" [(ngModel)]="queryText"
(ionInput)="updateSchedule()" (ionInput)="updateSchedule()"
placeholder="Search" ngDefaultControl> placeholder="Search" ngDefaultControl>
@ -34,7 +33,7 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-list #scheduleList [hidden]="shownSessions === 0"> <ion-list #scheduleList [hidden]="shownSessions === 0">
<div *ngFor="let group of groups" [hidden]="group.hide"> <!-- TODO should be ion-item-wrapper or whatever its called --> <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">
<ion-item-divider sticky> <ion-item-divider sticky>
<ion-label> <ion-label>
{{group.time}} {{group.time}}
@ -43,12 +42,14 @@
<ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide"> <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
<ion-item (click)="goToSessionDetail(session)"> <ion-item (click)="goToSessionDetail(session)">
<ion-label>
<h3>{{session.name}}</h3> <h3>{{session.name}}</h3>
<p> <p>
{{session.timeStart}} &mdash; {{session.timeStart}} &mdash;
{{session.timeEnd}}: {{session.timeEnd}}:
{{session.location}} {{session.location}}
</p> </p>
</ion-label>
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'"> <ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
@ -59,7 +60,7 @@
</ion-item-option> </ion-item-option>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
</div> </ion-item-group>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page> </ion-page>