From 94b0fa9e09f7aebf91d1b5a857544a4d64a5ed2f Mon Sep 17 00:00:00 2001
From: Lukas Kimpel <lukas.kimpel@mni.thm.de>
Date: Fri, 9 Mar 2018 10:12:04 +0100
Subject: [PATCH] Adjust room list to use Material Accordion/Expansion Panel
---
.../creator-home-screen.component.scss | 4 +++
src/app/room-list/room-list.component.html | 26 +++++++++++++------
2 files changed, 22 insertions(+), 8 deletions(-)
diff --git a/src/app/creator-home-screen/creator-home-screen.component.scss b/src/app/creator-home-screen/creator-home-screen.component.scss
index e69de29bb..e41d2f8e7 100644
--- a/src/app/creator-home-screen/creator-home-screen.component.scss
+++ b/src/app/creator-home-screen/creator-home-screen.component.scss
@@ -0,0 +1,4 @@
+app-room-list {
+ width: 100%;
+ max-width: 800px;
+}
diff --git a/src/app/room-list/room-list.component.html b/src/app/room-list/room-list.component.html
index 5c96b0160..ceb786696 100644
--- a/src/app/room-list/room-list.component.html
+++ b/src/app/room-list/room-list.component.html
@@ -1,8 +1,18 @@
-<mat-list>
- <mat-list-item *ngFor="let room of rooms">
- <button mat-button routerLink="room/{{room.id}}">
- {{room.name}}
- </button>
- </mat-list-item>
-</mat-list>
-
+<mat-accordion>
+ <mat-expansion-panel *ngFor="let room of rooms">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{ room.shortId }}
+ </mat-panel-title>
+ <mat-panel-description>
+ {{ room.name }}
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <p>
+ {{ room.description }}
+ </p>
+ <mat-action-row>
+ <button mat-button routerLink="/room/{{ room.id }}">Join room</button>
+ </mat-action-row>
+ </mat-expansion-panel>
+</mat-accordion>
--
GitLab