diff --git a/src/app/participant-room/participant-room.component.html b/src/app/participant-room/participant-room.component.html index 3eb6bc5a52d4a20073408aa4bcdf6fbc86625c06..a77376131d5a7ca67ac8a929fbaa5c32d34526f1 100644 --- a/src/app/participant-room/participant-room.component.html +++ b/src/app/participant-room/participant-room.component.html @@ -1,23 +1,34 @@ -<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill> +<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill> <div fxLayout="row" fxLayoutAlign="center"> - <div fxLayoutGap="20px"> - <mat-list fxLayout="column" fxLayoutGap="10px" fxLayoutAlign="center"> - <mat-list-item>Room: {{roomId}}</mat-list-item> - <mat-list-item> - <button mat-fab color="primary" routerLink="/room/{{roomId}}/create-comment"> - <mat-icon>question_answer</mat-icon> - </button> - <button mat-fab color="primary"> - <mat-icon>feedback</mat-icon> - </button> - </mat-list-item> - <mat-list-item> - <button mat-raised-button color="primary">Contents</button> - </mat-list-item> - <mat-list-item> - <button mat-raised-button color="primary">Comments</button> - </mat-list-item> - </mat-list> - </div> - </div> + <mat-card> + <mat-card-header> + <mat-card-title><h3 class="subheading-2">{{ roomName }}</h3></mat-card-title> + <mat-card-subtitle>{{ roomId }}</mat-card-subtitle> + </mat-card-header> + <mat-divider></mat-divider> + <mat-card-content> + <p> + {{ roomDescription }} + </p> + </mat-card-content> + <mat-divider></mat-divider> + <mat-card-actions> + <button mat-icon-button color="primary" matTooltip="Ask something" routerLink="/room/{{roomId}}/create-comment"> + <mat-icon>question_answer</mat-icon> + </button> + <button mat-icon-button color="primary" matTooltip="Give feedback"> + <mat-icon>feedback</mat-icon> + </button> + <button mat-button color="primary" matTooltip="Join question round"> + Questions + </button> + <button mat-button color="primary" matTooltip="See room comments"> + Comments + </button> + <button mat-button color="primary" matTooltip="Start personal question round"> + Learn + </button> + </mat-card-actions> + </mat-card> + </div> </div> diff --git a/src/app/participant-room/participant-room.component.scss b/src/app/participant-room/participant-room.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..edaeaf744fc3fb135465a6e113293ebbffab2266 100644 --- a/src/app/participant-room/participant-room.component.scss +++ b/src/app/participant-room/participant-room.component.scss @@ -0,0 +1,7 @@ +mat-card { + max-width: 800px; +} + +mat-card-content>:first-child { + margin-top: 16px; +} diff --git a/src/app/participant-room/participant-room.component.ts b/src/app/participant-room/participant-room.component.ts index 6e5404f51580d21e9dc809e119dee20829ef2911..1409939fd29038d92bbb1906a6c14ef0b811e1c3 100644 --- a/src/app/participant-room/participant-room.component.ts +++ b/src/app/participant-room/participant-room.component.ts @@ -6,7 +6,15 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./participant-room.component.scss'] }) export class ParticipantRoomComponent implements OnInit { - roomId = '1'; + + roomId = '12 34 56 78'; + roomName = 'Test Room'; + roomDescription = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ' + + 'magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea ' + + 'takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ' + + 'tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea ' + + 'rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; + constructor() { }