Merge branch '22-participant-home-screen-html-template' into 'master'

Resolve "participant home screen - html template"

Closes #20 and #22

See merge request swtp-block-ws17/arsnova-angular-frontend!63

src/app/join-room/join-room.component.html

 <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>

src/app/participant-home-screen/participant-home-screen.component.html

-<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>
+

src/app/participant-home-screen/participant-home-screen.component.scss

+app-join-room {
+  max-width: 800px;
+}
+
+app-room-list {
+  width: 100%;
+  max-width: 800px;
+}

src/app/room-list/room-list.component.html

@@ -12,7 +12,7 @@
       {{ room.description }}
     </p>
     <mat-action-row>
-      <button mat-button routerLink="/room/{{ room.id }}">Join room</button>
+      <button mat-button routerLink="room/{{ room.id }}">Join room</button>
     </mat-action-row>
   </mat-expansion-panel>
 </mat-accordion>