From 30730d12f4e07303f6a1acf70afceac63685e725 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20K=C3=A4sler?= <tom.kaesler@mni.thm.de>
Date: Fri, 26 Jul 2019 01:31:53 +0200
Subject: [PATCH] Fix room list layout (setting width)

---
 .../shared/room-list/room-list.component.html | 21 +++++++++++--------
 .../shared/room-list/room-list.component.scss |  5 +++++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index 679d6e117..032af3b5e 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -7,27 +7,30 @@
 <div *ngIf="roomsWithRole && roomsWithRole.length != 0">
   <mat-expansion-panel [disabled]="true" id="matPanelHeader">
     <mat-expansion-panel-header>
-      <mat-panel-title class="headerTitle">Role</mat-panel-title>
       <mat-panel-title class="headerTitle">Session</mat-panel-title>
       <mat-panel-description class="headerTitle">ID</mat-panel-description>
+      <mat-panel-description class="roleTitle">Role</mat-panel-description>
+      <mat-panel-description class="headerTitle">&nbsp;</mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
   <mat-expansion-panel *ngFor="let room of roomsWithRole" class="matPanel">
     <mat-expansion-panel-header class="matPanelListHeader">
-      <button mat-flat-button routerLink="/{{ roleToString(room.role) }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
-        <mat-icon>input</mat-icon>
-      </button>
-      <mat-panel-title class="panelTitle" [ngSwitch]="room.role">
-        <mat-icon *ngSwitchCase="creatorRole">record_voice_over</mat-icon>
-        <mat-icon *ngSwitchCase="participantRole">face</mat-icon>
-        <mat-icon *ngSwitchCase="executiveModeratorRole">gavel</mat-icon>
-      </mat-panel-title>
       <mat-panel-title class="panelTitle">
         {{ room.name }}
       </mat-panel-title>
       <mat-panel-description class="panelTitle">
         {{ room.shortId.slice(0,4) }} {{  room.shortId.slice(4,8) }}
       </mat-panel-description>
+      <mat-panel-description class="roleTitle" [ngSwitch]="room.role">
+        <mat-icon *ngSwitchCase="creatorRole">record_voice_over</mat-icon>
+        <mat-icon *ngSwitchCase="participantRole">face</mat-icon>
+        <mat-icon *ngSwitchCase="executiveModeratorRole">gavel</mat-icon>
+      </mat-panel-description>
+      <mat-panel-description class="panelTitle" fxLayoutAlign="end end">
+        <button mat-flat-button routerLink="/{{ roleToString(room.role) }}/room/{{ room.shortId }}" (click)="setCurrentRoom(room.shortId)">
+          <mat-icon>input</mat-icon>
+        </button>
+      </mat-panel-description>
     </mat-expansion-panel-header>
     <p>
       {{ room.description }}
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index a1526bc77..0a7d0d70b 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -50,3 +50,8 @@ mat-card-title {
 mat-progress-spinner {
   margin-top: 30px;
 }
+
+.roleTitle {
+  width: 4%;
+  color: var(--on-surface)!important;
+}
-- 
GitLab