fix(admin-ui): Fix layout of Zone & CustomerGroup lists

packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html

@@ -9,58 +9,67 @@
     </vdr-ab-right>
 </vdr-action-bar>
 <div class="group-wrapper">
-    <table class="table group-list" [class.expanded]="activeGroup$ | async" *ngIf="!(listIsEmpty$ | async); else emptyPlaceholder">
-        <tbody>
-            <tr *ngFor="let group of groups$ | async" [class.active]="group.id === (activeGroup$ | async)?.id">
-                <td class="left align-middle"><vdr-entity-info [entity]="group"></vdr-entity-info></td>
-                <td class="left align-middle"><vdr-chip [colorFrom]="group.id">{{ group.name }}</vdr-chip></td>
-                <td class="text-right align-middle">
-                    <a
-                        class="btn btn-link btn-sm"
-                        [routerLink]="['./', { contents: group.id }]"
-                        queryParamsHandling="preserve"
-                    >
-                        <clr-icon shape="view-list"></clr-icon>
-                        {{ 'customer.view-group-members' | translate }}
-                    </a>
-                </td>
-                <td class="align-middle">
-                    <button class="btn btn-link btn-sm" (click)="update(group)">
-                        <clr-icon shape="edit"></clr-icon>
-                        {{ 'common.edit' | translate }}
-                    </button>
-                </td>
-                <td class="align-middle">
-                    <vdr-dropdown>
-                        <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
-                            {{ 'common.actions' | translate }}
-                            <clr-icon shape="caret down"></clr-icon>
+    <div class="group-list">
+        <table
+            class="table mt0"
+            [class.expanded]="activeGroup$ | async"
+            *ngIf="!(listIsEmpty$ | async); else emptyPlaceholder"
+        >
+            <tbody>
+                <tr
+                    *ngFor="let group of groups$ | async"
+                    [class.active]="group.id === (activeGroup$ | async)?.id"
+                >
+                    <td class="left align-middle"><vdr-entity-info [entity]="group"></vdr-entity-info></td>
+                    <td class="left align-middle">
+                        <vdr-chip [colorFrom]="group.id">{{ group.name }}</vdr-chip>
+                    </td>
+                    <td class="text-right align-middle">
+                        <a
+                            class="btn btn-link btn-sm"
+                            [routerLink]="['./', { contents: group.id }]"
+                            queryParamsHandling="preserve"
+                        >
+                            <clr-icon shape="view-list"></clr-icon>
+                            {{ 'customer.view-group-members' | translate }}
+                        </a>
+                    </td>
+                    <td class="align-middle">
+                        <button class="btn btn-link btn-sm" (click)="update(group)">
+                            <clr-icon shape="edit"></clr-icon>
+                            {{ 'common.edit' | translate }}
                         </button>
-                        <vdr-dropdown-menu vdrPosition="bottom-right">
-                            <button
-                                class="button"
-                                vdrDropdownItem
-                                (click)="delete(group.id)"
-                                [disabled]="!('DeleteCustomerGroup' | hasPermission)"
-                            >
-                                <clr-icon shape="trash" class="is-danger"></clr-icon>
-                                {{ 'common.delete' | translate }}
+                    </td>
+                    <td class="align-middle">
+                        <vdr-dropdown>
+                            <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+                                {{ 'common.actions' | translate }}
+                                <clr-icon shape="caret down"></clr-icon>
                             </button>
-                        </vdr-dropdown-menu>
-                    </vdr-dropdown>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+                            <vdr-dropdown-menu vdrPosition="bottom-right">
+                                <button
+                                    class="button"
+                                    vdrDropdownItem
+                                    (click)="delete(group.id)"
+                                    [disabled]="!('DeleteCustomerGroup' | hasPermission)"
+                                >
+                                    <clr-icon shape="trash" class="is-danger"></clr-icon>
+                                    {{ 'common.delete' | translate }}
+                                </button>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
     <ng-template #emptyPlaceholder>
         <vdr-empty-placeholder></vdr-empty-placeholder>
     </ng-template>
     <div class="group-members" [class.expanded]="activeGroup$ | async">
         <ng-container *ngIf="activeGroup$ | async as activeGroup">
             <div class="flex">
-                <div class="header-title-row">
-                    {{ activeGroup.name }} ({{ membersTotal$ | async }})
-                </div>
+                <div class="header-title-row">{{ activeGroup.name }} ({{ membersTotal$ | async }})</div>
                 <div class="flex-spacer"></div>
                 <button type="button" class="close-button" (click)="closeMembers()">
                     <clr-icon shape="close"></clr-icon>
@@ -105,4 +114,3 @@
         </ng-container>
     </div>
 </div>
-

packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html

@@ -2,56 +2,67 @@
     <vdr-ab-left> </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="zone-list"></vdr-action-bar-items>
-        <button class="btn btn-primary" *vdrIfPermissions="['CreateSettings', 'CreateZone']" (click)="create()">
+        <button
+            class="btn btn-primary"
+            *vdrIfPermissions="['CreateSettings', 'CreateZone']"
+            (click)="create()"
+        >
             <clr-icon shape="plus"></clr-icon>
             {{ 'settings.create-new-zone' | translate }}
         </button>
     </vdr-ab-right>
 </vdr-action-bar>
 <div class="zone-wrapper">
-    <table class="table zone-list">
-        <tbody>
-            <tr *ngFor="let zone of zones$ | async" [class.active]="zone.id === (activeZone$ | async)?.id">
-                <td class="left align-middle"><vdr-entity-info [entity]="zone"></vdr-entity-info></td>
-                <td class="left align-middle"><vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip></td>
-                <td class="text-right align-middle">
-                    <a
-                        class="btn btn-link btn-sm"
-                        [routerLink]="['./', { contents: zone.id }]"
-                        queryParamsHandling="preserve"
-                    >
-                        <clr-icon shape="view-list"></clr-icon>
-                        {{ 'settings.view-zone-members' | translate }}
-                    </a>
-                </td>
-                <td class="align-middle">
-                    <button class="btn btn-link btn-sm" (click)="update(zone)">
-                        <clr-icon shape="edit"></clr-icon>
-                        {{ 'common.edit' | translate }}
-                    </button>
-                </td>
-                <td class="align-middle">
-                    <vdr-dropdown>
-                        <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
-                            {{ 'common.actions' | translate }}
-                            <clr-icon shape="caret down"></clr-icon>
+    <div class="zone-list">
+        <table class="table mt0">
+            <tbody>
+                <tr
+                    *ngFor="let zone of zones$ | async"
+                    [class.active]="zone.id === (activeZone$ | async)?.id"
+                >
+                    <td class="left align-middle"><vdr-entity-info [entity]="zone"></vdr-entity-info></td>
+                    <td class="left align-middle">
+                        <vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip>
+                    </td>
+                    <td class="text-right align-middle">
+                        <a
+                            class="btn btn-link btn-sm"
+                            [routerLink]="['./', { contents: zone.id }]"
+                            queryParamsHandling="preserve"
+                        >
+                            <clr-icon shape="view-list"></clr-icon>
+                            {{ 'settings.view-zone-members' | translate }}
+                        </a>
+                    </td>
+                    <td class="align-middle">
+                        <button class="btn btn-link btn-sm" (click)="update(zone)">
+                            <clr-icon shape="edit"></clr-icon>
+                            {{ 'common.edit' | translate }}
                         </button>
-                        <vdr-dropdown-menu vdrPosition="bottom-right">
-                            <button
-                                class="button"
-                                vdrDropdownItem
-                                (click)="delete(zone.id)"
-                                [disabled]="!(['DeleteSettings', 'DeleteZone'] | hasPermission)"
-                            >
-                                <clr-icon shape="trash" class="is-danger"></clr-icon>
-                                {{ 'common.delete' | translate }}
+                    </td>
+                    <td class="align-middle">
+                        <vdr-dropdown>
+                            <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+                                {{ 'common.actions' | translate }}
+                                <clr-icon shape="caret down"></clr-icon>
                             </button>
-                        </vdr-dropdown-menu>
-                    </vdr-dropdown>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+                            <vdr-dropdown-menu vdrPosition="bottom-right">
+                                <button
+                                    class="button"
+                                    vdrDropdownItem
+                                    (click)="delete(zone.id)"
+                                    [disabled]="!(['DeleteSettings', 'DeleteZone'] | hasPermission)"
+                                >
+                                    <clr-icon shape="trash" class="is-danger"></clr-icon>
+                                    {{ 'common.delete' | translate }}
+                                </button>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
     <div class="zone-members" [class.expanded]="activeZone$ | async">
         <ng-container *ngIf="activeZone$ | async as activeZone">
             <vdr-zone-member-list