Fix mat lists

OpenSlides · May 28, 2024 · 572668c · 572668c
1 parent 8abf4b5
commit 572668c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/...c/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html b/...c/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html
@@ -7,18 +7,17 @@ <h2 mat-dialog-title class="flex-container padding-top-16">
 <mat-divider></mat-divider>
 <mat-dialog-content class="account-dialog-container">
     <div class="account-dialog-menu-items">
-        <mat-selection-list [multiple]="false">
+        <mat-nav-list>
             <ng-container *ngFor="let item of filteredMenuItems">
-                <mat-list-option
-                    [value]="item"
-                    [selected]="activeMenuItem === item.name"
+                <mat-list-item
+                    [activated]="activeMenuItem === item.name"
                     (click)="activeMenuItem = item.name"
                 >
                     {{ item.name | translate }}
-                </mat-list-option>
+                </mat-list-item>
                 <mat-divider></mat-divider>
             </ng-container>
-        </mat-selection-list>
+        </mat-nav-list>
     </div>
     <mat-divider [vertical]="true"></mat-divider>
     <div class="account-dialog-content">

diff --git a/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.html b/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.html
@@ -294,15 +294,15 @@ <h2>{{ projector.name }}</h2>
                         <mat-expansion-panel-header>
                             <span>{{ 'Timers' | translate }}</span>
                         </mat-expansion-panel-header>
-                        <mat-list>
-                            <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
+                        <div class="card-list">
+                            <div *ngFor="let countdown of countdowns" class="card-list-item">
                                 <os-countdown-controls
                                     class="dynamic-list-entry"
                                     [countdown]="countdown"
                                     [projector]="projector"
                                 ></os-countdown-controls>
-                            </mat-list-item>
-                        </mat-list>
+                            </div>
+                        </div>
                         <mat-action-row>
                             <button type="button" mat-button (click)="createProjectorCountdown()">
                                 <mat-icon>add</mat-icon>
@@ -316,8 +316,8 @@ <h2>{{ projector.name }}</h2>
                         <mat-expansion-panel-header>
                             <span>{{ 'Messages' | translate }}</span>
                         </mat-expansion-panel-header>
-                        <mat-list>
-                            <mat-list-item class="larger-mat-list-item">
+                        <div class="card-list">
+                            <div class="card-list-item">
                                 <mat-card class="wifi-card" style="width: 100%">
                                     <mat-card-content>
                                         <div
@@ -336,15 +336,15 @@ <h2>{{ projector.name }}</h2>
                                         </small>
                                     </mat-card-content>
                                 </mat-card>
-                            </mat-list-item>
-                            <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
+                            </div>
+                            <div *ngFor="let message of messages" class="card-list-item">
                                 <os-message-controls
                                     class="dynamic-list-entry"
                                     [message]="message"
                                     [projector]="projector"
                                 ></os-message-controls>
-                            </mat-list-item>
-                        </mat-list>
+                            </div>
+                        </div>
                         <mat-action-row>
                             <button type="button" mat-button (click)="createProjectorMessage()">
                                 <mat-icon>add</mat-icon>

diff --git a/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.scss b/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
@@ -131,6 +131,12 @@
     }
 }
 
+.card-list {
+    .card-list-item:not(:last-of-type) {
+        margin-bottom: 8px;
+    }
+}
+
 .drop-list-entry:last-child {
     border: none;
 }