diff --git a/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html index 228c9808d45c6f5b81e47b178e21cfe28e4fe01c..24e3210d9ba5b2c063a56307b9757f281cf614da 100644 --- a/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html +++ b/alfa-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html @@ -28,73 +28,75 @@ [attr.aria-label]="ariaLabel" routerLink="/vorgang/{{ vorgang | toResourceUri: vorgangLinkRel.VORGANG_WITH_EINGANG }}" [attr.data-test-id]="'vorgang-list-item-' + vorgang.name | convertForDataTest" - class="flex flex-row gap-4 border-b-2 border-gray-200 p-4 hover:shadow-[inset_1px_-1px_0_0_rgba(0,0,0,0.16)] dark:border-b dark:border-gray-300 dark:hover:shadow-[inset_1px_-1px_0_0_rgba(255,255,255,0.60)]" + class="flex flex-col gap-2 border-b-2 border-gray-200 p-4 hover:shadow-[inset_1px_-1px_0_0_rgba(0,0,0,0.16)] dark:border-b dark:border-gray-300 dark:hover:shadow-[inset_1px_-1px_0_0_rgba(255,255,255,0.60)] lg:flex-row lg:gap-4" > - <div class="flex w-32 flex-none flex-col"> - <div class="flex items-center gap-3"> - <alfa-vorgang-status-dot - [status]="vorgang.status" - diameter="12" - data-test-class="status-dot" - ></alfa-vorgang-status-dot> - <alfa-vorgang-status-text - [status]="vorgang.status" - data-test-class="status-text" - class="status-text" - ></alfa-vorgang-status-text> - </div> - <div class="ml-6 mt-3 flex text-sm"> - <alfa-vorgang-bescheid-status - *ngIf="vorgang.antragBewilligt !== null" - [vorgang]="vorgang" - data-test-id="vorgang-list-item-bescheid-status" - ></alfa-vorgang-bescheid-status> - </div> - </div> - <div class="flex flex-1 flex-col gap-1"> - <div data-test-id="name" class="break-all text-base font-medium"> - {{ vorgang.name }} - </div> - <div class="mt-1"> - <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer> - </div> - <div> - <div class="flex flex-row gap-1"> - <div class="flex flex-shrink-0"> - <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon> + <div class="flex grow flex-row gap-4"> + <div class="flex flex-1 flex-col gap-4 lg:flex-row"> + <div class="flex flex-none flex-row lg:w-32 lg:flex-col"> + <div class="flex items-center gap-3"> + <alfa-vorgang-status-dot [status]="vorgang.status" diameter="12" data-test-class="status-dot"></alfa-vorgang-status-dot> + <alfa-vorgang-status-text + [status]="vorgang.status" + data-test-class="status-text" + class="status-text" + ></alfa-vorgang-status-text> + </div> + <div class="ml-6 flex text-sm lg:mt-3"> + <alfa-vorgang-bescheid-status + *ngIf="vorgang.antragBewilligt !== null" + [vorgang]="vorgang" + data-test-id="vorgang-list-item-bescheid-status" + ></alfa-vorgang-bescheid-status> + </div> + </div> + <div class="ml-6 flex flex-1 flex-col gap-1 lg:ml-0"> + <div data-test-id="name" class="break-all text-base font-medium"> + {{ vorgang.name }} + </div> + <div class="mt-1"> + <alfa-vorgang-nummer class="vorgang-nummer" [vorgang]="vorgang"></alfa-vorgang-nummer> + </div> + <div> + <div class="flex flex-row gap-1"> + <div class="flex flex-shrink-0"> + <mat-icon svgIcon="az" style="width: 1.5rem; height: 1.5rem"></mat-icon> + </div> + <div alfa-aktenzeichen [vorgang]="vorgang"></div> + </div> + </div> + </div> + <div class="ml-6 flex w-48 gap-4 lg:ml-0"> + <div class="flex w-36 flex-none flex-col gap-2"> + <div> + <alfa-vorgang-created-at class="eingang" [vorgang]="vorgang"></alfa-vorgang-created-at> + </div> + <div> + <alfa-vorgang-next-frist-button + *ngIf="vorgang | hasLink: vorgangLinkRel.WIEDERVORLAGEN" + [vorgang]="vorgang" + class="wiedervorlagen" + ></alfa-vorgang-next-frist-button> + </div> + + <div> + <ozgcloud-postfach-icon + data-test-class="postfach-icon" + *ngIf="vorgang.hasPostfachNachricht === true" + [showBadge]="vorgang.hasNewPostfachNachricht" + class="postfach-icon" + > + </ozgcloud-postfach-icon> + </div> </div> - <div alfa-aktenzeichen [vorgang]="vorgang"></div> </div> </div> - </div> - <div class="flex w-36 flex-none flex-col gap-2"> - <div> - <alfa-vorgang-created-at class="eingang" [vorgang]="vorgang"></alfa-vorgang-created-at> - </div> - <div> - <alfa-vorgang-next-frist-button - *ngIf="vorgang | hasLink: vorgangLinkRel.WIEDERVORLAGEN" + <div class="flex-none"> + <alfa-user-profile-in-vorgang-list-item-container + *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN" + data-test-id="vorgang-user-icon" [vorgang]="vorgang" - class="wiedervorlagen" - ></alfa-vorgang-next-frist-button> - </div> - - <div> - <ozgcloud-postfach-icon - data-test-class="postfach-icon" - *ngIf="vorgang.hasPostfachNachricht === true" - [showBadge]="vorgang.hasNewPostfachNachricht" - class="postfach-icon" - > - </ozgcloud-postfach-icon> + class="user-icon" + ></alfa-user-profile-in-vorgang-list-item-container> </div> </div> - <div class="w-10 flex-none"> - <alfa-user-profile-in-vorgang-list-item-container - *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN" - data-test-id="vorgang-user-icon" - [vorgang]="vorgang" - class="user-icon" - ></alfa-user-profile-in-vorgang-list-item-container> - </div> </a>