vortrags-karte 1/2 wegs ansehnlich

src/src/pages/programme/programme.html

@@ -5,21 +5,65 @@
   </button>
     <ion-title>Programm</ion-title>
   </ion-navbar>
+  <ion-toolbar>
+   <ion-title>{{room}}</ion-title>
+  </ion-toolbar>
 </ion-header>
 
 
 <ion-content padding>
+<ion-slides (ionSlideDidChange)="slideChanged()">
+  <ion-slide>
 
+  <ion-list no-lines>
+  <ion-item style="border-bottom: 1px solid #dedede;">
+
+    <div item-left style="text-align: center;font-size: 0.5em;">
+        18:00 <br/>-<br/> 19:00
+      </div>
+    <ion-card item-content style="height: 12em;" round inset class="card-red">
+    <ion-item text-wrap class="card-header">
+     <ion-icon name="thumbs-up" item-right></ion-icon>
+    <h2>Marty McFly</h2>
+    <p class="names">November 5, 1955 November 5, 1955 November 5, 1955 November 5, 1955 November 5, 1955</p>
+    </ion-item>
+    <ion-content class="teaser" style="height: 4em;">
+      geschwurbel nccn acoihc oqoc  qpoch cpoqohc qüo ü qoicjhqü coiq jcü
+      coihiqj cüqoicj  +qcojqocäöqj c+qp c cq+ciqjc qjc+qp cjeq+  +qcjqpcj
+    </ion-content>
+    <ion-row>
+    <ion-col>
+      <button ion-button icon-left clear small>
+        <ion-icon name="thumbs-up"></ion-icon>
+        <div>12 Likes</div>
+      </button>
+    </ion-col>
+     <ion-col>
+        <ion-icon name="camera" icon-right clear small></ion-icon>
+    </ion-col>
+  </ion-row>
+  </ion-card>
 
-<ion-list >
-<ion-item text-wrap *ngFor="let item of scheduleData" >
-<p >{{item.data.title}}</p>
-</ion-item>
-</ion-list>
+  </ion-item>
+  <ion-item style="border-bottom: 1px solid #dedede;">
 
-<ion-slides>
-  <ion-slide>
-    <h1>Slide 1</h1>
+   <div item-left style="text-align: center;font-size: 0.5em;">
+        18:00 <br/>-<br/> 19:00
+      </div>
+     <ion-card item-content style="height: 10em;" class="card-blue">
+    <ion-card-header >
+      1Card Header
+    </ion-card-header>
+    <ion-card-content>
+      geschwurbel
+    </ion-card-content>
+  </ion-card>
+
+  </ion-item>
+  <ion-item>The Empire Strikes Back</ion-item>
+  <ion-item>Blade Runner</ion-item>
+
+</ion-list>
     <ion-grid>
       <ion-row align-items-start>
         <ion-col>17:00-18:00</ion-col>

src/src/pages/programme/programme.scss

 page-programme {
 
 ion-slides { height: initial; }
+
+
+
+  .card-red {
+    background-color: red;
+  }
+
+  .card-blue {
+    background-color: blue;
+  }
+
+  .card-header {
+    background-color: transparent;
+    .title{
+      max-height: 1em;
+    overflow: hidden;
+    }
+    .names{
+  max-height: 2em;
+  overflow: hidden;
+
+  }
+  .teaser{
+    max-height: 2em;
+  overflow: hidden;
+  }
+
+  }
 }

src/src/pages/programme/programme.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
 import { ScheduleProvider } from '../../providers/schedule-provider';
+import { ViewChild } from '@angular/core';
+import { Slides } from 'ionic-angular';
 
 /**
  * Generated class for the Programme page.
@@ -15,7 +17,8 @@ import { ScheduleProvider } from '../../providers/schedule-provider';
   providers:[ScheduleProvider],
 })
 export class Programme {
-  room: string = "1";
+  @ViewChild(Slides) slides: Slides;
+  room: string = "0";
   loading: any;
   scheduleData: any;
   constructor(public navCtrl: NavController, public navParams: NavParams, private scheduleProvider:ScheduleProvider, public loadingCtrl: LoadingController) {
@@ -44,6 +47,10 @@ export class Programme {
       console.log('getData completed');
     }
   );
-}
+  }
 
+  slideChanged() {
+    let currentIndex = this.slides.getActiveIndex();
+    this.room = String(currentIndex);
+  }
 }