Commit 6191c75a authored by Tom Käsler's avatar Tom Käsler

Merge branch '390-layout-problems-in-room-list-view' into 'master'

Refactor room-list view

Closes #390

See merge request !371
parents d19fe6dc 3f987a17
Pipeline #29784 passed with stages
in 8 minutes and 45 seconds
......@@ -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>
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%;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment