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 a10064328a83872b02593886b16a66d07e9e031c..f210c6ce53ae221048703137fca1c7553ea9c76f 100644 --- a/src/app/components/shared/room-list/room-list.component.html +++ b/src/app/components/shared/room-list/room-list.component.html @@ -5,19 +5,20 @@ </div> <div *ngIf="roomsWithRole && roomsWithRole.length != 0"> - <mat-expansion-panel [disabled]="true" id="matPanelHeader"> + <mat-expansion-panel [disabled]="true" class="matPanel"> <mat-expansion-panel-header> <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="buttonTitle"></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"> - <mat-panel-title class="panelTitle"> + <mat-expansion-panel *ngFor="let room of roomsWithRole" class="matPanel" [disabled]="true"> + <mat-expansion-panel-header> + <mat-panel-title class="headerTitle"> {{ room.name }} </mat-panel-title> - <mat-panel-description class="panelTitle"> + <mat-panel-description class="headerTitle"> {{ room.shortId.slice(0,4) }} {{ room.shortId.slice(4,8) }} </mat-panel-description> <mat-panel-description class="roleTitle" [ngSwitch]="room.role"> @@ -25,14 +26,11 @@ <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"> + <mat-panel-description class="buttonTitle" fxLayoutAlign="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 }} - </p> </mat-expansion-panel> </div> 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 7f9f26e4e07926d4b9697c30915db96798797eff..7321b41a6653f0e36073bc39d8026427be574b14 100644 --- a/src/app/components/shared/room-list/room-list.component.scss +++ b/src/app/components/shared/room-list/room-list.component.scss @@ -1,60 +1,52 @@ button { - margin-right: 10px; background-color: var(--secondary); color: var(--on-secondary); + transform: scale(0.9); } .mat-expansion-panel-header-description { - flex-basis: 0; align-items: center; } - .matPanel { background-color: var(--primary-variant); margin-bottom: 5px; color: var(--on-surface)!important; } -#matPanelHeader { - background-color: var(--primary-variant); - margin-bottom: 5px; - color: var(--on-surface); -} - -.matPanelListHeader { +mat-expansion-panel-header { + padding: 0 3% 0 3%; background-color: var(--primary-variant) !important; } mat-panel-title { - flex-basis: 0; + flex-grow: 3; align-items: center; min-width: 80px; + margin: 0; } -.headerTitle { - width: 8%; - color: var(--on-surface)!important; +mat-panel-description { + flex-grow: 1; + align-items: center!important; + margin: 0; } -.panelTitle { +.headerTitle { width: 8%; + min-width: 50px; color: var(--on-surface)!important; } -mat-card-title { - text-align: center; -} - mat-progress-spinner { margin-top: 30px; } .roleTitle { - width: 4%; color: var(--on-surface)!important; + width: 5%; } -.mat-flat-button { - margin: 0; +.buttonTitle { + width: 5%; }