diff --git a/src/app/join-room/join-room.component.html b/src/app/join-room/join-room.component.html index c2b0d901866d6d7d2782299c08fc3ee7a268a8d1..f95094982ae799814fde8312e4a776f49d748e7b 100644 --- a/src/app/join-room/join-room.component.html +++ b/src/app/join-room/join-room.component.html @@ -1,6 +1,10 @@ <form> - <mat-form-field class="input-block"> - <input matInput placeholder="Room-Id" /> - </mat-form-field> - <button mat-raised-button color="primary">Join</button> + <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px"> + <mat-form-field class="input-block"> + <input matInput #roomId placeholder="Room-Id"/> + </mat-form-field> + <button mat-fab color="primary" routerLink="room/{{ roomId.value }}"> + <mat-icon>send</mat-icon> + </button> + </div> </form> diff --git a/src/app/participant-home-screen/participant-home-screen.component.html b/src/app/participant-home-screen/participant-home-screen.component.html index 46484d6c127ae15865345db476e55141e4b8a74c..68e3b6b6f7a4e66264dcef86e48b8c528092019c 100644 --- a/src/app/participant-home-screen/participant-home-screen.component.html +++ b/src/app/participant-home-screen/participant-home-screen.component.html @@ -1,2 +1,9 @@ -<app-join-room></app-join-room> -<app-room-list></app-room-list> +<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill> + <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px"> + <app-join-room></app-join-room> + </div> + <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px"> + <app-room-list></app-room-list> + </div> +</div> + diff --git a/src/app/participant-home-screen/participant-home-screen.component.scss b/src/app/participant-home-screen/participant-home-screen.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ed4708ea3398947ac56751ae1e22bfc58da24a6c 100644 --- a/src/app/participant-home-screen/participant-home-screen.component.scss +++ b/src/app/participant-home-screen/participant-home-screen.component.scss @@ -0,0 +1,8 @@ +app-join-room { + max-width: 800px; +} + +app-room-list { + width: 100%; + max-width: 800px; +}